更新

src/views/asrs/Histogram/index.vue

@@ -0,0 +1,133 @@
+<!--
+ * @Author: zwq
+ * @Date: 2023-08-22 15:01:54
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-09-05 14:52:47
+ * @Description:
+-->
+<template>
+	<div class="app-container">
+		<search-bar
+			:formConfigs="formConfig"
+			ref="searchBarForm"
+			@headBtnClick="buttonClick" />
+		<el-row :gutter="20">
+			<el-col :span="23">
+				<barChart
+					title="柱状图分析"
+					ref="barChart"
+					height="500px"
+					:histogram="tableData" />
+			</el-col>
+		</el-row>
+	</div>
+</template>
+
+<script>
+import basicPage from '../mixins/basic-page';
+import barChart from '../chart/BarChart.vue';
+import { getHistogram } from '@/api/asrs/warehouseStorehouseStorage';
+import { getGoodSpecificationPage } from '@/api/asrs/goodSpecification';
+
+export default {
+	mixins: [basicPage],
+	data() {
+		return {
+			urlOptions: {
+				getDataListURL: getHistogram,
+			},
+			listQuery: {
+				warehouseId: '',
+				goodName: '',
+				startTime: '',
+				endTime: '',
+			},
+			formConfig: [
+				{
+					type: 'select',
+					label: '产品',
+					selectOptions: [],
+					labelField: 'goodSpecificationName',
+					valueField: 'goodSpecificationName',
+					param: 'name',
+					filterable: true,
+				},
+				{
+					type: 'datePicker',
+					label: '时间',
+					dateType: 'daterange',
+					format: 'yyyy-MM-dd',
+					valueFormat: 'yyyy-MM-dd',
+					rangeSeparator: '-',
+					startPlaceholder: '开始时间',
+					endPlaceholder: '结束时间',
+					param: 'searchTime',
+				},
+				{
+					type: 'button',
+					btnName: '搜索',
+					name: 'search',
+					color: 'primary',
+				},
+			],
+		};
+	},
+	components: {
+		barChart,
+	},
+	created() {
+		this.getArr();
+	},
+	methods: {
+		// 获取数据列表
+		getDataList() {
+			if (this.listQuery.goodName) {
+				this.urlOptions.getDataListURL(this.listQuery).then((response) => {
+					this.tableData = response.data;
+					this.$nextTick(() => {
+						this.$refs.barChart.initChart();
+					});
+				});
+			}
+		},
+		getArr() {
+			const params = { pageSize: 100, pageNo: 1, total: 1 };
+			getGoodSpecificationPage(params).then((response) => {
+				this.formConfig[0].selectOptions = response.data.list;
+			});
+		},
+		buttonClick(val) {
+			switch (val.btnName) {
+				case 'search':
+					if (val.name) {
+						this.listQuery.goodName = val.name;
+						if (val.searchTime) {
+							this.listQuery.startTime = val.searchTime
+								? val.searchTime[0]
+								: '';
+							this.listQuery.endTime = val.searchTime ? val.searchTime[1] : '';
+							this.getDataList();
+						} else {
+							this.$modal.msgWarning('请选择时间');
+						}
+					} else {
+						this.$modal.msgWarning('请选择产品');
+					}
+					break;
+				case 'reset':
+					this.$refs.searchBarForm.resetForm();
+					this.listQuery = {
+						warehouseId: this.aId,
+						goodName: '',
+						startTime: '',
+						endTime: '',
+					};
+					this.getDataList();
+					break;
+				default:
+					console.log(val);
+			}
+		},
+	},
+};
+</script>

src/views/asrs/Histogram/indexb.vue

@@ -0,0 +1,134 @@
+<!--
+ * @Author: zwq
+ * @Date: 2023-08-22 15:01:54
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-09-05 14:52:57
+ * @Description:
+-->
+<template>
+	<div class="app-container">
+		<search-bar
+			:formConfigs="formConfig"
+			ref="searchBarForm"
+			@headBtnClick="buttonClick" />
+		<el-row :gutter="20">
+			<el-col :span="23">
+				<barChart
+					title="柱状图分析"
+					ref="barChart"
+					height="500px"
+					:histogram="tableData" />
+			</el-col>
+		</el-row>
+	</div>
+</template>
+
+<script>
+import basicPage from '../mixins/basic-page';
+import barChart from '../chart/BarChart.vue';
+import { getHistogram } from '@/api/asrs/warehouseStorehouseStorage';
+import { getGoodSpecificationPage } from '@/api/asrs/goodSpecification';
+
+export default {
+	mixins: [basicPage],
+	data() {
+		return {
+			urlOptions: {
+				getDataListURL: getHistogram,
+			},
+			listQuery: {
+				warehouseId: '',
+				goodName: '',
+				startTime: '',
+				endTime: '',
+			},
+			formConfig: [
+				{
+					type: 'select',
+					label: '产品',
+					selectOptions: [],
+					labelField: 'goodSpecificationName',
+					valueField: 'goodSpecificationName',
+					param: 'name',
+					filterable: true,
+				},
+				{
+					type: 'datePicker',
+					label: '时间',
+					dateType: 'daterange',
+					format: 'yyyy-MM-dd',
+					valueFormat: 'yyyy-MM-dd',
+					rangeSeparator: '-',
+					startPlaceholder: '开始时间',
+					endPlaceholder: '结束时间',
+					param: 'searchTime',
+				},
+				{
+					type: 'button',
+					btnName: '搜索',
+					name: 'search',
+					color: 'primary',
+				},
+			],
+		};
+	},
+	components: {
+		barChart,
+	},
+	created() {
+		this.listQuery.warehouseId = this.bId;
+		this.getArr();
+	},
+	methods: {
+		// 获取数据列表
+		getDataList() {
+			if (this.listQuery.goodName) {
+				this.urlOptions.getDataListURL(this.listQuery).then((response) => {
+					this.tableData = response.data;
+					this.$nextTick(() => {
+						this.$refs.barChart.initChart();
+					});
+				});
+			}
+		},
+		getArr() {
+			const params = { pageSize: 100, pageNo: 1, total: 1 };
+			getGoodSpecificationPage(params).then((response) => {
+				this.formConfig[0].selectOptions = response.data.list;
+			});
+		},
+		buttonClick(val) {
+			switch (val.btnName) {
+				case 'search':
+					if (val.name) {
+						this.listQuery.goodName = val.name;
+						if (val.searchTime) {
+							this.listQuery.startTime = val.searchTime
+								? val.searchTime[0]
+								: '';
+							this.listQuery.endTime = val.searchTime ? val.searchTime[1] : '';
+							this.getDataList();
+						} else {
+							this.$modal.msgWarning('请选择时间');
+						}
+					} else {
+						this.$modal.msgWarning('请选择产品');
+					}
+					break;
+				case 'reset':
+					this.$refs.searchBarForm.resetForm();
+					this.listQuery = {
+						warehouseId: this.bId,
+						goodName: '',
+						startTime: '',
+						endTime: '',
+					};
+					this.getDataList();
+					break;
+				default:
+					console.log(val);
+			}
+		},
+	},
+};
+</script>

src/views/asrs/Piechart/index.vue

@@ -0,0 +1,112 @@
+<!--
+ * @Author: zwq
+ * @Date: 2023-08-22 15:01:54
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-09-05 14:52:33
+ * @Description:
+-->
+<template>
+	<div class="app-container">
+		<search-bar
+			:formConfigs="formConfig"
+			ref="searchBarForm"
+			@headBtnClick="buttonClick" />
+		<el-row :gutter="20">
+			<el-col :span="23">
+				<pieChart
+          title="饼状图分析"
+					ref="pieChart"
+					height="500px"
+          :total-number="tableData.totalNumber"
+					:pie-data="tableData.list" />
+			</el-col>
+		</el-row>
+	</div>
+</template>
+
+<script>
+import basicPage from '../mixins/basic-page';
+import pieChart from '../chart/PieChart.vue';
+import { getPieChart } from '@/api/asrs/warehouseStorehouseStorage';
+
+export default {
+	mixins: [basicPage],
+	data() {
+		return {
+			urlOptions: {
+				getDataListURL: getPieChart,
+			},
+			listQuery: {
+				warehouseId: '',
+				startTime: '',
+				endTime: '',
+			},
+			formConfig: [
+				{
+					type: 'datePicker',
+					label: '时间',
+					dateType: 'daterange',
+					format: 'yyyy-MM-dd',
+					valueFormat: 'yyyy-MM-dd',
+					rangeSeparator: '-',
+					startPlaceholder: '开始时间',
+					endPlaceholder: '结束时间',
+					param: 'searchTime',
+				},
+				{
+					type: 'button',
+					btnName: '搜索',
+					name: 'search',
+					color: 'primary',
+				},
+			],
+		};
+	},
+	components: {
+		pieChart,
+	},
+	created() {
+	},
+	methods: {
+		// 获取数据列表
+		getDataList() {
+			if (this.listQuery.startTime) {
+				this.urlOptions.getDataListURL(this.listQuery).then((response) => {
+					this.tableData = response.data;
+					this.$nextTick(() => {
+						this.$refs.pieChart.initChart();
+					});
+				});
+			}
+		},
+		buttonClick(val) {
+			switch (val.btnName) {
+				case 'search':
+					if (val.searchTime) {
+						this.listQuery.startTime = val.searchTime ? val.searchTime[0] : '';
+						this.listQuery.endTime = val.searchTime ? val.searchTime[1] : '';
+						this.getDataList();
+					} else {
+						this.$modal.msgWarning('请选择时间');
+					}
+					break;
+				case 'reset':
+					this.$refs.searchBarForm.resetForm();
+					this.listQuery = {};
+					this.getDataList();
+					break;
+				case 'add':
+					this.addOrEditTitle = '新增';
+					this.addOrUpdateVisible = true;
+					this.addOrUpdateHandle();
+					break;
+				case 'export':
+					this.handleExport();
+					break;
+				default:
+					console.log(val);
+			}
+		},
+	},
+};
+</script>

src/views/asrs/Piechart/indexb.vue

@@ -0,0 +1,113 @@
+<!--
+ * @Author: zwq
+ * @Date: 2023-08-22 15:01:54
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-09-06 14:44:21
+ * @Description:
+-->
+<template>
+	<div class="app-container">
+		<search-bar
+			:formConfigs="formConfig"
+			ref="searchBarForm"
+			@headBtnClick="buttonClick" />
+		<el-row :gutter="20">
+			<el-col :span="23">
+				<pieChart
+          title="饼状图分析"
+					ref="pieChart"
+					height="500px"
+          :total-number="tableData.totalNumber"
+					:pie-data="tableData.list" />
+			</el-col>
+		</el-row>
+	</div>
+</template>
+
+<script>
+import basicPage from '../mixins/basic-page';
+import pieChart from '../chart/PieChart.vue';
+import { getPieChart } from '@/api/asrs/warehouseStorehouseStorage';
+
+export default {
+	mixins: [basicPage],
+	data() {
+		return {
+			urlOptions: {
+				getDataListURL: getPieChart,
+			},
+			listQuery: {
+				warehouseId: '',
+				startTime: '',
+				endTime: '',
+			},
+			formConfig: [
+				{
+					type: 'datePicker',
+					label: '时间',
+					dateType: 'daterange',
+					format: 'yyyy-MM-dd',
+					valueFormat: 'yyyy-MM-dd',
+					rangeSeparator: '-',
+					startPlaceholder: '开始时间',
+					endPlaceholder: '结束时间',
+					param: 'searchTime',
+				},
+				{
+					type: 'button',
+					btnName: '搜索',
+					name: 'search',
+					color: 'primary',
+				},
+			],
+		};
+	},
+	components: {
+		pieChart,
+	},
+	created() {
+		this.listQuery.warehouseId = this.bId;
+	},
+	methods: {
+		// 获取数据列表
+		getDataList() {
+			if (this.listQuery.startTime) {
+				this.urlOptions.getDataListURL(this.listQuery).then((response) => {
+					this.tableData = response.data;
+					this.$nextTick(() => {
+						this.$refs.pieChart.initChart();
+					});
+				});
+			}
+		},
+		buttonClick(val) {
+			switch (val.btnName) {
+				case 'search':
+					if (val.searchTime) {
+						this.listQuery.startTime = val.searchTime ? val.searchTime[0] : '';
+						this.listQuery.endTime = val.searchTime ? val.searchTime[1] : '';
+						this.getDataList();
+					} else {
+						this.$modal.msgWarning('请选择时间');
+					}
+					break;
+				case 'reset':
+					this.$refs.searchBarForm.resetForm();
+					this.listQuery = {};
+					this.getDataList();
+					break;
+				case 'add':
+					this.addOrEditTitle = '新增';
+					this.addOrUpdateVisible = true;
+					this.addOrUpdateHandle();
+					break;
+				case 'export':
+					this.handleExport();
+					break;
+				default:
+					console.log(val);
+			}
+		},
+	},
+};
+</script>

src/views/asrs/agvLog/index.vue

@@ -0,0 +1,124 @@
+<template>
+	<div class="app-container">
+		<search-bar
+			:formConfigs="formConfig"
+			ref="searchBarForm"
+			@headBtnClick="buttonClick" />
+		<base-table
+			v-loading="dataListLoading"
+			:table-props="tableProps"
+			:page="listQuery.pageNo"
+			:limit="listQuery.pageSize"
+			:table-data="tableData">
+		</base-table>
+		<pagination
+			:limit.sync="listQuery.pageSize"
+			:page.sync="listQuery.pageNo"
+			:total="listQuery.total"
+			@pagination="getDataList" />
+	</div>
+</template>
+
+<script>
+import basicPage from '../mixins/basic-page';
+import { parseTime } from '../mixins/code-filter';
+import { getAgvLogPage } from '@/api/oth/agvLog';
+
+const tableProps = [
+	{
+		prop: 'reqInterface',
+		label: '请求接口',
+		align: 'center',
+	},
+	{
+		prop: 'reqParameter',
+		label: '请求参数',
+		align: 'center',
+	},
+	{
+		prop: 'createDate',
+		label: '时间',
+		align: 'center',
+		filter: parseTime,
+	},
+];
+export default {
+	mixins: [basicPage],
+	data() {
+		return {
+			urlOptions: {
+				getDataListURL: getAgvLogPage,
+			},
+			tableProps,
+			tableData: [],
+			formConfig: [
+				{
+					type: 'input',
+					label: '请求接口',
+					placeholder: '请求接口',
+					param: 'code',
+				},
+				{
+					type: 'input',
+					label: '请求参数',
+					placeholder: '请求参数',
+					param: 'name',
+				},
+				{
+					type: 'datePicker',
+					label: '订单出货日期',
+					dateType: 'daterange',
+					format: 'yyyy-MM-dd',
+					valueFormat: 'yyyy-MM-dd',
+					rangeSeparator: '-',
+					startPlaceholder: '开始时间',
+					endPlaceholder: '结束时间',
+					param: 'searchTime',
+				},
+				{
+					type: 'button',
+					btnName: '搜索',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: 'button',
+					btnName: '重置',
+					name: 'reset',
+				},
+			],
+		};
+	},
+	components: {},
+	created() {},
+	methods: {
+		buttonClick(val) {
+			switch (val.btnName) {
+				case 'search':
+					this.listQuery.pageNo = 1;
+					this.listQuery.pageSize = 10;
+					this.listQuery.reqInterface = val.code;
+					this.listQuery.reqParameter = val.name;
+					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : '';
+					this.listQuery.endTime = val.searchTime ? val.searchTime[1] : '';
+					this.getDataList();
+					break;
+				case 'reset':
+					this.$refs.searchBarForm.resetForm();
+					this.listQuery = {
+						pageSize: 10,
+						pageNo: 1,
+						total: 1,
+					};
+					this.getDataList();
+					break;
+				default:
+					console.log(val);
+			}
+		},
+	},
+};
+</script>

src/views/asrs/chart/BarChart.vue

@@ -0,0 +1,137 @@
+<template>
+	<div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import * as echarts from 'echarts';
+require('echarts/theme/macarons'); // echarts theme
+import resize from '../mixins/resize';
+
+const animationDuration = 1000;
+
+export default {
+	mixins: [resize],
+	props: {
+		className: {
+			type: String,
+			default: 'chart',
+		},
+		title: {
+			type: String,
+			default: 'chart',
+		},
+		width: {
+			type: String,
+			default: '100%',
+		},
+		height: {
+			type: String,
+			default: '300px',
+		},
+		allData: {
+			type: Object,
+			default: () => ({}),
+		},
+		histogram: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	data() {
+		return {
+			chart: null,
+		};
+	},
+	beforeDestroy() {
+		if (!this.chart) {
+			return;
+		}
+		this.chart.dispose();
+		this.chart = null;
+	},
+	methods: {
+		initChart() {
+			var nameArr = [];
+			var valueArr = [];
+			if (this.histogram.length > 0) {
+				this.histogram.forEach((item) => {
+					nameArr.push(item.time);
+					valueArr.push(item.number);
+				});
+			} else {
+				for (let i in this.allData) {
+					nameArr.push(i);
+					valueArr.push(this.allData[i]);
+				}
+			}
+			this.chart = echarts.init(this.$el, 'macarons');
+
+			this.chart.setOption({
+				title: {
+					text: '{space|}{tip|}{space|}{value|' + this.title + '}',
+					left: '0%',
+					top: '0%',
+					textStyle: {
+						rich: {
+							tip: {
+								width: 4,
+								height: 16,
+								backgroundColor: '#1FC495',
+								marginRight: 6,
+							},
+							space: {
+								width: 8,
+							},
+							value: {
+								fontSize: 16,
+								fontWeight: 'bold',
+							},
+						},
+					},
+				},
+				tooltip: {
+					trigger: 'axis',
+					axisPointer: {
+						// 坐标轴指示器，坐标轴触发有效
+						type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
+					},
+				},
+				grid: {
+					top: 40,
+					left: '2%',
+					right: '2%',
+					bottom: '3%',
+					containLabel: true,
+				},
+				xAxis: [
+					{
+						type: 'category',
+						data: nameArr,
+						axisTick: {
+							alignWithLabel: true,
+						},
+					},
+				],
+				yAxis: [
+					{
+						type: 'value',
+						axisTick: {
+							show: false,
+						},
+					},
+				],
+				series: [
+					{
+						name: 'pageA',
+						type: 'bar',
+						stack: 'vistors',
+						barWidth: '60%',
+						data: valueArr,
+						animationDuration,
+					},
+				],
+			});
+		},
+	},
+};
+</script>

src/views/asrs/chart/GaugeChart.vue

@@ -0,0 +1,185 @@
+<!--
+ * @Author: zwq
+ * @Date: 2023-06-01 10:47:42
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-08-31 16:23:08
+ * @Description:
+-->
+<template>
+	<div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import * as echarts from 'echarts';
+require('echarts/theme/macarons'); // echarts theme
+import resize from '../mixins/resize';
+
+export default {
+	mixins: [resize],
+	props: {
+		className: {
+			type: String,
+			default: 'chart',
+		},
+		title: {
+			type: String,
+			default: 'chart',
+		},
+		width: {
+			type: String,
+			default: '100%',
+		},
+		height: {
+			type: String,
+			default: '300px',
+		},
+		occupancyData: {
+			type: Number,
+			default: 0,
+		},
+	},
+	name: 'echarts',
+	data() {
+		return {
+			echart: '',
+		};
+	},
+	beforeDestroy() {
+		if (!this.chart) {
+			return;
+		}
+		this.chart.dispose();
+		this.chart = null;
+	},
+	methods: {
+		initChart() {
+			this.chart = echarts.init(this.$el, 'macarons');
+
+			this.chart.setOption({
+				title: {
+					text: '{space|}{tip|}{space|}{value|' + this.title + '}',
+					left: '0%',
+					top: '2%',
+					textStyle: {
+						rich: {
+							tip: {
+								width: 4,
+								height: 16,
+								backgroundColor: '#1FC495',
+								marginRight: 6,
+							},
+							space: {
+								width: 8,
+							},
+							value: {
+								fontSize: 16,
+								fontWeight: 'bold',
+							},
+						},
+					},
+				},
+				series: [
+					{
+						type: 'gauge',
+						startAngle: 180,
+						endAngle: 0,
+						min: 0,
+						max: 100,
+						splitNumber: 5,
+						itemStyle: {
+							color: '#47E282',
+							shadowColor: 'rgba(0,138,255,0.45)',
+							shadowBlur: 10,
+							shadowOffsetX: 2,
+							shadowOffsetY: 2,
+						},
+						pointer: {
+							itemStyle: {
+								color: 'auto',
+							},
+						},
+						axisLine: {
+							roundCap: true,
+							lineStyle: {
+								width: 16,
+							},
+						},
+						axisTick: {
+							distance: 5,
+							splitNumber: 2,
+							lineStyle: {
+								width: 2,
+								color: '#999',
+							},
+						},
+						splitLine: {
+							distance: 6,
+							length: 14,
+							lineStyle: {
+								width: 4,
+								color: '#999',
+							},
+						},
+						axisLabel: {
+							distance: -55,
+							color: '#999',
+							fontSize: 15,
+						},
+						title: {
+							show: false,
+						},
+						detail: {
+							backgroundColor: '#fff',
+							width: '80%',
+							lineHeight: 15,
+							height: 15,
+							offsetCenter: [0, '20%'],
+							valueAnimation: true,
+							formatter: function (value) {
+								return '{side| }{value|' + value + '}{unit|%}{side1| }';
+							},
+							rich: {
+								value: {
+									fontSize: 18,
+									color: '#1FC495',
+									padding: [0, 0, 0, 16],
+								},
+								side: {
+									width: 35,
+									height: 5,
+									backgroundColor: '#fff',
+									opacity: 0.5,
+									shadowColor: '#43E084',
+									shadowOffsetX: 10,
+								},
+								side1: {
+									width: 35,
+									height: 5,
+									backgroundColor: '#fff',
+									opacity: 0.5,
+									shadowColor: '#43E084',
+									shadowOffsetX: -10,
+								},
+								unit: {
+									fontSize: 12,
+									color: '#999',
+									padding: [0, 16, 0, 0],
+								},
+							},
+						},
+						data: [
+							{
+								value: this.occupancyData * 100,
+							},
+						],
+						radius: '90%',
+						center: ['50%', '70%'],
+					},
+				],
+			});
+		},
+	},
+};
+</script>
+
+<style scoped></style>

src/views/asrs/chart/PieChart.vue

@@ -0,0 +1,165 @@
+<template>
+	<div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import * as echarts from 'echarts';
+require('echarts/theme/macarons'); // echarts theme
+import resize from '../mixins/resize';
+
+const animationDuration = 1000;
+
+export default {
+	mixins: [resize],
+	props: {
+		className: {
+			type: String,
+			default: 'chart',
+		},
+		title: {
+			type: String,
+			default: 'chart',
+		},
+		width: {
+			type: String,
+			default: '100%',
+		},
+		height: {
+			type: String,
+			default: '300px',
+		},
+		pieData: {
+			type: Array,
+			default: () => [],
+		},
+		totalNumber: {
+			type: Number,
+			default: 0,
+		},
+	},
+	data() {
+		return {
+			chart: null,
+		};
+	},
+	beforeDestroy() {
+		if (!this.chart) {
+			return;
+		}
+		this.chart.dispose();
+		this.chart = null;
+	},
+	methods: {
+		initChart() {
+			this.chart = echarts.init(this.$el, 'macarons');
+			this.pieData.forEach((i) => {
+				i.value = i.number;
+			});
+			this.chart.setOption({
+				title: {
+					zlevel: 2, // 控制圆环图中间的字的层级
+					text: '总数',
+					subtext: this.totalNumber,
+					top: '38%', // 控制位置
+					left: '50%', // 控制位置
+					textAlign: 'center', // 让文字居中
+					textStyle: {
+						color: 'rgba(203, 195, 195, 1)',
+					},
+					subtextStyle: {
+						fontSize: 20,
+					},
+				},
+				tooltip: {
+					trigger: 'item',
+					show: true, // 控制鼠标悬浮是否显示数据
+				},
+				legend: {
+					orient: 'vartical',
+					top: 'center',
+					left: 'right',
+					icon: 'circle',
+					itemGap: 16, //图例每项之间的间隔
+					textStyle: {
+						// 文字的样式
+						fontSize: 24, // 可控制每个legend项的间距
+						color: '#828282',
+						rich: {
+							oneone: {
+								width: 50,
+								color: '#000000',
+								fontSize: 12,
+								fontWeight: 'bolder',
+							},
+							twotwo: {
+								width: 35,
+								color: '#333',
+								fontSize: 12,
+							},
+							threethree: {
+								width: 20,
+								color: '#959595',
+								fontSize: 12,
+							},
+						},
+					},
+					formatter: (name) => {
+						var target = this.pieData.find((item) => {
+							return item.name === name;
+						}).number;
+						var v = ((target / this.totalNumber) * 100).toFixed(2);
+						return `{oneone|${name}}  {twotwo|${target}个}   {threethree|${v}%}`;
+					},
+				},
+				grid: {
+					top: 40,
+					left: '2%',
+					right: '2%',
+					bottom: '3%',
+					containLabel: true,
+				},
+				series: [
+					{
+						name: 'pie',
+						type: 'pie',
+						radius: ['55%', '80%'],
+						avoidLabelOverlap: true, // 防止牵引线堆叠挤在一块
+						itemStyle: {
+							borderRadius: 10,
+							borderColor: '#fff',
+							borderWidth: 2,
+						},
+						label: {
+							normal: {
+								show: true,
+								position: 'outside', // 另有参数inside，可以让数据在圆环上
+								formatter: '{d}%', //模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
+								textStyle: {
+									// 牵引线上的文字的样式
+									align: 'right',
+									baseline: 'middle',
+									fontFamily: '微软雅黑',
+									fontSize: 12,
+									fontWeight: 'bolder',
+									color: '#333',
+								},
+							},
+						},
+						emphasis: {
+							label: {
+								show: true,
+								fontSize: 40,
+								fontWeight: 'bold',
+							},
+						},
+						labelLine: {
+							show: false,
+						},
+						data: this.pieData,
+					},
+				],
+			});
+		},
+	},
+};
+</script>

src/views/asrs/goodSpecification/add-or-updata.vue

@@ -0,0 +1,84 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-11-18 14:16:25
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-08-31 16:35:40
+ * @Description:
+-->
+<template>
+	<el-form
+		:model="dataForm"
+		:rules="dataRule"
+		ref="dataForm"
+		@keyup.enter.native="dataFormSubmit()"
+		label-width="120px">
+		<el-form-item label="产品编码" prop="goodSpecificationCode">
+			<el-input
+				v-model="dataForm.goodSpecificationCode"
+				clearable
+				placeholder="请输入产品编码" />
+		</el-form-item>
+		<el-form-item label="产品名称" prop="goodSpecificationName">
+			<el-input
+				v-model="dataForm.goodSpecificationName"
+				clearable
+				placeholder="请输入产品名称" />
+		</el-form-item>
+		<el-form-item label="需要熟化时间" prop="cureTime">
+			<el-input-number
+				v-model="dataForm.cureTime"
+				controls-position="right"
+				:min="0"></el-input-number>
+		</el-form-item>
+		<el-form-item label="是否需要熟化" prop="cure">
+			<el-switch
+				v-model="dataForm.cure"
+				:active-value="1"
+				:inactive-value="0"></el-switch>
+		</el-form-item>
+		<el-form-item label="是否启用" prop="deactivate">
+			<el-switch
+				v-model="dataForm.deactivate"
+				:active-value="1"
+				:inactive-value="0"></el-switch>
+		</el-form-item>
+	</el-form>
+</template>
+
+<script>
+import basicAdd from '../mixins/basic-add';
+import { createGoodSpecification, updateGoodSpecification, getGoodSpecification, getCode } from "@/api/asrs/goodSpecification";
+
+export default {
+	mixins: [basicAdd],
+	data() {
+		return {
+			urlOptions: {
+			  isGetCode: true,
+        codeURL: getCode,
+        codeName: 'goodSpecificationCode',
+				createURL: createGoodSpecification,
+				updateURL: updateGoodSpecification,
+				infoURL: getGoodSpecification,
+			},
+			dataForm: {
+				id: undefined,
+				goodSpecificationCode: undefined,
+				goodSpecificationName: undefined,
+				cureTime: undefined,
+				cure: undefined,
+				deactivate: undefined,
+			},
+			dataRule: {
+				goodSpecificationCode: [
+					{ required: true, message: '产品编码不能为空', trigger: 'blur' },
+				],
+				goodSpecificationName: [
+					{ required: true, message: '产品名称不能为空', trigger: 'blur' },
+				],
+			},
+		};
+	},
+	methods: {},
+};
+</script>

src/views/asrs/goodSpecification/index.vue

@@ -0,0 +1,178 @@
+<template>
+	<div class="app-container">
+		<search-bar
+			:formConfigs="formConfig"
+			ref="searchBarForm"
+			@headBtnClick="buttonClick" />
+		<base-table
+			v-loading="dataListLoading"
+			:table-props="tableProps"
+			:page="listQuery.pageNo"
+			:limit="listQuery.pageSize"
+			:table-data="tableData">
+			<method-btn
+				v-if="tableBtn.length"
+				slot="handleBtn"
+				:width="120"
+				label="操作"
+				:method-list="tableBtn"
+				@clickBtn="handleClick" />
+		</base-table>
+		<pagination
+			:limit.sync="listQuery.pageSize"
+			:page.sync="listQuery.pageNo"
+			:total="listQuery.total"
+			@pagination="getDataList" />
+		<base-dialog
+			:dialogTitle="addOrEditTitle"
+			:dialogVisible="addOrUpdateVisible"
+			@cancel="handleCancel"
+			@confirm="handleConfirm"
+			:before-close="handleCancel"
+			width="70%">
+			<add-or-update
+				ref="addOrUpdate"
+				@refreshDataList="successSubmit"></add-or-update>
+		</base-dialog>
+	</div>
+</template>
+
+<script>
+import AddOrUpdate from './add-or-updata';
+import basicPage from '../mixins/basic-page';
+import codeFilter from '../mixins/code-filter';
+import { deleteGoodSpecification, getGoodSpecificationPage } from "@/api/asrs/goodSpecification";
+
+const tableProps = [
+	{
+		prop: 'goodSpecificationCode',
+		label: '产品编码',
+		align: 'center',
+	},
+	{
+		prop: 'goodSpecificationName',
+		label: '产品名称',
+		align: 'center',
+	},
+	{
+		prop: 'cure',
+		label: '是否需要熟化',
+		align: 'center',
+		filter: codeFilter('cure'),
+	},
+	{
+		prop: 'cureTime',
+		label: '需要熟化时间（小时）',
+		align: 'center',
+	},
+	{
+		prop: 'deactivate',
+		label: '是否启用',
+		align: 'center',
+		filter: codeFilter('deactivate'),
+	},
+];
+
+export default {
+	mixins: [basicPage],
+	data() {
+		return {
+			urlOptions: {
+				getDataListURL: getGoodSpecificationPage,
+				deleteURL: deleteGoodSpecification,
+			},
+			tableProps,
+			tableBtn: [
+				this.$auth.hasPermi(`asrs:good-specification:update`)
+					? {
+							type: 'edit',
+							btnName: '编辑',
+					  }
+					: undefined,
+          this.$auth.hasPermi(`asrs:good-specification:delete`)
+					? {
+							type: 'delete',
+							btnName: '删除',
+					  }
+					: undefined,
+			].filter((v)=>v),
+			tableData: [],
+			formConfig: [
+				{
+					type: 'input',
+					label: '产品编码',
+					placeholder: '产品编码',
+					param: 'code',
+				},
+				{
+					type: 'input',
+					label: '产品名称',
+					placeholder: '产品名称',
+					param: 'name',
+				},
+				{
+					type: 'button',
+					btnName: '搜索',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: this.$auth.hasPermi('asrs:good-specification:create') ? 'button' : '',
+					btnName: '新增',
+					name: 'add',
+					color: 'success',
+					plain: true,
+				},
+				// {
+				// 	type: this.$auth.hasPermi('base:factory:create') ? 'separate' : '',
+				// },
+				// {
+				// 	type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
+				// 	btnName: '导出',
+				// 	name: 'export',
+				// 	color: 'warning',
+				// },
+			],
+		};
+	},
+	components: {
+		AddOrUpdate,
+	},
+	created() {},
+	methods: {
+		buttonClick(val) {
+			switch (val.btnName) {
+				case 'search':
+					this.listQuery.pageNo = 1;
+					this.listQuery.pageSize = 10;
+					this.listQuery.goodSpecificationName = val.name;
+					this.listQuery.goodSpecificationCode = val.code;
+					this.getDataList();
+					break;
+				case 'reset':
+					this.$refs.searchBarForm.resetForm();
+					this.listQuery = {
+						pageSize: 10,
+						pageNo: 1,
+						total: 1,
+					};
+					this.getDataList();
+					break;
+				case 'add':
+					this.addOrEditTitle = '新增';
+					this.addOrUpdateVisible = true;
+					this.addOrUpdateHandle();
+					break;
+				case 'export':
+					this.handleExport();
+					break;
+				default:
+					console.log(val);
+			}
+		},
+	},
+};
+</script>

src/views/asrs/goodSpecification/indexb.vue

@@ -0,0 +1,181 @@
+<template>
+	<div class="app-container">
+		<search-bar
+			:formConfigs="formConfig"
+			ref="searchBarForm"
+			@headBtnClick="buttonClick" />
+		<base-table
+			v-loading="dataListLoading"
+			:table-props="tableProps"
+			:page="listQuery.pageNo"
+			:limit="listQuery.pageSize"
+			:table-data="tableData">
+			<method-btn
+				v-if="tableBtn.length"
+				slot="handleBtn"
+				:width="120"
+				label="操作"
+				:method-list="tableBtn"
+				@clickBtn="handleClick" />
+		</base-table>
+		<pagination
+			:limit.sync="listQuery.pageSize"
+			:page.sync="listQuery.pageNo"
+			:total="listQuery.total"
+			@pagination="getDataList" />
+		<base-dialog
+			:dialogTitle="addOrEditTitle"
+			:dialogVisible="addOrUpdateVisible"
+			@cancel="handleCancel"
+			@confirm="handleConfirm"
+			:before-close="handleCancel"
+			width="70%">
+			<add-or-update
+				ref="addOrUpdate"
+				@refreshDataList="successSubmit"></add-or-update>
+		</base-dialog>
+	</div>
+</template>
+
+<script>
+import AddOrUpdate from './add-or-updata';
+import basicPage from '../mixins/basic-page';
+import codeFilter from '../mixins/code-filter';
+import { deleteGoodSpecification, getGoodSpecificationPage } from "@/api/asrs/goodSpecification";
+
+const tableProps = [
+	{
+		prop: 'goodSpecificationCode',
+		label: '产品编码',
+		align: 'center',
+	},
+	{
+		prop: 'goodSpecificationName',
+		label: '产品名称',
+		align: 'center',
+	},
+	{
+		prop: 'cure',
+		label: '是否需要熟化',
+		align: 'center',
+		filter: codeFilter('cure'),
+	},
+	{
+		prop: 'cureTime',
+		label: '需要熟化时间（小时）',
+		align: 'center',
+	},
+	{
+		prop: 'deactivate',
+		label: '是否启用',
+		align: 'center',
+		filter: codeFilter('deactivate'),
+	},
+];
+
+export default {
+	mixins: [basicPage],
+	data() {
+		return {
+			urlOptions: {
+				getDataListURL: getGoodSpecificationPage,
+				deleteURL: deleteGoodSpecification,
+			},
+			tableProps,
+      bPage: true,
+			tableBtn: [
+				this.$auth.hasPermi(`asrs:good-specification:update`)
+					? {
+							type: 'edit',
+							btnName: '编辑',
+					  }
+					: undefined,
+          this.$auth.hasPermi(`asrs:good-specification:delete`)
+					? {
+							type: 'delete',
+							btnName: '删除',
+					  }
+					: undefined,
+			].filter((v)=>v),
+			tableData: [],
+			formConfig: [
+				{
+					type: 'input',
+					label: '产品编码',
+					placeholder: '产品编码',
+					param: 'code',
+				},
+				{
+					type: 'input',
+					label: '产品名称',
+					placeholder: '产品名称',
+					param: 'name',
+				},
+				{
+					type: 'button',
+					btnName: '搜索',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: this.$auth.hasPermi('asrs:good-specification:create') ? 'button' : '',
+					btnName: '新增',
+					name: 'add',
+					color: 'success',
+					plain: true,
+				},
+				// {
+				// 	type: this.$auth.hasPermi('base:factory:create') ? 'separate' : '',
+				// },
+				// {
+				// 	type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
+				// 	btnName: '导出',
+				// 	name: 'export',
+				// 	color: 'warning',
+				// },
+			],
+		};
+	},
+	components: {
+		AddOrUpdate,
+	},
+	created() {
+		this.listQuery.warehouseId = this.bId;
+  },
+	methods: {
+		buttonClick(val) {
+			switch (val.btnName) {
+				case 'search':
+					this.listQuery.pageNo = 1;
+					this.listQuery.pageSize = 10;
+					this.listQuery.goodSpecificationName = val.name;
+					this.listQuery.goodSpecificationCode = val.code;
+					this.getDataList();
+					break;
+				case 'reset':
+					this.$refs.searchBarForm.resetForm();
+					this.listQuery = {
+						pageSize: 10,
+						pageNo: 1,
+						total: 1,
+					};
+					this.getDataList();
+					break;
+				case 'add':
+					this.addOrEditTitle = '新增';
+					this.addOrUpdateVisible = true;
+					this.addOrUpdateHandle();
+					break;
+				case 'export':
+					this.handleExport();
+					break;
+				default:
+					console.log(val);
+			}
+		},
+	},
+};
+</script>

src/views/asrs/heavenlyEyeLog/index.vue

@@ -0,0 +1,159 @@
+<template>
+	<div class="app-container">
+		<search-bar
+			:formConfigs="formConfig"
+			ref="searchBarForm"
+			@headBtnClick="buttonClick" />
+		<base-table
+			v-loading="dataListLoading"
+			:table-props="tableProps"
+			:page="listQuery.pageNo"
+			:limit="listQuery.pageSize"
+			:table-data="tableData">
+		</base-table>
+		<pagination
+			:limit.sync="listQuery.pageSize"
+			:page.sync="listQuery.pageNo"
+			:total="listQuery.total"
+			@pagination="getDataList" />
+	</div>
+</template>
+
+<script>
+import basicPage from '../mixins/basic-page';
+import { parseTime } from '../mixins/code-filter';
+import { getHeavenlyEyeLogPage } from '@/api/oth/heavenlyEyeLog';
+
+const tableProps = [
+	{
+		prop: 'reqInterface',
+		label: '请求接口',
+		align: 'center',
+	},
+	{
+		prop: 'reqParameter',
+		label: '请求参数',
+		align: 'center',
+	},
+	{
+		prop: 'errorCode',
+		label: '返回编码',
+		align: 'center',
+	},
+	{
+		prop: 'cmd',
+		label: '返回请求接口',
+		align: 'center',
+	},
+	{
+		prop: 'msgId',
+		label: '返回msgId',
+		align: 'center',
+	},
+	{
+		prop: 'retStatus',
+		label: '返回状态',
+		align: 'center',
+	},
+	{
+		prop: 'fastName',
+		label: '返回指定区域',
+		align: 'center',
+	},
+	{
+		prop: 'areaName',
+		label: '返回复合区域',
+		align: 'center',
+	},
+	{
+		prop: 'list',
+		label: '返回集合',
+		align: 'center',
+	},
+	{
+		prop: 'createDate',
+		label: '时间',
+		align: 'center',
+		filter: parseTime,
+	},
+];
+export default {
+	mixins: [basicPage],
+	data() {
+		return {
+			urlOptions: {
+				getDataListURL: getHeavenlyEyeLogPage,
+			},
+			tableProps,
+			tableData: [],
+			formConfig: [
+				{
+					type: 'input',
+					label: '请求接口',
+					placeholder: '请求接口',
+					param: 'code',
+				},
+				{
+					type: 'input',
+					label: '请求参数',
+					placeholder: '请求参数',
+					param: 'name',
+				},
+				{
+					type: 'datePicker',
+					label: '订单出货日期',
+					dateType: 'daterange',
+					format: 'yyyy-MM-dd',
+					valueFormat: 'yyyy-MM-dd',
+					rangeSeparator: '-',
+					startPlaceholder: '开始时间',
+					endPlaceholder: '结束时间',
+					param: 'searchTime',
+				},
+				{
+					type: 'button',
+					btnName: '搜索',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: 'button',
+					btnName: '重置',
+					name: 'reset',
+				},
+			],
+		};
+	},
+	components: {},
+	created() {},
+	methods: {
+		buttonClick(val) {
+			switch (val.btnName) {
+				case 'search':
+					this.listQuery.pageNo = 1;
+					this.listQuery.pageSize = 10;
+					this.listQuery.reqInterface = val.code;
+					this.listQuery.reqParameter = val.name;
+					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : '';
+					this.listQuery.endTime = val.searchTime ? val.searchTime[1] : '';
+					this.getDataList();
+					break;
+				case 'reset':
+					this.$refs.searchBarForm.resetForm();
+					this.listQuery = {
+						pageSize: 10,
+						pageNo: 1,
+						total: 1,
+					};
+					this.getDataList();
+					break;
+				default:
+					console.log(val);
+			}
+		},
+	},
+};
+</script>

src/views/asrs/inventoryOverview/index.vue

@@ -0,0 +1,71 @@
+<!--
+ * @Author: zwq
+ * @Date: 2023-08-22 15:01:54
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-09-05 13:50:38
+ * @Description:
+-->
+<template>
+	<div class="app-container">
+		<el-row :gutter="20">
+			<el-col :span="10">
+				<gaugeChart
+					ref="gaugeChart"
+					title="仓库占用率"
+					height="500px"
+					:occupancy-data="occupancyData" />
+			</el-col>
+			<el-col :span="14">
+				<barChart
+					ref="barChart"
+					height="500px"
+					title="库存总览"
+					:all-data="allData" />
+			</el-col>
+		</el-row>
+	</div>
+</template>
+
+<script>
+import basicPage from '../mixins/basic-page';
+import barChart from '../chart/BarChart.vue';
+import gaugeChart from '../chart/GaugeChart.vue';
+import { getOccupancy } from '@/api/asrs/warehouseStorehouse';
+import { inventoryOverview } from '@/api/asrs/warehouseStorehouseGoodsSpecification';
+
+export default {
+	mixins: [basicPage],
+	data() {
+		return {
+			urlOptions: {
+				occupancyURL: getOccupancy,
+				allURL: inventoryOverview,
+			},
+			occupancyData: 0,
+			allData: {},
+		};
+	},
+	components: {
+		barChart,
+		gaugeChart,
+	},
+	created() {},
+	methods: {
+		// 获取数据列表
+		getDataList() {
+			this.urlOptions.occupancyURL(this.aId).then((response) => {
+				this.occupancyData = response.data;
+				this.$nextTick(() => {
+					this.$refs.gaugeChart.initChart();
+				});
+			});
+			this.urlOptions.allURL(this.aId).then((response) => {
+				this.allData = response.data;
+				this.$nextTick(() => {
+					this.$refs.barChart.initChart();
+				});
+			});
+		},
+	},
+};
+</script>

src/views/asrs/inventoryOverview/indexb.vue

@@ -0,0 +1,73 @@
+<!--
+ * @Author: zwq
+ * @Date: 2023-08-22 15:01:54
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-09-05 14:51:54
+ * @Description:
+-->
+<template>
+	<div class="app-container">
+		<el-row :gutter="20">
+			<el-col :span="10">
+				<gaugeChart
+					ref="gaugeChart"
+					title="仓库占用率"
+					height="500px"
+					:occupancy-data="occupancyData" />
+			</el-col>
+			<el-col :span="14">
+				<barChart
+					ref="barChart"
+					height="500px"
+					title="库存总览"
+					:all-data="allData" />
+			</el-col>
+		</el-row>
+	</div>
+</template>
+
+<script>
+import basicPage from '../mixins/basic-page';
+import barChart from '../chart/BarChart.vue';
+import gaugeChart from '../chart/GaugeChart.vue';
+import { getOccupancy } from '@/api/asrs/warehouseStorehouse';
+import { inventoryOverview } from '@/api/asrs/warehouseStorehouseGoodsSpecification';
+
+export default {
+	mixins: [basicPage],
+	data() {
+		return {
+			urlOptions: {
+				occupancyURL: getOccupancy,
+				allURL: inventoryOverview,
+			},
+			occupancyData: 0,
+			allData: {},
+		};
+	},
+	components: {
+		barChart,
+		gaugeChart,
+	},
+	created() {
+		this.listQuery.warehouseId = this.bId;
+  },
+	methods: {
+		// 获取数据列表
+		getDataList() {
+			this.urlOptions.occupancyURL(this.bId).then((response) => {
+				this.occupancyData = response.data;
+				this.$nextTick(() => {
+					this.$refs.gaugeChart.initChart();
+				});
+			});
+			this.urlOptions.allURL(this.bId).then((response) => {
+				this.allData = response.data;
+				this.$nextTick(() => {
+					this.$refs.barChart.initChart();
+				});
+			});
+		},
+	},
+};
+</script>

src/views/asrs/jobMainTask/index.vue

@@ -0,0 +1,226 @@
+<template>
+	<div class="app-container">
+		<search-bar
+			:isFold="true"
+			:formConfigs="formConfig"
+			ref="searchBarForm"
+			@headBtnClick="buttonClick" />
+		<base-table
+			v-loading="dataListLoading"
+			:table-props="tableProps"
+			:page="listQuery.pageNo"
+			:limit="listQuery.pageSize"
+			:table-data="tableData">
+			<method-btn
+				v-if="tableBtn.length"
+				slot="handleBtn"
+				:width="120"
+				label="操作"
+				:method-list="tableBtn"
+				@clickBtn="handleClick" />
+		</base-table>
+		<pagination
+			:limit.sync="listQuery.pageSize"
+			:page.sync="listQuery.pageNo"
+			:total="listQuery.total"
+			@pagination="getDataList" />
+	</div>
+</template>
+
+<script>
+import basicPage from '../mixins/basic-page';
+import { parseTime } from '../mixins/code-filter';
+import codeFilter from '../mixins/code-filter';
+import { getMainTaskPage } from '@/api/oth/mainTask';
+
+const tableProps = [
+	{
+		prop: 'mainTaskCode',
+		label: '任务编码',
+		align: 'center',
+	},
+	{
+		prop: 'mainTaskType',
+		label: '任务类型',
+		align: 'center',
+		filter: codeFilter('mainTaskType'),
+	},
+	{
+		prop: 'stacker',
+		label: '堆垛机',
+		align: 'center',
+	},
+	{
+		prop: 'agv',
+		label: 'agv',
+		align: 'center',
+	},
+	{
+		prop: 'mainTaskState',
+		label: '状态',
+		align: 'center',
+		filter: codeFilter('mainTaskState'),
+	},
+	{
+		prop: 'taskSource',
+		label: '任务来源',
+		align: 'center',
+		filter: codeFilter('taskSource'),
+	},
+	{
+		prop: 'createTime',
+		label: '创建时间',
+		align: 'center',
+		filter: parseTime,
+	},
+];
+const mainTaskType = [
+	{
+		name: '一次分切',
+		id: 1,
+	},
+	{
+		name: '二次分切',
+		id: 2,
+	},
+	{
+		name: '一次分拣',
+		id: 3,
+	},
+	{
+		name: '二次分拣',
+		id: 4,
+	},
+];
+const mainTaskState = [
+	{
+		name: '开始',
+		id: 0,
+	},
+	{
+		name: '已发送agv',
+		id: 1,
+	},
+	{
+		name: 'agv运行中',
+		id: 2,
+	},
+	{
+		name: '已发送堆垛机',
+		id: 3,
+	},
+	{
+		name: '堆垛机运行中',
+		id: 4,
+	},
+	{
+		name: '完成',
+		id: 5,
+	},
+];
+export default {
+	mixins: [basicPage],
+	data() {
+		return {
+			urlOptions: {
+				getDataListURL: getMainTaskPage,
+			},
+			tableProps,
+			tableBtn: [
+				true
+					? {
+							type: 'cancle',
+							btnName: '取消',
+					  }
+					: undefined,
+			].filter((v) => v),
+			tableData: [],
+			formConfig: [
+				{
+					type: 'input',
+					label: '任务编码',
+					placeholder: '任务编码',
+					param: 'code',
+				},
+				{
+					type: 'select',
+					label: '任务类型',
+					selectOptions: mainTaskType,
+					param: 'taskType',
+					defaultSelect: '',
+					filterable: true,
+				},
+				{
+					type: 'select',
+					label: '状态',
+					selectOptions: mainTaskState,
+					param: 'status',
+					defaultSelect: '',
+					filterable: true,
+				},
+				{
+					type: 'input',
+					label: 'agv',
+					placeholder: 'agv',
+					param: 'agv',
+				},
+				{
+					type: 'datePicker',
+					label: '选择日期',
+					dateType: 'daterange',
+					format: 'yyyy-MM-dd',
+					valueFormat: 'yyyy-MM-dd',
+					rangeSeparator: '-',
+					startPlaceholder: '开始时间',
+					endPlaceholder: '结束时间',
+					param: 'searchTime',
+				},
+				{
+					type: 'button',
+					btnName: '搜索',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: 'button',
+					btnName: '重置',
+					name: 'reset',
+				},
+			],
+		};
+	},
+	components: {},
+	created() {},
+	methods: {
+		buttonClick(val) {
+			switch (val.btnName) {
+				case 'search':
+					this.listQuery.pageNo = 1;
+					this.listQuery.pageSize = 10;
+					this.listQuery.mainTaskCode = val.code;
+					this.listQuery.mainTaskType = val.taskType;
+					this.listQuery.mainTaskState = val.status;
+					this.listQuery.agv = val.agv;
+					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : '';
+					this.listQuery.endTime = val.searchTime ? val.searchTime[1] : '';
+					this.getDataList();
+					break;
+				case 'reset':
+					this.$refs.searchBarForm.resetForm();
+					this.listQuery = {
+						pageSize: 10,
+						pageNo: 1,
+						total: 1,
+					};
+					this.getDataList();
+					break;
+				default:
+					console.log(val);
+			}
+		},
+	},
+};
+</script>

src/views/asrs/jobMainTaskHistory/index.vue

@@ -0,0 +1,224 @@
+<template>
+	<div class="app-container">
+		<search-bar
+			:isFold="true"
+			:formConfigs="formConfig"
+			ref="searchBarForm"
+			@headBtnClick="buttonClick" />
+		<base-table
+			v-loading="dataListLoading"
+			:table-props="tableProps"
+			:page="listQuery.pageNo"
+			:limit="listQuery.pageSize"
+			:table-data="tableData">
+		</base-table>
+		<pagination
+			:limit.sync="listQuery.pageSize"
+			:page.sync="listQuery.pageNo"
+			:total="listQuery.total"
+			@pagination="getDataList" />
+	</div>
+</template>
+
+<script>
+import basicPage from '../mixins/basic-page';
+import { parseTime } from '../mixins/code-filter';
+import codeFilter from '../mixins/code-filter';
+import { getMainTaskHistoryPage } from '@/api/oth/mainTaskHistory';
+
+const tableProps = [
+	{
+		prop: 'mainTaskCode',
+		label: '任务编码',
+		align: 'center',
+	},
+	{
+		prop: 'mainTaskType',
+		label: '任务类型',
+		align: 'center',
+		filter: codeFilter('mainTaskType'),
+	},
+	{
+		prop: 'stacker',
+		label: '堆垛机',
+		align: 'center',
+	},
+	{
+		prop: 'agv',
+		label: 'agv',
+		align: 'center',
+	},
+	{
+		prop: 'mainTaskState',
+		label: '状态',
+		align: 'center',
+		filter: codeFilter('mainTaskState'),
+	},
+	{
+		prop: 'taskSource',
+		label: '任务来源',
+		align: 'center',
+		filter: codeFilter('taskSource'),
+	},
+	{
+		prop: 'createTime',
+		label: '创建时间',
+		align: 'center',
+		filter: parseTime,
+	},
+	{
+		prop: 'cancellation',
+		label: '是否取消',
+		align: 'center',
+		filter: codeFilter('cancellation'),
+	},
+];
+const mainTaskType = [
+	{
+		name: '一次分切',
+		id: 1,
+	},
+	{
+		name: '二次分切',
+		id: 2,
+	},
+	{
+		name: '一次分拣',
+		id: 3,
+	},
+	{
+		name: '二次分拣',
+		id: 4,
+	},
+];
+const mainTaskState = [
+	{
+		name: '开始',
+		id: 0,
+	},
+	{
+		name: '已发送agv',
+		id: 1,
+	},
+	{
+		name: 'agv运行中',
+		id: 2,
+	},
+	{
+		name: '已发送堆垛机',
+		id: 3,
+	},
+	{
+		name: '堆垛机运行中',
+		id: 4,
+	},
+	{
+		name: '完成',
+		id: 5,
+	},
+];
+export default {
+	mixins: [basicPage],
+	data() {
+		return {
+			urlOptions: {
+				getDataListURL: getMainTaskHistoryPage,
+			},
+			tableProps,
+			tableData: [],
+			formConfig: [
+				{
+					type: 'input',
+					label: '任务编码',
+					placeholder: '任务编码',
+					param: 'code',
+				},
+				{
+					type: 'select',
+					label: '任务类型',
+					selectOptions: mainTaskType,
+					param: 'taskType',
+					defaultSelect: '',
+					filterable: true,
+				},
+				{
+					type: 'select',
+					label: '状态',
+					selectOptions: mainTaskState,
+					param: 'status',
+					defaultSelect: '',
+					filterable: true,
+				},
+				{
+					type: 'input',
+					label: '堆垛机',
+					placeholder: '堆垛机',
+					param: 'stacker',
+				},
+				{
+					type: 'input',
+					label: 'agv',
+					placeholder: 'agv',
+					param: 'agv',
+				},
+				{
+					type: 'datePicker',
+					label: '选择日期',
+					dateType: 'daterange',
+					format: 'yyyy-MM-dd',
+					valueFormat: 'yyyy-MM-dd',
+					rangeSeparator: '-',
+					startPlaceholder: '开始时间',
+					endPlaceholder: '结束时间',
+					param: 'searchTime',
+				},
+				{
+					type: 'button',
+					btnName: '搜索',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: 'button',
+					btnName: '重置',
+					name: 'reset',
+				},
+			],
+		};
+	},
+	components: {},
+	created() {},
+	methods: {
+		buttonClick(val) {
+			switch (val.btnName) {
+				case 'search':
+					this.listQuery.pageNo = 1;
+					this.listQuery.pageSize = 10;
+					this.listQuery.mainTaskCode = val.code;
+					this.listQuery.mainTaskType = val.taskType;
+					this.listQuery.mainTaskState = val.status;
+					this.listQuery.stacker = val.stacker;
+					this.listQuery.agv = val.agv;
+					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : '';
+					this.listQuery.endTime = val.searchTime ? val.searchTime[1] : '';
+					this.getDataList();
+					break;
+				case 'reset':
+					this.$refs.searchBarForm.resetForm();
+					this.listQuery = {
+						pageSize: 10,
+						pageNo: 1,
+						total: 1,
+					};
+					this.getDataList();
+					break;
+				default:
+					console.log(val);
+			}
+		},
+	},
+};
+</script>

src/views/asrs/mesLog/index.vue

@@ -0,0 +1,124 @@
+<template>
+	<div class="app-container">
+		<search-bar
+			:formConfigs="formConfig"
+			ref="searchBarForm"
+			@headBtnClick="buttonClick" />
+		<base-table
+			v-loading="dataListLoading"
+			:table-props="tableProps"
+			:page="listQuery.pageNo"
+			:limit="listQuery.pageSize"
+			:table-data="tableData">
+		</base-table>
+		<pagination
+			:limit.sync="listQuery.pageSize"
+			:page.sync="listQuery.pageNo"
+			:total="listQuery.total"
+			@pagination="getDataList" />
+	</div>
+</template>
+
+<script>
+import basicPage from '../mixins/basic-page';
+import { parseTime } from '../mixins/code-filter';
+import { getMesLogPage } from '@/api/oth/mesLog';
+
+const tableProps = [
+	{
+		prop: 'reqInterface',
+		label: '请求接口',
+		align: 'center',
+	},
+	{
+		prop: 'reqParameter',
+		label: '请求参数',
+		align: 'center',
+	},
+	{
+		prop: 'createDate',
+		label: '时间',
+		align: 'center',
+		filter: parseTime,
+	},
+];
+export default {
+	mixins: [basicPage],
+	data() {
+		return {
+			urlOptions: {
+				getDataListURL: getMesLogPage,
+			},
+			tableProps,
+			tableData: [],
+			formConfig: [
+				{
+					type: 'input',
+					label: '请求接口',
+					placeholder: '请求接口',
+					param: 'code',
+				},
+				{
+					type: 'input',
+					label: '请求参数',
+					placeholder: '请求参数',
+					param: 'name',
+				},
+				{
+					type: 'datePicker',
+					label: '订单出货日期',
+					dateType: 'daterange',
+					format: 'yyyy-MM-dd',
+					valueFormat: 'yyyy-MM-dd',
+					rangeSeparator: '-',
+					startPlaceholder: '开始时间',
+					endPlaceholder: '结束时间',
+					param: 'searchTime',
+				},
+				{
+					type: 'button',
+					btnName: '搜索',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: 'button',
+					btnName: '重置',
+					name: 'reset',
+				},
+			],
+		};
+	},
+	components: {},
+	created() {},
+	methods: {
+		buttonClick(val) {
+			switch (val.btnName) {
+				case 'search':
+					this.listQuery.pageNo = 1;
+					this.listQuery.pageSize = 10;
+					this.listQuery.reqInterface = val.code;
+					this.listQuery.reqParameter = val.name;
+					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : '';
+					this.listQuery.endTime = val.searchTime ? val.searchTime[1] : '';
+					this.getDataList();
+					break;
+				case 'reset':
+					this.$refs.searchBarForm.resetForm();
+					this.listQuery = {
+						pageSize: 10,
+						pageNo: 1,
+						total: 1,
+					};
+					this.getDataList();
+					break;
+				default:
+					console.log(val);
+			}
+		},
+	},
+};
+</script>

src/views/asrs/mixins/basic-add.js

@@ -0,0 +1,111 @@
+/*
+ * @Author: zwq
+ * @Date: 2022-08-24 11:19:43
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-09-05 15:10:13
+ * @Description:
+ */
+export default {
+  data() {
+    /* eslint-disable */
+    return {
+      urlOptions: {
+        createURL: '',
+        updateURL: '',
+        infoURL: '',
+        codeURL: '',
+        getOption: false,
+        isGetCode: false,
+        optionArrUrl: [],
+        optionArr: {}
+      },
+      aId: '1696803324030865409',
+      bId: '1698950657556340737',
+      visible: false,
+      setData: false
+    }
+  },
+  created() {
+  },
+  activated() {
+  },
+  methods: {
+    init(id,bPage) {
+      this.dataForm.id = id || "";
+      this.visible = true;
+      if (this.urlOptions.getOption) {
+        this.getArr()
+      }
+      if(bPage){
+        this.dataForm.warehouseId = this.bId;
+      }else{
+        this.dataForm.warehouseId = this.bId;
+      }
+      this.$nextTick(() => {
+        this.$refs["dataForm"].resetFields();
+        if (this.dataForm.id) {
+          this.urlOptions.infoURL(id).then(response => {
+            this.dataForm = response.data;
+            if (this.setData) {
+              this.setDataForm()
+            }
+          });
+        } else {
+          if (this.urlOptions.isGetCode) {
+            this.getCode()
+          }
+        }
+      });
+    },
+    getCode() {
+      this.urlOptions.codeURL()
+        .then(({ data: res }) => {
+          if (this.urlOptions.codeName) {
+            this.dataForm[this.urlOptions.codeName] = res;
+          } else {
+            this.dataForm.code = res;
+          }
+        })
+        .catch(() => { });
+    },
+    getArr() {
+      const params = {
+        pageSize: 100,
+        pageNo: 1,
+      }
+      this.urlOptions.optionArrUrl.forEach((item, index) => {
+        item(params).then(({ data: res }) => {
+          this.$set(this.urlOptions.optionArr, `arr${index}`, res.list)
+        })
+          .catch(() => {
+          });
+      });
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs["dataForm"].validate((valid) => {
+        if (!valid) {
+          return false;
+        }
+        // 修改的提交
+        if (this.dataForm.id) {
+          this.urlOptions.updateURL(this.dataForm).then(response => {
+            this.$modal.msgSuccess("修改成功");
+            this.visible = false;
+            this.$emit("refreshDataList");
+          });
+          return;
+        }
+        // 添加的提交
+        this.urlOptions.createURL(this.dataForm).then(response => {
+          this.$modal.msgSuccess("新增成功");
+          this.visible = false;
+          this.$emit("refreshDataList");
+        });
+      });
+    },
+    formClear() {
+      this.$refs.dataForm.resetFields()
+    }
+  }
+}

src/views/asrs/mixins/basic-page.js

@@ -0,0 +1,172 @@
+/*
+ * @Author: zwq
+ * @Date: 2022-08-24 11:19:43
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-09-05 15:10:24
+ * @Description:
+ */
+export default {
+  data() {
+    /* eslint-disable */
+    return {
+      urlOptions: {
+        getDataListURL: '',
+        deleteURL: '',
+        statusUrl: '',
+        exportURL: ''
+      },
+      aId: '1696803324030865409',
+      bId: '1698950657556340737',
+      tableData: [],
+      listQuery: {
+        warehouseId:'1696803324030865409',
+        pageSize: 10,
+        pageNo: 1,
+        total: 1,
+      },
+      exportLoading: false,
+      dataListLoading: false,
+      addOrEditTitle: '',
+      addOrUpdateVisible: false,
+      bPage: false
+    }
+  },
+  created() {
+  },
+  mounted() {
+    this.getDataList()
+  },
+  methods: {
+    // 获取数据列表
+    getDataList() {
+      this.dataListLoading = true;
+      this.urlOptions.getDataListURL(this.listQuery).then(response => {
+        this.tableData = response.data.list;
+        this.total = response.data.total;
+        this.dataListLoading = false;
+      });
+    },
+    // 每页数
+    sizeChangeHandle(val) {
+      this.listQuery.pageSize = val;
+      this.listQuery.pageNo = 1;
+      this.getDataList();
+    },
+    // 当前页
+    currentChangeHandle(val) {
+      this.listQuery.pageNo = val;
+      this.getDataList();
+    },
+    // 新增 / 修改
+    addOrUpdateHandle(id) {
+      this.addOrUpdateVisible = true;
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id,this.bPage);
+      });
+    },
+    cancel(id) {
+      this.$refs["popover-" + id].showPopper = false;
+    },
+    //改变状态
+    changeStatus(id) {
+      this.$http
+        .post(this.urlOptions.statusUrl, { id })
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          this.$refs["popover-" + id].showPopper = false;
+          this.$message({
+            message: this.$t("prompt.success"),
+            type: "success",
+            duration: 500,
+            onClose: () => {
+              this.getDataList();
+            },
+          });
+        })
+        .catch(() => { });
+    },
+    //tableBtn点击
+    handleClick(val) {
+      if (val.type === "edit") {
+        this.addOrUpdateVisible = true;
+        this.addOrEditTitle = "编辑";
+        this.$nextTick(() => {
+          this.$refs.addOrUpdate.init(val.data.id,this.bPage);
+        });
+      } else if (val.type === "delete") {
+        this.deleteHandle(val.data.id, val.data.name, val.data._pageIndex)
+      } else if (val.type === "change") {
+        this.changeStatus(val.data.id)
+      } else {
+        this.otherMethods(val)
+      }
+    },
+    // 删除
+    deleteHandle(id, name, index) {
+      this.$confirm(`确定对${name ? '[名称=' + name + ']' : '[序号=' + index + ']'}进行删除操作?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.urlOptions.deleteURL(id).then(({ data }) => {
+            this.$message({
+              message: "操作成功",
+              type: "success",
+              duration: 1500,
+              onClose: () => {
+                this.getDataList();
+              },
+            });
+          });
+        })
+        .catch(() => { });
+    },
+    //search-bar点击
+    buttonClick(val) {
+      switch (val.btnName) {
+        case "search":
+          this.listQuery.xm1 = val.xm1;
+          this.listQuery.xm2 = val.xm2;
+          this.listQuery.pageNo = 1;
+          this.getDataList();
+          break;
+        case "add":
+          this.addOrEditTitle = '新增'
+          this.addOrUpdateVisible = true;
+          this.addOrUpdateHandle()
+          break;
+        default:
+          console.log(val)
+      }
+    },
+    handleCancel() {
+      this.$refs.addOrUpdate.formClear()
+      this.addOrUpdateVisible = false
+      this.addOrEditTitle = ''
+    },
+    handleConfirm() {
+      this.$refs.addOrUpdate.dataFormSubmit()
+    },
+    successSubmit() {
+      this.handleCancel()
+      this.getDataList()
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      // 处理查询参数
+      let params = { ...this.queryParams };
+      params.pageNo = undefined;
+      params.pageSize = undefined;
+      this.$modal.confirm('是否确认导出所有数据项?').then(() => {
+        this.exportLoading = true;
+        return this.urlOptions.exportURL(params);
+      }).then(response => {
+        this.$download.excel(response, '工厂.xls');
+        this.exportLoading = false;
+      }).catch(() => { });
+    }
+  }
+}

src/views/asrs/mixins/code-filter.js

@@ -0,0 +1,98 @@
+
+/*
+ * @Date: 2020-12-29 16:49:28
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-09-07 14:10:53
+ * @FilePath: \basic-admin\src\filters\basicData\index.js
+ * @Description:
+ */
+
+const table = {
+  cure: {
+    1: '需要',
+    0: '不需要',
+  },
+  deactivate: {
+    1: '启用',
+    0: '停用',
+  },
+  isOrno:{
+    1: '是',
+    0: '否',
+  },
+  quality:{
+    2: 'C',
+    1: 'B',
+    0: 'A',
+  },
+  mainTaskType:{
+		1: '一次分切',
+		2: '二次分切',
+		3: '一次分拣',
+		4: '二次分拣',
+	},
+  mainTaskState:{
+		0: '开始',
+		1: '已发送agv',
+		2: 'agv运行中',
+		3: '已发送堆垛机',
+		4: '堆垛机运行中',
+		5: '完成',
+	},
+  taskSource: {
+    1: 'mes下发',
+    2: 'wms手动',
+  },
+  cancellation: {
+    1: '否',
+    2: '是',
+  },
+}
+
+// 日期格式化
+export function parseTime(time, pattern) {
+  if (arguments.length === 0 || !time) {
+    return null
+  }
+  const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
+  let date
+  if (typeof time === 'object') {
+    date = time
+  } else {
+    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
+      time = parseInt(time)
+    } else if (typeof time === 'string') {
+      time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.\d{3}/gm),'');
+    }
+    if ((typeof time === 'number') && (time.toString().length === 10)) {
+      time = time * 1000
+    }
+    date = new Date(time)
+  }
+  const formatObj = {
+    y: date.getFullYear(),
+    m: date.getMonth() + 1,
+    d: date.getDate(),
+    h: date.getHours(),
+    i: date.getMinutes(),
+    s: date.getSeconds(),
+    a: date.getDay()
+  }
+  const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
+    let value = formatObj[key]
+    // Note: getDay() returns 0 on Sunday
+    if (key === 'a') {
+      return ['日', '一', '二', '三', '四', '五', '六'][value]
+    }
+    if (result.length > 0 && value < 10) {
+      value = '0' + value
+    }
+    return value || 0
+  })
+  return time_str
+}
+export default function (dictTable) {
+  return function (val) {
+    return table?.[dictTable]?.[val]
+  }
+}

src/views/asrs/mixins/resize.js

@@ -0,0 +1,56 @@
+import { debounce } from '@/utils'
+
+export default {
+  data() {
+    return {
+      $_sidebarElm: null,
+      $_resizeHandler: null
+    }
+  },
+  mounted() {
+    this.initListener()
+  },
+  activated() {
+    if (!this.$_resizeHandler) {
+      // avoid duplication init
+      this.initListener()
+    }
+
+    // when keep-alive chart activated, auto resize
+    this.resize()
+  },
+  beforeDestroy() {
+    this.destroyListener()
+  },
+  deactivated() {
+    this.destroyListener()
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_sidebarResizeHandler(e) {
+      if (e.propertyName === 'width') {
+        this.$_resizeHandler()
+      }
+    },
+    initListener() {
+      this.$_resizeHandler = debounce(() => {
+        this.resize()
+      }, 100)
+      window.addEventListener('resize', this.$_resizeHandler)
+
+      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    destroyListener() {
+      window.removeEventListener('resize', this.$_resizeHandler)
+      this.$_resizeHandler = null
+
+      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    resize() {
+      const { chart } = this
+      chart && chart.resize()
+    }
+  }
+}

src/views/asrs/product-mini.vue

@@ -0,0 +1,119 @@
+<!--
+ * @Author: zwq
+ * @Date: 2023-08-24 14:47:58
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-09-04 14:38:44
+ * @Description:
+-->
+<template>
+	<div class="app-container">
+		<base-table
+			v-loading="dataListLoading"
+			:table-props="propType===1?
+      [...tableProps,...tableProps2]:propType===2?
+      [...tableProps,...tableProps1,...tableProps2]:tableProps"
+      max-height="200"
+			:table-data="tableData" />
+      </div>
+</template>
+
+<script>
+import basicPage from './mixins/basic-page';
+import { parseTime } from './mixins/code-filter';
+import codeFilter from './mixins/code-filter';
+
+import {
+	getWarehouseStorehouseGoodsSpecificationPage,
+} from '@/api/asrs/warehouseStorehouseGoodsSpecification';
+import {
+	getWarehouseStorehouseStorageGoodsSpecificationPage,
+} from '@/api/asrs/warehouseStorehouseStorageGoodsSpecification';
+
+import { number } from 'echarts';
+
+const tableProps = [
+	{
+		prop: 'goodSpecificationName',
+		label: '产品名',
+		align: 'center',
+	},
+	{
+		prop: 'goodSpecificationCode',
+		label: '产品编码',
+		align: 'center',
+	},
+	{
+		prop: 'goodSpecificationName1',
+		label: '产品规格',
+		align: 'center',
+	},
+	{
+		prop: 'quality',
+		label: '品质',
+		align: 'center',
+		filter: codeFilter('quality'),
+	},
+];
+const tableProps1 = [
+	{
+		prop: 'number',
+		label: '数量',
+		align: 'center',
+	},
+]
+
+const tableProps2 = [
+	{
+		prop: 'cureTime',
+		label: '需要熟化时间(小时)',
+		align: 'center',
+	},
+	{
+		prop: 'alreadyCureTime',
+		label: '已熟化时间(小时)',
+		align: 'center',
+	},
+	{
+		prop: 'createTime',
+		label: '入库时间',
+		align: 'center',
+		filter: parseTime,
+	},
+]
+export default {
+	mixins: [basicPage],
+	props: {
+		propType: {
+			type: Number,
+			default: 1,
+		},
+    warehouseId: {
+			type: String,
+			default: '',
+		},
+	},
+	data() {
+		return {
+			urlOptions: {
+				getDataListURL: this.propType!==3?getWarehouseStorehouseGoodsSpecificationPage:getWarehouseStorehouseStorageGoodsSpecificationPage,
+			},
+			tableProps,
+      tableProps1,
+      tableProps2,
+			tableData: [],
+      listQuery: {
+        pageSize: 100,
+        pageNo: 1,
+        total: 1,
+        warehouseStorehouseId:this.warehouseId,
+        warehouseStorehouseStorageId:this.warehouseId,
+      },
+		};
+	},
+	components: {
+	},
+	created() {},
+	methods: {
+	},
+};
+</script>

src/views/asrs/warehouse/add-or-updata.vue

@@ -0,0 +1,64 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-11-18 14:16:25
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-08-31 16:32:17
+ * @Description:
+-->
+<template>
+	<el-form
+		:model="dataForm"
+		:rules="dataRule"
+		ref="dataForm"
+		@keyup.enter.native="dataFormSubmit()"
+		label-width="80px">
+		<el-form-item label="仓库编码" prop="warehouseCode">
+			<el-input
+				v-model="dataForm.warehouseCode"
+				clearable
+				placeholder="请输入仓库编码" />
+		</el-form-item>
+		<el-form-item label="仓库名称" prop="warehouseName">
+			<el-input
+				v-model="dataForm.warehouseName"
+				clearable
+				placeholder="请输入仓库名称" />
+		</el-form-item>
+		<el-form-item label="备注" prop="remark">
+			<el-input v-model="dataForm.remark" clearable placeholder="请输入备注" />
+		</el-form-item>
+	</el-form>
+</template>
+
+<script>
+import basicAdd from '../mixins/basic-add';
+import { createWarehouse, updateWarehouse, getWarehouse, getCode } from "@/api/asrs/warehouse";
+
+export default {
+	mixins: [basicAdd],
+	data() {
+		return {
+			urlOptions: {
+			  isGetCode: true,
+        codeURL: getCode,
+        codeName: 'warehouseCode',
+				createURL: createWarehouse,
+				updateURL: updateWarehouse,
+				infoURL: getWarehouse,
+			},
+			dataForm: {
+        id: undefined,
+        warehouseCode: undefined,
+        warehouseName: undefined,
+        remark: undefined,
+			},
+			dataRule: {
+        warehouseCode: [{ required: true, message: "仓库编码不能为空", trigger: "blur" }],
+        warehouseName: [{ required: true, message: "仓库名称不能为空", trigger: "blur" }],
+      }
+		};
+	},
+	methods: {
+	},
+};
+</script>

src/views/asrs/warehouse/index.vue

@@ -0,0 +1,169 @@
+<template>
+	<div class="app-container">
+		<search-bar
+			:formConfigs="formConfig"
+			ref="searchBarForm"
+			@headBtnClick="buttonClick" />
+		<base-table
+			v-loading="dataListLoading"
+			:table-props="tableProps"
+			:page="listQuery.pageNo"
+			:limit="listQuery.pageSize"
+			:table-data="tableData">
+			<method-btn
+				v-if="tableBtn.length"
+				slot="handleBtn"
+				:width="120"
+				label="操作"
+				:method-list="tableBtn"
+				@clickBtn="handleClick" />
+		</base-table>
+		<pagination
+			:limit.sync="listQuery.pageSize"
+			:page.sync="listQuery.pageNo"
+			:total="listQuery.total"
+			@pagination="getDataList" />
+		<base-dialog
+			:dialogTitle="addOrEditTitle"
+			:dialogVisible="addOrUpdateVisible"
+			@cancel="handleCancel"
+			@confirm="handleConfirm"
+			:before-close="handleCancel"
+			width="70%">
+			<add-or-update
+				ref="addOrUpdate"
+				@refreshDataList="successSubmit"></add-or-update>
+		</base-dialog>
+	</div>
+</template>
+
+<script>
+import AddOrUpdate from './add-or-updata';
+import basicPage from '../mixins/basic-page';
+import { parseTime } from '../mixins/code-filter';
+import {
+	deleteWarehouse,
+	getWarehousePage,
+} from '@/api/asrs/warehouse';
+
+const tableProps = [
+	{
+		prop: 'warehouseCode',
+		label: '仓库编码',
+		align: 'center',
+	},
+	{
+		prop: 'warehouseName',
+		label: '仓库名称',
+		align: 'center',
+	},
+	{
+		prop: 'remark',
+		label: '备注',
+		align: 'center',
+	},
+];
+
+export default {
+	mixins: [basicPage],
+	data() {
+		return {
+			urlOptions: {
+				getDataListURL: getWarehousePage,
+				deleteURL: deleteWarehouse,
+			},
+			tableProps,
+			tableBtn: [
+				this.$auth.hasPermi(`asrs:warehouse:update`)
+					? {
+							type: 'edit',
+							btnName: '编辑',
+					  }
+					: undefined,
+          this.$auth.hasPermi(`asrs:warehouse:delete`)
+					? {
+							type: 'delete',
+							btnName: '删除',
+					  }
+					: undefined,
+			].filter((v)=>v),
+			tableData: [],
+			formConfig: [
+				{
+					type: 'input',
+					label: '仓库编码',
+					placeholder: '仓库编码',
+					param: 'code',
+				},
+				{
+					type: 'input',
+					label: '仓库名称',
+					placeholder: '仓库名称',
+					param: 'name',
+				},
+				{
+					type: 'button',
+					btnName: '搜索',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: this.$auth.hasPermi('asrs:warehouse:create') ? 'button' : '',
+					btnName: '新增',
+					name: 'add',
+					color: 'success',
+					plain: true,
+				},
+				// {
+				// 	type: this.$auth.hasPermi('base:factory:create') ? 'separate' : '',
+				// },
+				// {
+				// 	type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
+				// 	btnName: '导出',
+				// 	name: 'export',
+				// 	color: 'warning',
+				// },
+			],
+		};
+	},
+	components: {
+		AddOrUpdate,
+	},
+	created() {},
+	methods: {
+		buttonClick(val) {
+			switch (val.btnName) {
+				case 'search':
+					this.listQuery.pageNo = 1;
+					this.listQuery.pageSize = 10;
+					this.listQuery.warehouseName = val.name;
+					this.listQuery.warehouseCode = val.code;
+					this.getDataList();
+					break;
+				case 'reset':
+					this.$refs.searchBarForm.resetForm();
+					this.listQuery = {
+						pageSize: 10,
+						pageNo: 1,
+						total: 1,
+					};
+					this.getDataList();
+					break;
+				case 'add':
+					this.addOrEditTitle = '新增';
+					this.addOrUpdateVisible = true;
+					this.addOrUpdateHandle();
+					break;
+				case 'export':
+					this.handleExport();
+					break;
+				default:
+					console.log(val);
+			}
+		},
+	},
+};
+</script>

src/views/asrs/warehouseLocationMonitoring/index.vue

@@ -0,0 +1,171 @@
+<!--
+ * @Author: zwq
+ * @Date: 2023-08-21 14:26:23
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-08-31 14:36:15
+ * @Description:
+-->
+<template>
+	<div class="app-container">
+		<search-bar
+			:formConfigs="formConfig"
+			ref="searchBarForm"
+			@headBtnClick="buttonClick" />
+      <div class="mainbody">
+		<div v-for="a in 3" :key="a">
+			<el-row type="flex" justify="space-around">
+				<el-col :span="5" v-for="i in 4" :key="i">
+					<el-row type="flex" justify="space-between">
+						<el-col :span="12" v-for="j in 2" :key="j">
+							<div
+								class="dashboard-layout-item"
+								v-for="z in 2"
+								:key="z"
+								style="background: #ffd781; float: left">
+								<div
+									class="dashboard-layout-item-cricle"
+									style="background: #16dc09" />
+								{{ i + '+' + j + '+' + z }}
+							</div>
+						</el-col>
+					</el-row>
+					<el-row type="flex" justify="space-between">
+						<el-col :span="12" v-for="j in 2" :key="j">
+							<div
+								class="dashboard-layout-item"
+								v-for="z in 2"
+								:key="z"
+								style="background: #ffd781; float: left">
+								<div
+									class="dashboard-layout-item-cricle"
+									style="background: #16dc09" />
+								{{ i + '+' + j + '+' + z }}
+							</div>
+						</el-col>
+					</el-row>
+				</el-col>
+			</el-row>
+			<el-divider class="divider"></el-divider>
+			<el-row type="flex" justify="space-around">
+				<el-col :span="5" v-for="i in 4" :key="i">
+					<el-row type="flex" justify="space-between">
+						<el-col :span="12" v-for="j in 2" :key="j">
+							<div
+								class="dashboard-layout-item"
+								v-for="z in 2"
+								:key="z"
+								style="background: #ffd781; float: left">
+								<div
+									class="dashboard-layout-item-cricle"
+									style="background: #16dc09" />
+								{{ i + '+' + j + '+' + z }}
+							</div>
+						</el-col>
+					</el-row>
+					<el-row type="flex" justify="space-between">
+						<el-col :span="12" v-for="j in 2" :key="j">
+							<div
+								class="dashboard-layout-item"
+								v-for="z in 2"
+								:key="z"
+								style="background: #ffd781; float: left">
+								<div
+									class="dashboard-layout-item-cricle"
+									style="background: #16dc09" />
+								{{ i + '+' + j + '+' + z }}
+							</div>
+						</el-col>
+					</el-row>
+				</el-col>
+			</el-row>
+		</div>
+  </div>
+	</div>
+</template>
+
+<script>
+import basicPage from '../mixins/basic-page';
+import { getWarehouseStorehousePage } from '@/api/asrs/warehouseStorehouse';
+
+export default {
+	mixins: [basicPage],
+	data() {
+		return {
+			urlOptions: {
+				getDataListURL: getWarehouseStorehousePage,
+			},
+			listQuery: {
+				wareLayer: 1,
+			},
+			formConfig: [
+				{
+					type: 'select',
+					label: '选择层',
+					selectOptions: [
+						{ id: 1, name: '1' },
+						{ id: 2, name: '2' },
+						{ id: 3, name: '3' },
+						{ id: 4, name: '4' },
+					],
+					param: 'value',
+					filterable: true,
+					defaultSelect: 1,
+					clearable: false,
+				},
+				{
+					type: 'button',
+					btnName: '搜索',
+					name: 'search',
+					color: 'primary',
+				},
+			],
+		};
+	},
+	components: {},
+	created() {},
+	methods: {
+		buttonClick(val) {
+			switch (val.btnName) {
+				case 'search':
+					this.listQuery.wareLayer = val.value;
+					this.getDataList();
+					break;
+				default:
+					console.log(val);
+			}
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.mainbody{
+	display: flex;
+  gap: 50px;
+  flex-direction: column;
+}
+.dashboard-layout-item {
+	width: 80px;
+	text-align: center;
+	height: 32px;
+	box-shadow: 0px 3px 6px 0px rgba(166, 174, 190, 0.8);
+	border-radius: 2px 4px 4px 2px;
+	margin-bottom: 8px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	.dashboard-layout-item-cricle {
+		display: inline-block;
+		width: 12px;
+		height: 12px;
+		border-radius: 6px;
+		margin-right: 6px;
+	}
+}
+.el-divider--horizontal {
+	margin: 10px 0;
+}
+.el-divider{
+  background-color: black;
+}
+</style>

src/views/asrs/warehouseLocationMonitoring/indexb.vue

@@ -0,0 +1,173 @@
+<!--
+ * @Author: zwq
+ * @Date: 2023-08-21 14:26:23
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-09-05 14:53:46
+ * @Description:
+-->
+<template>
+	<div class="app-container">
+		<search-bar
+			:formConfigs="formConfig"
+			ref="searchBarForm"
+			@headBtnClick="buttonClick" />
+      <div class="mainbody">
+		<div v-for="a in 3" :key="a">
+			<el-row type="flex" justify="space-around">
+				<el-col :span="5" v-for="i in 4" :key="i">
+					<el-row type="flex" justify="space-between">
+						<el-col :span="12" v-for="j in 2" :key="j">
+							<div
+								class="dashboard-layout-item"
+								v-for="z in 2"
+								:key="z"
+								style="background: #ffd781; float: left">
+								<div
+									class="dashboard-layout-item-cricle"
+									style="background: #16dc09" />
+								{{ i + '+' + j + '+' + z }}
+							</div>
+						</el-col>
+					</el-row>
+					<el-row type="flex" justify="space-between">
+						<el-col :span="12" v-for="j in 2" :key="j">
+							<div
+								class="dashboard-layout-item"
+								v-for="z in 2"
+								:key="z"
+								style="background: #ffd781; float: left">
+								<div
+									class="dashboard-layout-item-cricle"
+									style="background: #16dc09" />
+								{{ i + '+' + j + '+' + z }}
+							</div>
+						</el-col>
+					</el-row>
+				</el-col>
+			</el-row>
+			<el-divider class="divider"></el-divider>
+			<el-row type="flex" justify="space-around">
+				<el-col :span="5" v-for="i in 4" :key="i">
+					<el-row type="flex" justify="space-between">
+						<el-col :span="12" v-for="j in 2" :key="j">
+							<div
+								class="dashboard-layout-item"
+								v-for="z in 2"
+								:key="z"
+								style="background: #ffd781; float: left">
+								<div
+									class="dashboard-layout-item-cricle"
+									style="background: #16dc09" />
+								{{ i + '+' + j + '+' + z }}
+							</div>
+						</el-col>
+					</el-row>
+					<el-row type="flex" justify="space-between">
+						<el-col :span="12" v-for="j in 2" :key="j">
+							<div
+								class="dashboard-layout-item"
+								v-for="z in 2"
+								:key="z"
+								style="background: #ffd781; float: left">
+								<div
+									class="dashboard-layout-item-cricle"
+									style="background: #16dc09" />
+								{{ i + '+' + j + '+' + z }}
+							</div>
+						</el-col>
+					</el-row>
+				</el-col>
+			</el-row>
+		</div>
+  </div>
+	</div>
+</template>
+
+<script>
+import basicPage from '../mixins/basic-page';
+import { getWarehouseStorehousePage } from '@/api/asrs/warehouseStorehouse';
+
+export default {
+	mixins: [basicPage],
+	data() {
+		return {
+			urlOptions: {
+				getDataListURL: getWarehouseStorehousePage,
+			},
+			listQuery: {
+				wareLayer: 1,
+			},
+			formConfig: [
+				{
+					type: 'select',
+					label: '选择层',
+					selectOptions: [
+						{ id: 1, name: '1' },
+						{ id: 2, name: '2' },
+						{ id: 3, name: '3' },
+						{ id: 4, name: '4' },
+					],
+					param: 'value',
+					filterable: true,
+					defaultSelect: 1,
+					clearable: false,
+				},
+				{
+					type: 'button',
+					btnName: '搜索',
+					name: 'search',
+					color: 'primary',
+				},
+			],
+		};
+	},
+	components: {},
+	created() {
+		this.listQuery.warehouseId = this.bId;
+  },
+	methods: {
+		buttonClick(val) {
+			switch (val.btnName) {
+				case 'search':
+					this.listQuery.wareLayer = val.value;
+					this.getDataList();
+					break;
+				default:
+					console.log(val);
+			}
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.mainbody{
+	display: flex;
+  gap: 50px;
+  flex-direction: column;
+}
+.dashboard-layout-item {
+	width: 80px;
+	text-align: center;
+	height: 32px;
+	box-shadow: 0px 3px 6px 0px rgba(166, 174, 190, 0.8);
+	border-radius: 2px 4px 4px 2px;
+	margin-bottom: 8px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	.dashboard-layout-item-cricle {
+		display: inline-block;
+		width: 12px;
+		height: 12px;
+		border-radius: 6px;
+		margin-right: 6px;
+	}
+}
+.el-divider--horizontal {
+	margin: 10px 0;
+}
+.el-divider{
+  background-color: black;
+}
+</style>

src/views/asrs/warehouseStorehouse/add-or-updata.vue

@@ -0,0 +1,209 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-11-18 14:16:25
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-08-31 16:37:37
+ * @Description:
+-->
+<template>
+	<el-form
+		ref="dataForm"
+		:model="dataForm"
+		:rules="dataRule"
+		size="medium"
+		label-width="120px">
+		<el-col :span="8">
+			<el-form-item label="仓库" prop="warehouseInfo">
+				<el-select
+					v-model="dataForm.warehouseInfo"
+					placeholder="请输入仓库"
+					filterable
+					clearable
+          @change="setWarehouseInfo"
+					:style="{ width: '100%' }">
+        <el-option
+          v-for="item in urlOptions.optionArr.arr0"
+          :key="item.id"
+          :label="item.warehouseName"
+          :value="item.id+'-'+item.warehouseName+'-'+item.warehouseCode"
+        >
+        </el-option>
+      </el-select>
+			</el-form-item>
+		</el-col>
+		<el-col :span="8">
+			<el-form-item label="库位名称" prop="warehouseStorehouseName">
+				<el-input
+					v-model="dataForm.warehouseStorehouseName"
+					placeholder="请输入库位名称"
+					clearable
+					:style="{ width: '100%' }"></el-input>
+			</el-form-item>
+		</el-col>
+		<el-col :span="8">
+			<el-form-item label=" 库位编码" prop="warehouseStorehouseCode">
+				<el-input
+					v-model="dataForm.warehouseStorehouseCode"
+					placeholder="请输入 库位编码"
+					clearable
+					:style="{ width: '100%' }"></el-input>
+			</el-form-item>
+		</el-col>
+		<el-col :span="8">
+			<el-form-item label="排" prop="wareRow">
+				<el-input
+					v-model="dataForm.wareRow"
+					placeholder="请输入排"
+					clearable
+					:style="{ width: '100%' }"></el-input>
+			</el-form-item>
+		</el-col>
+		<el-col :span="8">
+			<el-form-item label="列" prop="wareColumn">
+				<el-input
+					v-model="dataForm.wareColumn"
+					placeholder="请输入列"
+					clearable
+					:style="{ width: '100%' }"></el-input>
+			</el-form-item>
+		</el-col>
+		<el-col :span="8">
+			<el-form-item label="层" prop="wareLayer">
+				<el-input
+					v-model="dataForm.wareLayer"
+					placeholder="请输入层"
+					clearable
+					:style="{ width: '100%' }"></el-input>
+			</el-form-item>
+		</el-col>
+		<el-col :span="8">
+			<el-form-item label="是否启用" prop="deactivate">
+				<el-switch
+					v-model="dataForm.deactivate"
+					:active-value="1"
+					:inactive-value="0"></el-switch>
+			</el-form-item>
+		</el-col>
+		<el-col :span="8">
+			<el-form-item label="是否缓存库位" prop="cacheLocation">
+				<el-switch
+					v-model="dataForm.cacheLocation"
+					:active-value="1"
+					:inactive-value="0"></el-switch>
+			</el-form-item>
+		</el-col>
+		<el-col :span="8">
+			<el-form-item label="备注" prop="notes">
+				<el-input
+					v-model="dataForm.notes"
+					placeholder="请输入备注"
+					clearable
+					:style="{ width: '100%' }"></el-input>
+			</el-form-item>
+		</el-col>
+	</el-form>
+</template>
+
+<script>
+import basicAdd from '../mixins/basic-add';
+import {
+	createWarehouseStorehouse,
+	updateWarehouseStorehouse,
+	getWarehouseStorehouse,
+  getCode,
+} from '@/api/asrs/warehouseStorehouse';
+import {
+	getWarehousePage,
+} from '@/api/asrs/warehouse';
+
+export default {
+	mixins: [basicAdd],
+	data() {
+		return {
+			urlOptions: {
+			  isGetCode: true,
+        codeURL: getCode,
+        codeName: 'warehouseStorehouseCode',
+        getOption: true,
+        optionArrUrl: [getWarehousePage],
+				createURL: createWarehouseStorehouse,
+				updateURL: updateWarehouseStorehouse,
+				infoURL: getWarehouseStorehouse,
+			},
+      setData: true,
+			dataForm: {
+				id: undefined,
+				warehouseInfo: undefined,
+				warehouseId: undefined,
+				warehouseName: undefined,
+				warehouseCode: undefined,
+				warehouseStorehouseName: undefined,
+				warehouseStorehouseCode: undefined,
+				wareRow: undefined,
+				wareColumn: undefined,
+				wareLayer: undefined,
+				deactivate: false,
+				cacheLocation: false,
+				notes: undefined,
+			},
+			dataRule: {
+				warehouseInfo: [
+					{
+						required: true,
+						message: '请输入仓库',
+						trigger: 'change',
+					},
+				],
+				warehouseStorehouseName: [
+					{
+						required: true,
+						message: '请输入库位名称',
+						trigger: 'blur',
+					},
+				],
+				warehouseStorehouseCode: [
+					{
+						required: true,
+						message: '请输入 库位编码',
+						trigger: 'blur',
+					},
+				],
+				wareRow: [
+					{
+						required: true,
+						message: '请输入排',
+						trigger: 'blur',
+					},
+				],
+				wareColumn: [
+					{
+						required: true,
+						message: '请输入列',
+						trigger: 'blur',
+					},
+				],
+				wareLayer: [
+					{
+						required: true,
+						message: '请输入层',
+						trigger: 'blur',
+					},
+				],
+				notes: [],
+			},
+		};
+	},
+	methods: {
+    setDataForm(){
+      this.dataForm.warehouseInfo = this.dataForm.warehouseId+'-'+this.dataForm.warehouseName+'-'+this.dataForm.warehouseCode
+    },
+    setWarehouseInfo(val){
+      if(val){
+        this.dataForm.warehouseId = val.split('-')[0]
+        this.dataForm.warehouseName = val.split('-')[1]
+        this.dataForm.warehouseCode = val.split('-')[2]
+      }
+    }
+  },
+};
+</script>

src/views/asrs/warehouseStorehouse/index.vue

@@ -0,0 +1,203 @@
+<template>
+	<div class="app-container">
+		<search-bar
+			:formConfigs="formConfig"
+			ref="searchBarForm"
+			@headBtnClick="buttonClick" />
+		<base-table
+			v-loading="dataListLoading"
+			:table-props="tableProps"
+			:page="listQuery.pageNo"
+			:limit="listQuery.pageSize"
+			:table-data="tableData">
+			<method-btn
+				v-if="tableBtn.length"
+				slot="handleBtn"
+				:width="120"
+				label="操作"
+				:method-list="tableBtn"
+				@clickBtn="handleClick" />
+		</base-table>
+		<pagination
+			:limit.sync="listQuery.pageSize"
+			:page.sync="listQuery.pageNo"
+			:total="listQuery.total"
+			@pagination="getDataList" />
+		<base-dialog
+			:dialogTitle="addOrEditTitle"
+			:dialogVisible="addOrUpdateVisible"
+			@cancel="handleCancel"
+			@confirm="handleConfirm"
+			:before-close="handleCancel"
+			width="70%">
+			<add-or-update
+				ref="addOrUpdate"
+				@refreshDataList="successSubmit"></add-or-update>
+		</base-dialog>
+	</div>
+</template>
+
+<script>
+import AddOrUpdate from './add-or-updata';
+import basicPage from '../mixins/basic-page';
+import codeFilter from '../mixins/code-filter';
+import { deleteWarehouseStorehouse, getWarehouseStorehousePage, } from "@/api/asrs/warehouseStorehouse";
+
+const tableProps = [
+	{
+		prop: 'warehouseCode',
+		label: '仓库编码',
+		align: 'center',
+	},
+	{
+		prop: 'warehouseName',
+		label: '仓库名称',
+		align: 'center',
+	},
+	{
+		prop: 'warehouseStorehouseCode',
+		label: '库位编码',
+		align: 'center',
+	},
+	{
+		prop: 'warehouseStorehouseName',
+		label: '库位名称',
+		align: 'center',
+	},
+	{
+		prop: 'wareRow',
+		label: '排',
+		align: 'center',
+	},
+	{
+		prop: 'wareColumn',
+		label: '列',
+		align: 'center',
+	},
+	{
+		prop: 'wareLayer',
+		label: '层',
+		align: 'center',
+	},
+	{
+		prop: 'cacheLocation',
+		label: '是否缓存库位',
+		align: 'center',
+		filter: codeFilter('isOrno'),
+	},
+	{
+		prop: 'deactivate',
+		label: '是否停用',
+		align: 'center',
+		filter: codeFilter('deactivate'),
+	},
+	{
+		prop: 'notes',
+		label: '备注',
+		align: 'center',
+	},
+];
+
+export default {
+	mixins: [basicPage],
+	data() {
+		return {
+			urlOptions: {
+				getDataListURL: getWarehouseStorehousePage,
+				deleteURL: deleteWarehouseStorehouse,
+			},
+			tableProps,
+			tableBtn: [
+				this.$auth.hasPermi(`asrs:warehouse-storehouse:update`)
+					? {
+							type: 'edit',
+							btnName: '编辑',
+					  }
+					: undefined,
+          this.$auth.hasPermi(`asrs:warehouse-storehouse:delete`)
+					? {
+							type: 'delete',
+							btnName: '删除',
+					  }
+					: undefined,
+			].filter((v)=>v),
+			tableData: [],
+			formConfig: [
+				{
+					type: 'input',
+					label: '库位编码',
+					placeholder: '库位编码',
+					param: 'code',
+				},
+				{
+					type: 'input',
+					label: '库位名称',
+					placeholder: '库位名称',
+					param: 'name',
+				},
+				{
+					type: 'button',
+					btnName: '搜索',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: this.$auth.hasPermi('asrs:warehouse-storehouse:create') ? 'button' : '',
+					btnName: '新增',
+					name: 'add',
+					color: 'success',
+					plain: true,
+				},
+				// {
+				// 	type: this.$auth.hasPermi('base:factory:create') ? 'separate' : '',
+				// },
+				// {
+				// 	type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
+				// 	btnName: '导出',
+				// 	name: 'export',
+				// 	color: 'warning',
+				// },
+			],
+		};
+	},
+	components: {
+		AddOrUpdate,
+	},
+	created() {},
+	methods: {
+		buttonClick(val) {
+			switch (val.btnName) {
+				case 'search':
+					this.listQuery.pageNo = 1;
+					this.listQuery.pageSize = 10;
+					this.listQuery.warehouseStorehouseName = val.name;
+					this.listQuery.warehouseStorehouseCode = val.code;
+					this.getDataList();
+					break;
+				case 'reset':
+					this.$refs.searchBarForm.resetForm();
+					this.listQuery = {
+						pageSize: 10,
+						pageNo: 1,
+						total: 1,
+					};
+					this.getDataList();
+					break;
+				case 'add':
+					this.addOrEditTitle = '新增';
+					this.addOrUpdateVisible = true;
+					this.addOrUpdateHandle();
+					break;
+				case 'export':
+					this.handleExport();
+					break;
+				default:
+					console.log(val);
+			}
+		},
+	},
+};
+</script>

src/views/asrs/warehouseStorehouse/indexb.vue

@@ -0,0 +1,206 @@
+<template>
+	<div class="app-container">
+		<search-bar
+			:formConfigs="formConfig"
+			ref="searchBarForm"
+			@headBtnClick="buttonClick" />
+		<base-table
+			v-loading="dataListLoading"
+			:table-props="tableProps"
+			:page="listQuery.pageNo"
+			:limit="listQuery.pageSize"
+			:table-data="tableData">
+			<method-btn
+				v-if="tableBtn.length"
+				slot="handleBtn"
+				:width="120"
+				label="操作"
+				:method-list="tableBtn"
+				@clickBtn="handleClick" />
+		</base-table>
+		<pagination
+			:limit.sync="listQuery.pageSize"
+			:page.sync="listQuery.pageNo"
+			:total="listQuery.total"
+			@pagination="getDataList" />
+		<base-dialog
+			:dialogTitle="addOrEditTitle"
+			:dialogVisible="addOrUpdateVisible"
+			@cancel="handleCancel"
+			@confirm="handleConfirm"
+			:before-close="handleCancel"
+			width="70%">
+			<add-or-update
+				ref="addOrUpdate"
+				@refreshDataList="successSubmit"></add-or-update>
+		</base-dialog>
+	</div>
+</template>
+
+<script>
+import AddOrUpdate from './add-or-updata';
+import basicPage from '../mixins/basic-page';
+import codeFilter from '../mixins/code-filter';
+import { deleteWarehouseStorehouse, getWarehouseStorehousePage, } from "@/api/asrs/warehouseStorehouse";
+
+const tableProps = [
+	{
+		prop: 'warehouseCode',
+		label: '仓库编码',
+		align: 'center',
+	},
+	{
+		prop: 'warehouseName',
+		label: '仓库名称',
+		align: 'center',
+	},
+	{
+		prop: 'warehouseStorehouseCode',
+		label: '库位编码',
+		align: 'center',
+	},
+	{
+		prop: 'warehouseStorehouseName',
+		label: '库位名称',
+		align: 'center',
+	},
+	{
+		prop: 'wareRow',
+		label: '排',
+		align: 'center',
+	},
+	{
+		prop: 'wareColumn',
+		label: '列',
+		align: 'center',
+	},
+	{
+		prop: 'wareLayer',
+		label: '层',
+		align: 'center',
+	},
+	{
+		prop: 'cacheLocation',
+		label: '是否缓存库位',
+		align: 'center',
+		filter: codeFilter('isOrno'),
+	},
+	{
+		prop: 'deactivate',
+		label: '是否停用',
+		align: 'center',
+		filter: codeFilter('deactivate'),
+	},
+	{
+		prop: 'notes',
+		label: '备注',
+		align: 'center',
+	},
+];
+
+export default {
+	mixins: [basicPage],
+	data() {
+		return {
+			urlOptions: {
+				getDataListURL: getWarehouseStorehousePage,
+				deleteURL: deleteWarehouseStorehouse,
+			},
+			tableProps,
+      bPage: true,
+			tableBtn: [
+				this.$auth.hasPermi(`asrs:warehouse-storehouse:update`)
+					? {
+							type: 'edit',
+							btnName: '编辑',
+					  }
+					: undefined,
+          this.$auth.hasPermi(`asrs:warehouse-storehouse:delete`)
+					? {
+							type: 'delete',
+							btnName: '删除',
+					  }
+					: undefined,
+			].filter((v)=>v),
+			tableData: [],
+			formConfig: [
+				{
+					type: 'input',
+					label: '库位编码',
+					placeholder: '库位编码',
+					param: 'code',
+				},
+				{
+					type: 'input',
+					label: '库位名称',
+					placeholder: '库位名称',
+					param: 'name',
+				},
+				{
+					type: 'button',
+					btnName: '搜索',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: this.$auth.hasPermi('asrs:warehouse-storehouse:create') ? 'button' : '',
+					btnName: '新增',
+					name: 'add',
+					color: 'success',
+					plain: true,
+				},
+				// {
+				// 	type: this.$auth.hasPermi('base:factory:create') ? 'separate' : '',
+				// },
+				// {
+				// 	type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
+				// 	btnName: '导出',
+				// 	name: 'export',
+				// 	color: 'warning',
+				// },
+			],
+		};
+	},
+	components: {
+		AddOrUpdate,
+	},
+	created() {
+		this.listQuery.warehouseId = this.bId;
+  },
+	methods: {
+		buttonClick(val) {
+			switch (val.btnName) {
+				case 'search':
+					this.listQuery.pageNo = 1;
+					this.listQuery.pageSize = 10;
+					this.listQuery.warehouseStorehouseName = val.name;
+					this.listQuery.warehouseStorehouseCode = val.code;
+					this.getDataList();
+					break;
+				case 'reset':
+					this.$refs.searchBarForm.resetForm();
+					this.listQuery = {
+						pageSize: 10,
+						pageNo: 1,
+						total: 1,
+					};
+					this.getDataList();
+					break;
+				case 'add':
+					this.addOrEditTitle = '新增';
+					this.addOrUpdateVisible = true;
+					this.addOrUpdateHandle();
+					break;
+				case 'export':
+					this.handleExport();
+					break;
+				default:
+					console.log(val);
+			}
+		},
+	},
+};
+</script>

src/views/asrs/warehouseStorehouseGoodsSpecification/SmallTitle.vue

@@ -0,0 +1,65 @@
+<!--
+ * @Author: zwq
+ * @Date: 2023-08-01 15:27:31
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-08-01 16:25:54
+ * @Description:
+-->
+<template>
+	<div :class="[className, { 'p-0': noPadding }]">
+		<slot />
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		size: {
+			// 取值范围:  xl lg md sm
+			type: String,
+			default: 'de',
+			validator: function (val) {
+				return ['xl', 'lg', 'de', 'md', 'sm'].indexOf(val) !== -1;
+			},
+		},
+		noPadding: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	computed: {
+		className: function () {
+			return `${this.size}-title`;
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+$pxls: (xl, 28px) (lg, 24px) (de, 20px) (md, 18px) (sm, 16px);
+$mgr: 8px;
+@each $size, $height in $pxls {
+	.#{$size}-title {
+		font-size: 18px;
+		line-height: $height;
+		color: #000;
+		font-weight: 500;
+		font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
+
+		&::before {
+			content: '';
+			display: inline-block;
+			vertical-align: top;
+			width: 4px;
+			height: $height + 2px;
+			border-radius: 1px;
+			margin-right: $mgr;
+			background-color: #0b58ff;
+		}
+	}
+}
+
+.p-0 {
+	padding: 0;
+}
+</style>

src/views/asrs/warehouseStorehouseGoodsSpecification/add-or-updata.vue

@@ -0,0 +1,371 @@
+<template>
+	<el-drawer
+		:visible.sync="visible"
+		:show-close="false"
+		:wrapper-closable="false"
+		class="drawer"
+		size="60%">
+		<small-title slot="title" :no-padding="true">仓库信息</small-title>
+
+		<div class="content">
+			<div class="visual-part">
+				<el-form
+					ref="dataForm"
+					:model="dataForm"
+					:rules="dataRule"
+					label-width="100px"
+					label-position="top"
+					@keyup.enter.native="dataFormSubmit">
+					<el-row :gutter="20">
+						<el-col :span="12">
+							<el-form-item label="仓库编码" prop="code">
+								<el-input
+									v-model="dataForm.code"
+									readonly
+									:disabled="isdetail"
+									placeholder="请输入仓库编码" />
+							</el-form-item>
+						</el-col>
+						<el-col :span="12">
+							<el-form-item label="仓库名" prop="name">
+								<el-input
+									v-model="dataForm.name"
+									readonly
+									:disabled="isdetail"
+									placeholder="请输入仓库名" />
+							</el-form-item>
+						</el-col>
+					</el-row>
+					<el-row :gutter="20">
+						<el-col :span="12">
+							<el-form-item label="工序" prop="processId">
+								<el-select
+									v-model="dataForm.processId"
+									style="width: 100%"
+									:disabled="isdetail"
+									placeholder="请选择工序">
+									<el-option
+										v-for="item in processArr"
+										:key="item.id"
+										:label="item.name"
+										:value="item.id" />
+								</el-select>
+							</el-form-item>
+						</el-col>
+					</el-row>
+				</el-form>
+
+				<small-title
+					style="margin: 16px 0; padding-left: 8px"
+					:no-padding="true">
+					产品信息
+				</small-title>
+
+				<div class="attr-list">
+					<base-table
+						:table-props="
+							propType === 1 ? [...tableProps, ...tableProps1] : tableProps
+						"
+						:page="listQuery.pageNo"
+						:limit="listQuery.pageSize"
+						:add-button-show="addButtonShow"
+						@emitButtonClick="addNew"
+						:table-data="productAttributeList">
+						<method-btn
+							v-if="!isdetail"
+							slot="handleBtn"
+							:width="120"
+							label="操作"
+							:method-list="tableBtn"
+							@clickBtn="handleClick" />
+					</base-table>
+				</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"
+			:warehouse-id="dataForm.id"
+			@refreshDataList="getList" />
+	</el-drawer>
+</template>
+
+<script>
+import {
+	updateProduct,
+} from '@/api/core/base/product';
+
+import {
+	getWarehouseStorehouseGoodsSpecificationPage,
+  deleteWarehouseStorehouseGoodsSpecification,
+} from '@/api/asrs/warehouseStorehouseGoodsSpecification';
+import productAttrAdd from './attr-add';
+import { parseTime } from '../mixins/code-filter';
+import codeFilter from '../mixins/code-filter';
+import SmallTitle from './SmallTitle';
+
+const tableBtn = [
+	{
+		type: 'edit',
+		btnName: '编辑',
+	},
+	{
+		type: 'delete',
+		btnName: '删除',
+	},
+];
+const tableProps = [
+	{
+		prop: 'goodSpecificationName',
+		label: '产品名',
+	},
+	{
+		prop: 'goodSpecificationCode',
+		label: '产品编码',
+	},
+	{
+		prop: 'goodSpecificationName1',
+		label: '产品规格',
+		align: 'center',
+	},
+	{
+		prop: 'quality',
+		label: '品质',
+		align: 'center',
+		filter: codeFilter('quality'),
+	},
+	{
+		prop: 'cureTime',
+		label: '需要熟化时间(小时)',
+		align: 'center',
+	},
+];
+
+const tableProps1 = [
+	{
+		prop: 'number',
+		label: '数量',
+		align: 'center',
+	},
+];
+const processArr = [
+	{
+		name: '开始',
+		id: 0,
+	},
+	{
+		name: '一次分切后',
+		id: 1,
+	},
+	{
+		name: '一次分拣后',
+		id: 2,
+	},
+	{
+		name: '二次分切后',
+		id: 3,
+	},
+	{
+		name: '二次分拣后',
+		id: 4,
+	},
+];
+export default {
+	components: { productAttrAdd, SmallTitle },
+	props: {
+		propType: {
+			type: Number,
+			default: 0,
+		},
+	},
+	data() {
+		return {
+			visible: false,
+			addOrUpdateVisible: false,
+			tableBtn,
+			tableProps,
+			tableProps1,
+			productAttributeList: [],
+			addButtonShow: '新增',
+			processArr,
+			dataForm: {
+				id: null,
+				name: '',
+				code: '',
+				processId: '',
+			},
+			listQuery: {
+				pageSize: 10,
+				pageNo: 1,
+				total: 0,
+			},
+			dataRule: {
+				// name: [
+				// 	{
+				// 		required: true,
+				// 		message: '产品名称不能为空',
+				// 		trigger: 'blur',
+				// 	},
+				// ],
+			},
+			isdetail: false,
+		};
+	},
+	methods: {
+		initData() {
+			this.productAttributeList.splice(0);
+		},
+		init(val, isdetail) {
+      console.log(val)
+      this.dataForm.name = val.warehouseName
+      this.dataForm.code = val.warehouseCode
+      this.dataForm.processId = val.process
+      let id = val.id
+			this.initData();
+			this.isdetail = isdetail || false;
+			this.dataForm.id = id || null;
+			this.visible = true;
+
+			this.$nextTick(() => {
+				this.$refs['dataForm'].resetFields();
+
+				if (this.dataForm.id) {
+					// 获取产品详情
+					// 获取产品的属性列表
+					this.getList();
+				}
+			});
+		},
+
+		getList() {
+			// 获取产品的属性列表
+			const params = {
+				pageSize: 100,
+				pageNo: 1,
+				warehouseStorehouseId: this.dataForm.id,
+			};
+			getWarehouseStorehouseGoodsSpecificationPage(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(() => {
+						deleteWarehouseStorehouseGoodsSpecification(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;
+					}
+				}
+			});
+		},
+		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;
+}
+</style>

src/views/asrs/warehouseStorehouseGoodsSpecification/attr-add.vue

@@ -0,0 +1,134 @@
+<template>
+	<el-dialog
+		:visible.sync="visible"
+		:width="'35%'"
+		:append-to-body="true"
+		:close-on-click-modal="false"
+		class="dialog">
+		<template #title>
+			<slot name="title">
+				<div class="titleStyle">
+					{{ !dataForm.id ? '新增' : '编辑' }}
+				</div>
+			</slot>
+		</template>
+
+		<el-form
+			ref="dataForm"
+			:model="dataForm"
+			:rules="dataRule"
+			label-width="100px"
+			@keyup.enter.native="dataFormSubmit()">
+			<el-form-item label="产品" prop="productId">
+				<el-select
+					v-model="dataForm.productId"
+					style="width: 100%"
+					@change="setProduct"
+					placeholder="请选择产品">
+					<el-option
+						v-for="item in productArr"
+						:key="item.id"
+						:label="item.goodSpecificationName"
+						:value="item.id" />
+				</el-select>
+			</el-form-item>
+		</el-form>
+
+		<el-row style="text-align: right">
+			<el-button @click="visible = false">取消</el-button>
+			<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+		</el-row>
+	</el-dialog>
+</template>
+
+<script>
+import { createWarehouseStorehouseGoodsSpecification } from '@/api/asrs/warehouseStorehouseGoodsSpecification';
+import { getGoodSpecificationPage } from '@/api/asrs/goodSpecification';
+
+export default {
+	props: {
+		warehouseId: {
+			type: String,
+			default: '',
+		},
+	},
+	data() {
+		return {
+			visible: false,
+			dataForm: {
+				id: 0,
+				productId: '',
+				value: '',
+			},
+			productArr: [],
+			dataRule: {
+				productId: [{ required: true, message: '产品不能为空', trigger: 'blur' }],
+			},
+		};
+	},
+	methods: {
+		init(id) {
+			this.dataForm.id = id || '';
+			this.visible = true;
+			this.$nextTick(() => {
+				this.$refs['dataForm'].resetFields();
+				const params = {
+					pageSize: 100,
+					pageNo: 1,
+				};
+				getGoodSpecificationPage(params).then((response) => {
+					this.productArr = response.data.list;
+				});
+			});
+		},
+		setProduct(val) {
+			let data = this.productArr.find((item) => {
+				return (item.id === val);
+			});
+      const { id, ...newData } = data;
+			this.dataForm.value = newData;
+			this.dataForm.value.goodSpecificationId = id;
+		},
+		// 表单提交
+		dataFormSubmit() {
+			this.$refs['dataForm'].validate((valid) => {
+				if (valid) {
+					// 添加的提交
+					createWarehouseStorehouseGoodsSpecification({
+						...this.dataForm.value,
+						warehouseStorehouseId: this.warehouseId,
+					}).then((response) => {
+						this.$modal.msgSuccess('添加成功');
+						this.visible = false;
+						this.$emit('refreshDataList');
+					});
+				}
+			});
+		},
+	},
+};
+</script>
+
+<style scoped>
+.dialog >>> .el-dialog__body {
+	padding: 30px 24px;
+}
+.dialog >>> .el-dialog__header {
+	font-size: 16px;
+	color: rgba(0, 0, 0, 0.85);
+	font-weight: 500;
+	padding: 13px 24px;
+	border-bottom: 1px solid #e9e9e9;
+}
+.dialog >>> .el-dialog__header .titleStyle::before {
+	content: '';
+	display: inline-block;
+	width: 4px;
+	height: 16px;
+	background-color: #0b58ff;
+	border-radius: 1px;
+	margin-right: 8px;
+	position: relative;
+	top: 2px;
+}
+</style>

src/views/asrs/warehouseStorehouseGoodsSpecification/index.vue

@@ -0,0 +1,242 @@
+<template>
+	<div class="app-container">
+		<search-bar
+			:isFold="true"
+			:formConfigs="formConfig"
+			ref="searchBarForm"
+			@headBtnClick="buttonClick" />
+		<el-table
+			:data="tableData"
+			:header-cell-style="{
+				background: '#F2F4F9',
+				color: '#606266',
+			}"
+			border
+			v-loading="dataListLoading"
+			style="width: 100%"
+			ref="dataList">
+			<el-table-column type="expand">
+				<template slot-scope="scope">
+					<product :warehouse-id="scope.row.id"></product>
+				</template>
+			</el-table-column>
+			<el-table-column prop="warehouseName" label="仓库名"></el-table-column>
+			<el-table-column prop="warehouseCode" label="仓库编码"></el-table-column>
+			<el-table-column
+				prop="warehouseStorehouseName"
+				label="库位名"></el-table-column>
+			<el-table-column
+				prop="warehouseStorehouseCode"
+				label="库位编码"></el-table-column>
+			<el-table-column prop="trayCode" label="托盘编码"></el-table-column>
+			<el-table-column prop="process" label="工序">
+				<template slot-scope="scope">
+					<span>
+						{{ scope.row.process>=0 ? processArr[scope.row.process].name : '' }}
+					</span>
+				</template>
+			</el-table-column>
+			<el-table-column prop="cacheLocation" label="缓存库位">
+				<template slot-scope="scope">
+					<span>{{ scope.row.cacheLocation === 0 ? '否' : '是' }}</span>
+				</template>
+			</el-table-column>
+			<el-table-column prop="warehouseStorehouseState" label="仓库状态">
+				<template slot-scope="scope">
+					<span>
+						{{
+							scope.row.warehouseStorehouseState>=0
+								? warehouseStorehouseState[scope.row.warehouseStorehouseState]
+										.name
+								: ''
+						}}
+					</span>
+				</template>
+			</el-table-column>
+			<el-table-column label="操作" align="center">
+				<template v-slot="scope">
+					<el-button
+						size="mini"
+						type="text"
+						@click="handleClick({ data: {id:scope.row}, type: 'edit' })"
+						v-hasPermi="[
+							'asrs:warehouse-storehouse-goods-specification:update',
+						]">
+						编辑
+					</el-button>
+				</template>
+			</el-table-column>
+		</el-table>
+		<pagination
+			:limit.sync="listQuery.pageSize"
+			:page.sync="listQuery.pageNo"
+			:total="listQuery.total"
+			@pagination="getDataList" />
+		<add-or-update
+			v-if="addOrUpdateVisible"
+			ref="addOrUpdate"
+			@refreshDataList="getDataList" />
+	</div>
+</template>
+
+<script>
+import AddOrUpdate from './add-or-updata';
+import product from '../product-mini';
+import basicPage from '../mixins/basic-page';
+import { parseTime } from '../mixins/code-filter';
+import { getWarehouseStorehousePage, } from "@/api/asrs/warehouseStorehouse";
+
+const processArr = [
+	{
+		name: '开始',
+		id: 0,
+	},
+	{
+		name: '一次分切后',
+		id: 1,
+	},
+	{
+		name: '一次分拣后',
+		id: 2,
+	},
+	{
+		name: '二次分切后',
+		id: 3,
+	},
+	{
+		name: '二次分拣后',
+		id: 4,
+	},
+];
+const warehouseStorehouseState = [
+	{
+		name: '空',
+		id: 0,
+	},
+	{
+		name: '锁定',
+		id: 1,
+	},
+	{
+		name: '满',
+		id: 2,
+	},
+];
+export default {
+	mixins: [basicPage],
+	data() {
+		return {
+			urlOptions: {
+				getDataListURL: getWarehouseStorehousePage,
+			},
+			tableData: [],
+			processArr,
+			warehouseStorehouseState,
+			formConfig: [
+				{
+					type: 'input',
+					label: '库位名',
+					placeholder: '库位名',
+					param: 'name',
+				},
+				{
+					type: 'input',
+					label: '库位编码',
+					placeholder: '库位编码',
+					param: 'code',
+				},
+				{
+					type: 'input',
+					label: '产品名',
+					placeholder: '产品名',
+					param: 'pname',
+				},
+				{
+					type: 'input',
+					label: '产品编码',
+					placeholder: '产品编码',
+					param: 'pcode',
+				},
+				{
+					type: 'select',
+					label: '工序',
+					selectOptions: processArr,
+					param: 'processId',
+					defaultSelect: '',
+					filterable: true,
+				},
+				{
+					type: 'select',
+					label: '库位状态',
+					selectOptions: warehouseStorehouseState,
+					param: 'warehouseStorehouseStateId',
+					defaultSelect: '',
+					filterable: true,
+				},
+				{
+					type: 'button',
+					btnName: '搜索',
+					name: 'search',
+					color: 'primary',
+				},
+				// {
+				// 	type: this.$auth.hasPermi('base:factory:create') ? 'separate' : '',
+				// },
+				// {
+				// 	type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
+				// 	btnName: '导出',
+				// 	name: 'export',
+				// 	color: 'warning',
+				// },
+			],
+		};
+	},
+	components: {
+		AddOrUpdate,
+		product,
+	},
+	created() {},
+	methods: {
+		buttonClick(val) {
+			switch (val.btnName) {
+				case 'search':
+					this.listQuery.pageNo = 1;
+					this.listQuery.pageSize = 10;
+					this.listQuery.warehouseStorehouseName = val.name;
+					this.listQuery.warehouseStorehouseCode = val.code;
+					this.listQuery.goodName = val.pname;
+					this.listQuery.goodCode = val.pcode;
+					this.listQuery.process = val.processId;
+					this.listQuery.warehouseStorehouseState = val.warehouseStorehouseStateId;
+					this.getDataList();
+					break;
+				case 'reset':
+					this.$refs.searchBarForm.resetForm();
+					this.listQuery = {
+						pageSize: 10,
+						pageNo: 1,
+						total: 1,
+					};
+					this.getDataList();
+					break;
+				case 'add':
+					this.addOrEditTitle = '新增';
+					this.addOrUpdateVisible = true;
+					this.addOrUpdateHandle();
+					break;
+				case 'export':
+					this.handleExport();
+					break;
+				default:
+					console.log(val);
+			}
+		},
+	},
+};
+</script>
+<style>
+.app-container .el-table .el-table__cell {
+	padding: 0;
+	height: 35px;
+}
+</style>

src/views/asrs/warehouseStorehouseGoodsSpecification/indexb.vue

@@ -0,0 +1,245 @@
+<template>
+	<div class="app-container">
+		<search-bar
+			:isFold="true"
+			:formConfigs="formConfig"
+			ref="searchBarForm"
+			@headBtnClick="buttonClick" />
+		<el-table
+			:data="tableData"
+			:header-cell-style="{
+				background: '#F2F4F9',
+				color: '#606266',
+			}"
+			border
+			v-loading="dataListLoading"
+			style="width: 100%"
+			ref="dataList">
+			<el-table-column type="expand">
+				<template slot-scope="scope">
+					<product :warehouse-id="scope.row.id"></product>
+				</template>
+			</el-table-column>
+			<el-table-column prop="warehouseName" label="仓库名"></el-table-column>
+			<el-table-column prop="warehouseCode" label="仓库编码"></el-table-column>
+			<el-table-column
+				prop="warehouseStorehouseName"
+				label="库位名"></el-table-column>
+			<el-table-column
+				prop="warehouseStorehouseCode"
+				label="库位编码"></el-table-column>
+			<el-table-column prop="trayCode" label="托盘编码"></el-table-column>
+			<el-table-column prop="process" label="工序">
+				<template slot-scope="scope">
+					<span>
+						{{ scope.row.process>=0 ? processArr[scope.row.process].name : '' }}
+					</span>
+				</template>
+			</el-table-column>
+			<el-table-column prop="cacheLocation" label="缓存库位">
+				<template slot-scope="scope">
+					<span>{{ scope.row.cacheLocation === 0 ? '否' : '是' }}</span>
+				</template>
+			</el-table-column>
+			<el-table-column prop="warehouseStorehouseState" label="仓库状态">
+				<template slot-scope="scope">
+					<span>
+						{{
+							scope.row.warehouseStorehouseState>=0
+								? warehouseStorehouseState[scope.row.warehouseStorehouseState]
+										.name
+								: ''
+						}}
+					</span>
+				</template>
+			</el-table-column>
+			<el-table-column label="操作" align="center">
+				<template v-slot="scope">
+					<el-button
+						size="mini"
+						type="text"
+						@click="handleClick({ data: {id:scope.row}, type: 'edit' })"
+						v-hasPermi="[
+							'asrs:warehouse-storehouse-goods-specification:update',
+						]">
+						编辑
+					</el-button>
+				</template>
+			</el-table-column>
+		</el-table>
+		<pagination
+			:limit.sync="listQuery.pageSize"
+			:page.sync="listQuery.pageNo"
+			:total="listQuery.total"
+			@pagination="getDataList" />
+		<add-or-update
+			v-if="addOrUpdateVisible"
+			ref="addOrUpdate"
+			@refreshDataList="getDataList" />
+	</div>
+</template>
+
+<script>
+import AddOrUpdate from './add-or-updata';
+import product from '../product-mini';
+import basicPage from '../mixins/basic-page';
+import { parseTime } from '../mixins/code-filter';
+import { getWarehouseStorehousePage, } from "@/api/asrs/warehouseStorehouse";
+
+const processArr = [
+	{
+		name: '开始',
+		id: 0,
+	},
+	{
+		name: '一次分切后',
+		id: 1,
+	},
+	{
+		name: '一次分拣后',
+		id: 2,
+	},
+	{
+		name: '二次分切后',
+		id: 3,
+	},
+	{
+		name: '二次分拣后',
+		id: 4,
+	},
+];
+const warehouseStorehouseState = [
+	{
+		name: '空',
+		id: 0,
+	},
+	{
+		name: '锁定',
+		id: 1,
+	},
+	{
+		name: '满',
+		id: 2,
+	},
+];
+export default {
+	mixins: [basicPage],
+	data() {
+		return {
+			urlOptions: {
+				getDataListURL: getWarehouseStorehousePage,
+			},
+			tableData: [],
+			processArr,
+			warehouseStorehouseState,
+      bPage: true,
+			formConfig: [
+				{
+					type: 'input',
+					label: '库位名',
+					placeholder: '库位名',
+					param: 'name',
+				},
+				{
+					type: 'input',
+					label: '库位编码',
+					placeholder: '库位编码',
+					param: 'code',
+				},
+				{
+					type: 'input',
+					label: '产品名',
+					placeholder: '产品名',
+					param: 'pname',
+				},
+				{
+					type: 'input',
+					label: '产品编码',
+					placeholder: '产品编码',
+					param: 'pcode',
+				},
+				{
+					type: 'select',
+					label: '工序',
+					selectOptions: processArr,
+					param: 'processId',
+					defaultSelect: '',
+					filterable: true,
+				},
+				{
+					type: 'select',
+					label: '库位状态',
+					selectOptions: warehouseStorehouseState,
+					param: 'warehouseStorehouseStateId',
+					defaultSelect: '',
+					filterable: true,
+				},
+				{
+					type: 'button',
+					btnName: '搜索',
+					name: 'search',
+					color: 'primary',
+				},
+				// {
+				// 	type: this.$auth.hasPermi('base:factory:create') ? 'separate' : '',
+				// },
+				// {
+				// 	type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
+				// 	btnName: '导出',
+				// 	name: 'export',
+				// 	color: 'warning',
+				// },
+			],
+		};
+	},
+	components: {
+		AddOrUpdate,
+		product,
+	},
+	created() {
+		this.listQuery.warehouseId = this.bId;
+  },
+	methods: {
+		buttonClick(val) {
+			switch (val.btnName) {
+				case 'search':
+					this.listQuery.pageNo = 1;
+					this.listQuery.pageSize = 10;
+					this.listQuery.warehouseStorehouseName = val.name;
+					this.listQuery.warehouseStorehouseCode = val.code;
+					this.listQuery.goodName = val.pname;
+					this.listQuery.goodCode = val.pcode;
+					this.listQuery.process = val.processId;
+					this.listQuery.warehouseStorehouseState = val.warehouseStorehouseStateId;
+					this.getDataList();
+					break;
+				case 'reset':
+					this.$refs.searchBarForm.resetForm();
+					this.listQuery = {
+						pageSize: 10,
+						pageNo: 1,
+						total: 1,
+					};
+					this.getDataList();
+					break;
+				case 'add':
+					this.addOrEditTitle = '新增';
+					this.addOrUpdateVisible = true;
+					this.addOrUpdateHandle();
+					break;
+				case 'export':
+					this.handleExport();
+					break;
+				default:
+					console.log(val);
+			}
+		},
+	},
+};
+</script>
+<style>
+.app-container .el-table .el-table__cell {
+	padding: 0;
+	height: 35px;
+}
+</style>

src/views/asrs/warehouseStorehouseStorage/SmallTitle.vue

@@ -0,0 +1,65 @@
+<!--
+ * @Author: zwq
+ * @Date: 2023-08-01 15:27:31
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-08-01 16:25:54
+ * @Description:
+-->
+<template>
+	<div :class="[className, { 'p-0': noPadding }]">
+		<slot />
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		size: {
+			// 取值范围:  xl lg md sm
+			type: String,
+			default: 'de',
+			validator: function (val) {
+				return ['xl', 'lg', 'de', 'md', 'sm'].indexOf(val) !== -1;
+			},
+		},
+		noPadding: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	computed: {
+		className: function () {
+			return `${this.size}-title`;
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+$pxls: (xl, 28px) (lg, 24px) (de, 20px) (md, 18px) (sm, 16px);
+$mgr: 8px;
+@each $size, $height in $pxls {
+	.#{$size}-title {
+		font-size: 18px;
+		line-height: $height;
+		color: #000;
+		font-weight: 500;
+		font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
+
+		&::before {
+			content: '';
+			display: inline-block;
+			vertical-align: top;
+			width: 4px;
+			height: $height + 2px;
+			border-radius: 1px;
+			margin-right: $mgr;
+			background-color: #0b58ff;
+		}
+	}
+}
+
+.p-0 {
+	padding: 0;
+}
+</style>

src/views/asrs/warehouseStorehouseStorage/add-or-updata.vue

@@ -0,0 +1,375 @@
+<template>
+	<el-drawer
+		:visible.sync="visible"
+		:show-close="false"
+		:wrapper-closable="false"
+		class="drawer"
+		size="60%">
+		<small-title slot="title" :no-padding="true">仓库信息</small-title>
+
+		<div class="content">
+			<div class="visual-part">
+				<el-form
+					ref="dataForm"
+					:model="dataForm"
+					:rules="dataRule"
+					label-width="100px"
+					label-position="top"
+					@keyup.enter.native="dataFormSubmit">
+					<el-row :gutter="20">
+						<el-col :span="12">
+							<el-form-item label="仓库编码" prop="code">
+								<el-input
+									v-model="dataForm.code"
+									readonly
+									:disabled="isdetail"
+									placeholder="请输入仓库编码" />
+							</el-form-item>
+						</el-col>
+						<el-col :span="12">
+							<el-form-item label="仓库名" prop="name">
+								<el-input
+									v-model="dataForm.name"
+									readonly
+									:disabled="isdetail"
+									placeholder="请输入仓库名" />
+							</el-form-item>
+						</el-col>
+					</el-row>
+					<el-row :gutter="20">
+						<el-col :span="12">
+							<el-form-item label="工序" prop="processId">
+								<el-select
+									v-model="dataForm.processId"
+									style="width: 100%"
+									:disabled="isdetail"
+									placeholder="请选择工序">
+									<el-option
+										v-for="item in processArr"
+										:key="item.id"
+										:label="item.name"
+										:value="item.id" />
+								</el-select>
+							</el-form-item>
+						</el-col>
+					</el-row>
+				</el-form>
+
+				<small-title
+					style="margin: 16px 0; padding-left: 8px"
+					:no-padding="true">
+					产品信息
+				</small-title>
+
+				<div class="attr-list">
+					<base-table
+						:table-props="
+							propType === 1 ? [...tableProps, ...tableProps1] : tableProps
+						"
+						:page="listQuery.pageNo"
+						:limit="listQuery.pageSize"
+						:add-button-show="addButtonShow"
+						@emitButtonClick="addNew"
+						:table-data="productAttributeList">
+						<method-btn
+							v-if="!isdetail"
+							slot="handleBtn"
+							:width="120"
+							label="操作"
+							:method-list="tableBtn"
+							@clickBtn="handleClick" />
+					</base-table>
+				</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"
+			:warehouse-id="dataForm.id"
+			@refreshDataList="getList" />
+	</el-drawer>
+</template>
+
+<script>
+import {
+	updateProduct,
+} from '@/api/core/base/product';
+
+import {
+	getWarehouseStorehouseGoodsSpecificationPage,
+  deleteWarehouseStorehouseGoodsSpecification,
+} from '@/api/asrs/warehouseStorehouseGoodsSpecification';
+import productAttrAdd from './attr-add';
+import { parseTime } from '../mixins/code-filter';
+import codeFilter from '../mixins/code-filter';
+import SmallTitle from './SmallTitle';
+
+const tableBtn = [
+	{
+		type: 'edit',
+		btnName: '编辑',
+	},
+	{
+		type: 'delete',
+		btnName: '删除',
+	},
+];
+const tableProps = [
+	{
+		prop: 'goodSpecificationName',
+		label: '产品名',
+	},
+	{
+		prop: 'goodSpecificationCode',
+		label: '产品编码',
+	},
+	{
+		prop: 'goodSpecificationName1',
+		label: '产品规格',
+		align: 'center',
+	},
+	{
+		prop: 'number',
+		label: '数量',
+		align: 'center',
+	},
+	{
+		prop: 'quality',
+		label: '品质',
+		align: 'center',
+		filter: codeFilter('quality'),
+	},
+	{
+		prop: 'cureTime',
+		label: '需要熟化时间(小时)',
+		align: 'center',
+	},
+];
+
+const tableProps1 = [
+	{
+		prop: 'number',
+		label: '数量',
+		align: 'center',
+	},
+];
+const processArr = [
+	{
+		name: '开始',
+		id: 0,
+	},
+	{
+		name: '一次分切后',
+		id: 1,
+	},
+	{
+		name: '一次分拣后',
+		id: 2,
+	},
+	{
+		name: '二次分切后',
+		id: 3,
+	},
+	{
+		name: '二次分拣后',
+		id: 4,
+	},
+];
+export default {
+	components: { productAttrAdd, SmallTitle },
+	props: {
+		propType: {
+			type: Number,
+			default: 0,
+		},
+	},
+	data() {
+		return {
+			visible: false,
+			addOrUpdateVisible: false,
+			tableBtn,
+			tableProps,
+			tableProps1,
+			productAttributeList: [],
+			addButtonShow: '新增',
+			processArr,
+			dataForm: {
+				id: null,
+				name: '',
+				code: '',
+				processId: '',
+			},
+			listQuery: {
+				pageSize: 10,
+				pageNo: 1,
+				total: 0,
+			},
+			dataRule: {
+				// name: [
+				// 	{
+				// 		required: true,
+				// 		message: '产品名称不能为空',
+				// 		trigger: 'blur',
+				// 	},
+				// ],
+			},
+			isdetail: false,
+		};
+	},
+	methods: {
+		initData() {
+			this.productAttributeList.splice(0);
+		},
+		init(val, isdetail) {
+      this.dataForm.name = val.warehouseName
+      this.dataForm.code = val.warehouseCode
+      this.dataForm.processId = val.process
+      let id = val.id
+			this.initData();
+			this.isdetail = isdetail || false;
+			this.dataForm.id = id || null;
+			this.visible = true;
+
+			this.$nextTick(() => {
+				this.$refs['dataForm'].resetFields();
+
+				if (this.dataForm.id) {
+					// 获取产品详情
+					// 获取产品的属性列表
+					this.getList();
+				}
+			});
+		},
+
+		getList() {
+			// 获取产品的属性列表
+			const params = {
+				pageSize: 100,
+				pageNo: 1,
+				warehouseStorehouseId: this.dataForm.id,
+			};
+			getWarehouseStorehouseGoodsSpecificationPage(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(() => {
+						deleteWarehouseStorehouseGoodsSpecification(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;
+					}
+				}
+			});
+		},
+		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;
+}
+</style>

src/views/asrs/warehouseStorehouseStorage/attr-add.vue

@@ -0,0 +1,134 @@
+<template>
+	<el-dialog
+		:visible.sync="visible"
+		:width="'35%'"
+		:append-to-body="true"
+		:close-on-click-modal="false"
+		class="dialog">
+		<template #title>
+			<slot name="title">
+				<div class="titleStyle">
+					{{ !dataForm.id ? '新增' : '编辑' }}
+				</div>
+			</slot>
+		</template>
+
+		<el-form
+			ref="dataForm"
+			:model="dataForm"
+			:rules="dataRule"
+			label-width="100px"
+			@keyup.enter.native="dataFormSubmit()">
+			<el-form-item label="产品" prop="productId">
+				<el-select
+					v-model="dataForm.productId"
+					style="width: 100%"
+					@change="setProduct"
+					placeholder="请选择产品">
+					<el-option
+						v-for="item in productArr"
+						:key="item.id"
+						:label="item.goodSpecificationName"
+						:value="item.id" />
+				</el-select>
+			</el-form-item>
+		</el-form>
+
+		<el-row style="text-align: right">
+			<el-button @click="visible = false">取消</el-button>
+			<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+		</el-row>
+	</el-dialog>
+</template>
+
+<script>
+import { createWarehouseStorehouseGoodsSpecification } from '@/api/asrs/warehouseStorehouseGoodsSpecification';
+import { getGoodSpecificationPage } from '@/api/asrs/goodSpecification';
+
+export default {
+	props: {
+		warehouseId: {
+			type: String,
+			default: '',
+		},
+	},
+	data() {
+		return {
+			visible: false,
+			dataForm: {
+				id: 0,
+				productId: '',
+				value: '',
+			},
+			productArr: [],
+			dataRule: {
+				productId: [{ required: true, message: '产品不能为空', trigger: 'blur' }],
+			},
+		};
+	},
+	methods: {
+		init(id) {
+			this.dataForm.id = id || '';
+			this.visible = true;
+			this.$nextTick(() => {
+				this.$refs['dataForm'].resetFields();
+				const params = {
+					pageSize: 100,
+					pageNo: 1,
+				};
+				getGoodSpecificationPage(params).then((response) => {
+					this.productArr = response.data.list;
+				});
+			});
+		},
+		setProduct(val) {
+			let data = this.productArr.find((item) => {
+				return (item.id === val);
+			});
+      const { id, ...newData } = data;
+			this.dataForm.value = newData;
+			this.dataForm.value.goodSpecificationId = id;
+		},
+		// 表单提交
+		dataFormSubmit() {
+			this.$refs['dataForm'].validate((valid) => {
+				if (valid) {
+					// 添加的提交
+					createWarehouseStorehouseGoodsSpecification({
+						...this.dataForm.value,
+						warehouseStorehouseId: this.warehouseId,
+					}).then((response) => {
+						this.$modal.msgSuccess('添加成功');
+						this.visible = false;
+						this.$emit('refreshDataList');
+					});
+				}
+			});
+		},
+	},
+};
+</script>
+
+<style scoped>
+.dialog >>> .el-dialog__body {
+	padding: 30px 24px;
+}
+.dialog >>> .el-dialog__header {
+	font-size: 16px;
+	color: rgba(0, 0, 0, 0.85);
+	font-weight: 500;
+	padding: 13px 24px;
+	border-bottom: 1px solid #e9e9e9;
+}
+.dialog >>> .el-dialog__header .titleStyle::before {
+	content: '';
+	display: inline-block;
+	width: 4px;
+	height: 16px;
+	background-color: #0b58ff;
+	border-radius: 1px;
+	margin-right: 8px;
+	position: relative;
+	top: 2px;
+}
+</style>

src/views/asrs/warehouseStorehouseStorage/index.vue

@@ -0,0 +1,307 @@
+<template>
+	<div class="app-container">
+		<search-bar
+			:isFold="true"
+			:formConfigs="formConfig"
+			ref="searchBarForm"
+			@headBtnClick="buttonClick" />
+		<el-table
+			:data="tableData"
+			:header-cell-style="{
+				background: '#F2F4F9',
+				color: '#606266',
+			}"
+			border
+			v-loading="dataListLoading"
+			style="width: 100%"
+			ref="dataList">
+			<el-table-column type="expand">
+				<template slot-scope="scope">
+					<product :warehouse-id="scope.row.id" :prop-type="2"></product>
+				</template>
+			</el-table-column>
+			<el-table-column prop="warehouseName" label="仓库名"></el-table-column>
+			<el-table-column prop="warehouseCode" label="仓库编码"></el-table-column>
+			<el-table-column
+				prop="warehouseStorehouseName"
+				label="库位名"></el-table-column>
+			<el-table-column
+				prop="warehouseStorehouseCode"
+				label="库位编码"></el-table-column>
+			<el-table-column prop="trayCode" label="托盘编码"></el-table-column>
+			<el-table-column prop="process" label="工序">
+				<template slot-scope="scope">
+					<span>
+						{{
+							scope.row.process >= 0 ? processArr[scope.row.process].name : ''
+						}}
+					</span>
+				</template>
+			</el-table-column>
+			<el-table-column prop="cacheLocation" label="缓存库位">
+				<template slot-scope="scope">
+					<span>{{ scope.row.cacheLocation === 0 ? '否' : '是' }}</span>
+				</template>
+			</el-table-column>
+			<el-table-column prop="warehouseStorehouseState" label="仓库状态">
+				<template slot-scope="scope">
+					<span>
+						{{
+							scope.row.warehouseStorehouseState >= 0
+								? warehouseStorehouseState[scope.row.warehouseStorehouseState]
+										.name
+								: ''
+						}}
+					</span>
+				</template>
+			</el-table-column>
+			<el-table-column label="操作" align="center">
+				<template v-slot="scope">
+					<el-button
+						size="mini"
+						v-if="scope.row.warehouseStorehouseState === 0"
+						type="text"
+						@click="handleClick({ data: { id: scope.row }, type: 'in' })"
+						v-hasPermi="['asrs:warehouse-storehouse-storage:update']">
+						入库
+					</el-button>
+					<el-button
+						size="mini"
+						v-else-if="scope.row.warehouseStorehouseState === 1"
+						type="text"
+						@click="handleClick({ data: scope.row, type: 'out' })"
+						v-hasPermi="['asrs:warehouse-storehouse-storage:update']">
+						出库
+					</el-button>
+					<el-button
+						size="mini"
+						v-else-if="scope.row.warehouseStorehouseState === 2"
+						type="text"
+						@click="handleClick({ data: scope.row, type: 'move' })"
+						v-hasPermi="['asrs:warehouse-storehouse-storage:update']">
+						移库
+					</el-button>
+				</template>
+			</el-table-column>
+		</el-table>
+		<pagination
+			:limit.sync="listQuery.pageSize"
+			:page.sync="listQuery.pageNo"
+			:total="listQuery.total"
+			@pagination="getDataList" />
+		<add-or-update
+			v-if="drawerVisible"
+			ref="drawerRef"
+			:prop-type="2"
+			@refreshDataList="getDataList" />
+		<base-dialog
+			:dialogTitle="addOrEditTitle"
+			:dialogVisible="addOrUpdateVisible"
+			@cancel="handleCancel"
+			@confirm="handleConfirm"
+			:before-close="handleCancel"
+			width="50%">
+			<out-or-move
+				ref="addOrUpdate"
+				@refreshDataList="successSubmit"></out-or-move>
+		</base-dialog>
+	</div>
+</template>
+
+<script>
+import AddOrUpdate from './add-or-updata';
+import outOrMove from './out-or-move';
+import product from '../product-mini';
+import basicPage from '../mixins/basic-page';
+import { parseTime } from '../mixins/code-filter';
+
+import { getWarehouseStorehousePage } from '@/api/asrs/warehouseStorehouse';
+
+const processArr = [
+	{
+		name: '开始',
+		id: 0,
+	},
+	{
+		name: '一次分切后',
+		id: 1,
+	},
+	{
+		name: '一次分拣后',
+		id: 2,
+	},
+	{
+		name: '二次分切后',
+		id: 3,
+	},
+	{
+		name: '二次分拣后',
+		id: 4,
+	},
+];
+const warehouseStorehouseState = [
+	{
+		name: '空',
+		id: 0,
+	},
+	{
+		name: '锁定',
+		id: 1,
+	},
+	{
+		name: '满',
+		id: 2,
+	},
+];
+export default {
+	mixins: [basicPage],
+	data() {
+		return {
+			urlOptions: {
+				getDataListURL: getWarehouseStorehousePage,
+			},
+			tableData: [],
+			processArr,
+			drawerVisible: false,
+			warehouseStorehouseState,
+			formConfig: [
+				{
+					type: 'input',
+					label: '库位名',
+					placeholder: '库位名',
+					param: 'name',
+				},
+				{
+					type: 'input',
+					label: '库位编码',
+					placeholder: '库位编码',
+					param: 'code',
+				},
+				{
+					type: 'input',
+					label: '产品名',
+					placeholder: '产品名',
+					param: 'pname',
+				},
+				{
+					type: 'input',
+					label: '产品编码',
+					placeholder: '产品编码',
+					param: 'pcode',
+				},
+				{
+					type: 'select',
+					label: '工序',
+					selectOptions: processArr,
+					param: 'processId',
+					defaultSelect: '',
+					filterable: true,
+				},
+				{
+					type: 'select',
+					label: '库位状态',
+					selectOptions: warehouseStorehouseState,
+					param: 'warehouseStorehouseStateId',
+					defaultSelect: '',
+					filterable: true,
+				},
+				{
+					type: 'button',
+					btnName: '搜索',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: 'button',
+					btnName: '重置',
+					name: 'reset',
+				},
+				// {
+				// 	type: this.$auth.hasPermi('base:factory:create') ? 'separate' : '',
+				// },
+				// {
+				// 	type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
+				// 	btnName: '导出',
+				// 	name: 'export',
+				// 	color: 'warning',
+				// },
+			],
+		};
+	},
+	components: {
+		AddOrUpdate,
+		product,
+		outOrMove,
+	},
+	created() {},
+	methods: {
+		buttonClick(val) {
+			switch (val.btnName) {
+				case 'search':
+					this.listQuery.pageNo = 1;
+					this.listQuery.pageSize = 10;
+					this.listQuery.warehouseStorehouseName = val.name;
+					this.listQuery.warehouseStorehouseCode = val.code;
+					this.listQuery.goodName = val.pname;
+					this.listQuery.goodCode = val.pcode;
+					this.listQuery.process = val.processId;
+					this.listQuery.warehouseStorehouseState =
+						val.warehouseStorehouseStateId;
+					this.getDataList();
+					break;
+				case 'reset':
+					this.$refs.searchBarForm.resetForm();
+					this.listQuery = {
+						pageSize: 10,
+						pageNo: 1,
+						total: 1,
+					};
+					this.getDataList();
+					break;
+				case 'add':
+					this.drawerVisible = true;
+					this.$nextTick(() => {
+						this.$refs.drawerRef.init(id);
+					});
+					break;
+				case 'export':
+					this.handleExport();
+					break;
+				default:
+					console.log(val);
+			}
+		},
+		otherMethods(val) {
+			if (val.type === 'out') {
+				this.addOrUpdateVisible = true;
+				this.addOrEditTitle = '出库';
+				this.$nextTick(() => {
+					this.$refs.addOrUpdate.init(val.data.id, 0);
+				});
+			} else if (val.type === 'move') {
+				this.addOrUpdateVisible = true;
+				this.addOrEditTitle = '移库';
+				this.$nextTick(() => {
+					this.$refs.addOrUpdate.init(val.data.id, 1);
+				});
+			} else if (val.type === 'in') {
+				this.drawerVisible = true;
+				this.$nextTick(() => {
+					this.$refs.drawerRef.init(val.data.id);
+				});
+			} else {
+				console.log(11);
+			}
+		},
+	},
+};
+</script>
+<style>
+.app-container .el-table .el-table__cell {
+	padding: 0;
+	height: 35px;
+}
+</style>

src/views/asrs/warehouseStorehouseStorage/indexb.vue

@@ -0,0 +1,310 @@
+<template>
+	<div class="app-container">
+		<search-bar
+			:isFold="true"
+			:formConfigs="formConfig"
+			ref="searchBarForm"
+			@headBtnClick="buttonClick" />
+		<el-table
+			:data="tableData"
+			:header-cell-style="{
+				background: '#F2F4F9',
+				color: '#606266',
+			}"
+			border
+			v-loading="dataListLoading"
+			style="width: 100%"
+			ref="dataList">
+			<el-table-column type="expand">
+				<template slot-scope="scope">
+					<product :warehouse-id="scope.row.id" :prop-type="2"></product>
+				</template>
+			</el-table-column>
+			<el-table-column prop="warehouseName" label="仓库名"></el-table-column>
+			<el-table-column prop="warehouseCode" label="仓库编码"></el-table-column>
+			<el-table-column
+				prop="warehouseStorehouseName"
+				label="库位名"></el-table-column>
+			<el-table-column
+				prop="warehouseStorehouseCode"
+				label="库位编码"></el-table-column>
+			<el-table-column prop="trayCode" label="托盘编码"></el-table-column>
+			<el-table-column prop="process" label="工序">
+				<template slot-scope="scope">
+					<span>
+						{{
+							scope.row.process >= 0 ? processArr[scope.row.process].name : ''
+						}}
+					</span>
+				</template>
+			</el-table-column>
+			<el-table-column prop="cacheLocation" label="缓存库位">
+				<template slot-scope="scope">
+					<span>{{ scope.row.cacheLocation === 0 ? '否' : '是' }}</span>
+				</template>
+			</el-table-column>
+			<el-table-column prop="warehouseStorehouseState" label="仓库状态">
+				<template slot-scope="scope">
+					<span>
+						{{
+							scope.row.warehouseStorehouseState >= 0
+								? warehouseStorehouseState[scope.row.warehouseStorehouseState]
+										.name
+								: ''
+						}}
+					</span>
+				</template>
+			</el-table-column>
+			<el-table-column label="操作" align="center">
+				<template v-slot="scope">
+					<el-button
+						size="mini"
+						v-if="scope.row.warehouseStorehouseState === 0"
+						type="text"
+						@click="handleClick({ data: { id: scope.row }, type: 'in' })"
+						v-hasPermi="['asrs:warehouse-storehouse-storage:update']">
+						入库
+					</el-button>
+					<el-button
+						size="mini"
+						v-else-if="scope.row.warehouseStorehouseState === 1"
+						type="text"
+						@click="handleClick({ data: scope.row, type: 'out' })"
+						v-hasPermi="['asrs:warehouse-storehouse-storage:update']">
+						出库
+					</el-button>
+					<el-button
+						size="mini"
+						v-else-if="scope.row.warehouseStorehouseState === 2"
+						type="text"
+						@click="handleClick({ data: scope.row, type: 'move' })"
+						v-hasPermi="['asrs:warehouse-storehouse-storage:update']">
+						移库
+					</el-button>
+				</template>
+			</el-table-column>
+		</el-table>
+		<pagination
+			:limit.sync="listQuery.pageSize"
+			:page.sync="listQuery.pageNo"
+			:total="listQuery.total"
+			@pagination="getDataList" />
+		<add-or-update
+			v-if="drawerVisible"
+			ref="drawerRef"
+			:prop-type="2"
+			@refreshDataList="getDataList" />
+		<base-dialog
+			:dialogTitle="addOrEditTitle"
+			:dialogVisible="addOrUpdateVisible"
+			@cancel="handleCancel"
+			@confirm="handleConfirm"
+			:before-close="handleCancel"
+			width="50%">
+			<out-or-move
+				ref="addOrUpdate"
+				@refreshDataList="successSubmit"></out-or-move>
+		</base-dialog>
+	</div>
+</template>
+
+<script>
+import AddOrUpdate from './add-or-updata';
+import outOrMove from './out-or-move';
+import product from '../product-mini';
+import basicPage from '../mixins/basic-page';
+import { parseTime } from '../mixins/code-filter';
+
+import { getWarehouseStorehousePage } from '@/api/asrs/warehouseStorehouse';
+
+const processArr = [
+	{
+		name: '开始',
+		id: 0,
+	},
+	{
+		name: '一次分切后',
+		id: 1,
+	},
+	{
+		name: '一次分拣后',
+		id: 2,
+	},
+	{
+		name: '二次分切后',
+		id: 3,
+	},
+	{
+		name: '二次分拣后',
+		id: 4,
+	},
+];
+const warehouseStorehouseState = [
+	{
+		name: '空',
+		id: 0,
+	},
+	{
+		name: '锁定',
+		id: 1,
+	},
+	{
+		name: '满',
+		id: 2,
+	},
+];
+export default {
+	mixins: [basicPage],
+	data() {
+		return {
+			urlOptions: {
+				getDataListURL: getWarehouseStorehousePage,
+			},
+			tableData: [],
+			processArr,
+			drawerVisible: false,
+      bPage: true,
+			warehouseStorehouseState,
+			formConfig: [
+				{
+					type: 'input',
+					label: '库位名',
+					placeholder: '库位名',
+					param: 'name',
+				},
+				{
+					type: 'input',
+					label: '库位编码',
+					placeholder: '库位编码',
+					param: 'code',
+				},
+				{
+					type: 'input',
+					label: '产品名',
+					placeholder: '产品名',
+					param: 'pname',
+				},
+				{
+					type: 'input',
+					label: '产品编码',
+					placeholder: '产品编码',
+					param: 'pcode',
+				},
+				{
+					type: 'select',
+					label: '工序',
+					selectOptions: processArr,
+					param: 'processId',
+					defaultSelect: '',
+					filterable: true,
+				},
+				{
+					type: 'select',
+					label: '库位状态',
+					selectOptions: warehouseStorehouseState,
+					param: 'warehouseStorehouseStateId',
+					defaultSelect: '',
+					filterable: true,
+				},
+				{
+					type: 'button',
+					btnName: '搜索',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: 'button',
+					btnName: '重置',
+					name: 'reset',
+				},
+				// {
+				// 	type: this.$auth.hasPermi('base:factory:create') ? 'separate' : '',
+				// },
+				// {
+				// 	type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
+				// 	btnName: '导出',
+				// 	name: 'export',
+				// 	color: 'warning',
+				// },
+			],
+		};
+	},
+	components: {
+		AddOrUpdate,
+		product,
+		outOrMove,
+	},
+	created() {
+		this.listQuery.warehouseId = this.bId;
+  },
+	methods: {
+		buttonClick(val) {
+			switch (val.btnName) {
+				case 'search':
+					this.listQuery.pageNo = 1;
+					this.listQuery.pageSize = 10;
+					this.listQuery.warehouseStorehouseName = val.name;
+					this.listQuery.warehouseStorehouseCode = val.code;
+					this.listQuery.goodName = val.pname;
+					this.listQuery.goodCode = val.pcode;
+					this.listQuery.process = val.processId;
+					this.listQuery.warehouseStorehouseState =
+						val.warehouseStorehouseStateId;
+					this.getDataList();
+					break;
+				case 'reset':
+					this.$refs.searchBarForm.resetForm();
+					this.listQuery = {
+						pageSize: 10,
+						pageNo: 1,
+						total: 1,
+					};
+					this.getDataList();
+					break;
+				case 'add':
+					this.drawerVisible = true;
+					this.$nextTick(() => {
+						this.$refs.drawerRef.init(id);
+					});
+					break;
+				case 'export':
+					this.handleExport();
+					break;
+				default:
+					console.log(val);
+			}
+		},
+		otherMethods(val) {
+			if (val.type === 'out') {
+				this.addOrUpdateVisible = true;
+				this.addOrEditTitle = '出库';
+				this.$nextTick(() => {
+					this.$refs.addOrUpdate.init(val.data.id, 0);
+				});
+			} else if (val.type === 'move') {
+				this.addOrUpdateVisible = true;
+				this.addOrEditTitle = '移库';
+				this.$nextTick(() => {
+					this.$refs.addOrUpdate.init(val.data.id, 1);
+				});
+			} else if (val.type === 'in') {
+				this.drawerVisible = true;
+				this.$nextTick(() => {
+					this.$refs.drawerRef.init(val.data.id);
+				});
+			} else {
+				console.log(11);
+			}
+		},
+	},
+};
+</script>
+<style>
+.app-container .el-table .el-table__cell {
+	padding: 0;
+	height: 35px;
+}
+</style>

src/views/asrs/warehouseStorehouseStorage/out-or-move.vue

@@ -0,0 +1,82 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-11-18 14:16:25
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-09-04 15:47:46
+ * @Description:
+-->
+<template>
+	<el-form
+		:model="dataForm"
+		:rules="dataRule"
+		ref="dataForm"
+		@keyup.enter.native="dataFormSubmit()"
+		label-width="150px">
+		<el-form-item :label="type?'选择移库位置':'选择出库到货位置'" prop="targetId">
+				<el-select
+					v-model="dataForm.targetId"
+					style="width: 100%"
+					placeholder="请选择位置">
+					<el-option
+						v-for="item in potArr"
+						:key="item.id"
+						:label="item.warehouseName"
+						:value="item.id" />
+				</el-select>
+		</el-form-item>
+	</el-form>
+</template>
+
+<script>
+import basicAdd from '../mixins/basic-add';
+import { getWarehouseStorehousePage,moveStorehouse } from "@/api/asrs/warehouseStorehouse";
+
+export default {
+	mixins: [basicAdd],
+	data() {
+		return {
+			urlOptions: {
+			},
+			dataForm: {
+        sourceId: undefined,
+        targetId: undefined,
+			},
+      potArr: [],
+      type: 0,
+			dataRule: {
+        targetId: [{ required: true, message: "位置不能为空", trigger: "blur" }],
+      }
+		};
+	},
+	methods: {
+    init(id,type) {
+      this.dataForm.sourceId = id || "";
+      this.type = type
+      this.visible = true;
+      this.$nextTick(() => {
+        this.$refs["dataForm"].resetFields();
+			const params = {
+				pageSize: 100,
+				pageNo: 1,
+			};
+			getWarehouseStorehousePage(params).then((response) => {
+				this.potArr = response.data.list;
+			});
+      });
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs["dataForm"].validate((valid) => {
+        if (!valid) {
+          return false;
+        }
+        moveStorehouse(this.dataForm.sourceId,this.dataForm.targetId).then(response => {
+            this.$modal.msgSuccess("修改成功");
+            this.visible = false;
+            this.$emit("refreshDataList");
+          });
+      });
+    },
+	},
+};
+</script>

src/views/asrs/warehouseStorehouseStorageHistory/index.vue

@@ -0,0 +1,192 @@
+<template>
+	<div class="app-container">
+		<search-bar
+			:isFold="true"
+			:formConfigs="formConfig"
+			ref="searchBarForm"
+			@headBtnClick="buttonClick" />
+		<el-table
+			:data="tableData"
+			:header-cell-style="{
+				background: '#F2F4F9',
+				color: '#606266',
+			}"
+			border
+			v-loading="dataListLoading"
+			style="width: 100%"
+			ref="dataList">
+			<el-table-column type="expand">
+				<template slot-scope="scope">
+					<product :warehouse-id="scope.row.id" :prop-type="3"></product>
+				</template>
+			</el-table-column>
+			<el-table-column prop="warehouseName" label="仓库名"></el-table-column>
+			<el-table-column prop="warehouseCode" label="仓库编码"></el-table-column>
+			<el-table-column
+				prop="warehouseStorehouseName"
+				label="库位名"></el-table-column>
+			<el-table-column
+				prop="warehouseStorehouseCode"
+				label="库位编码"></el-table-column>
+			<el-table-column prop="trayCode" label="托盘编码"></el-table-column>
+			<el-table-column prop="createDate" label="出入库时间">
+				<template v-slot="scope">
+					<span>{{ parseTime(scope.row.createDate) }}</span>
+				</template>
+			</el-table-column>
+			<el-table-column
+				prop="warehouseStorehouseStorageState"
+				label="出入库状态">
+				<template slot-scope="scope">
+					<span>
+						{{
+							scope.row.warehouseStorehouseStorageState >= 0
+								? warehouseStorehouseStorageState[
+										scope.row.warehouseStorehouseStorageState
+								  ].name
+								: ''
+						}}
+					</span>
+				</template>
+			</el-table-column>
+		</el-table>
+		<pagination
+			:limit.sync="listQuery.pageSize"
+			:page.sync="listQuery.pageNo"
+			:total="listQuery.total"
+			@pagination="getDataList" />
+	</div>
+</template>
+
+<script>
+import product from '../product-mini';
+import basicPage from '../mixins/basic-page';
+import { getWarehouseStorehouseStoragePage } from '@/api/asrs/warehouseStorehouseStorage';
+const warehouseStorehouseStorageState = [
+	{
+		name: '入库',
+		id: 0,
+	},
+	{
+		name: '出库',
+		id: 1,
+	},
+	{
+		name: '移库',
+		id: 2,
+	},
+];
+export default {
+	mixins: [basicPage],
+	data() {
+		return {
+			urlOptions: {
+				getDataListURL: getWarehouseStorehouseStoragePage,
+			},
+			tableData: [],
+			warehouseStorehouseStorageState,
+			formConfig: [
+				{
+					type: 'input',
+					label: '仓库名',
+					placeholder: '仓库名',
+					param: 'name',
+				},
+				{
+					type: 'input',
+					label: '库位编码',
+					placeholder: '库位编码',
+					param: 'kcode',
+				},
+				{
+					type: 'input',
+					label: '托盘编码',
+					placeholder: '托盘编码',
+					param: 'tcode',
+				},
+				{
+					type: 'select',
+					label: '库位状态',
+					selectOptions: warehouseStorehouseStorageState,
+					param: 'warehouseStorehouseStateId',
+					defaultSelect: '',
+					filterable: true,
+				},
+				{
+					type: 'datePicker',
+					label: '出入库时间',
+					dateType: 'daterange',
+					format: 'yyyy-MM-dd',
+					valueFormat: 'yyyy-MM-dd',
+					rangeSeparator: '-',
+					startPlaceholder: '开始时间',
+					endPlaceholder: '结束时间',
+					param: 'searchTime',
+				},
+				{
+					type: 'button',
+					btnName: '搜索',
+					name: 'search',
+					color: 'primary',
+				},
+				// {
+				// 	type: this.$auth.hasPermi('base:factory:create') ? 'separate' : '',
+				// },
+				// {
+				// 	type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
+				// 	btnName: '导出',
+				// 	name: 'export',
+				// 	color: 'warning',
+				// },
+			],
+		};
+	},
+	components: {
+		product,
+	},
+	created() {},
+	methods: {
+		buttonClick(val) {
+			switch (val.btnName) {
+				case 'search':
+					this.listQuery.pageNo = 1;
+					this.listQuery.pageSize = 10;
+					this.listQuery.warehouseStorehouseName = val.name;
+					this.listQuery.warehouseStorehouseCode = val.kcode;
+					this.listQuery.trayCode = val.tcode;
+					this.listQuery.warehouseStorehouseStorageState =
+						val.warehouseStorehouseStorageStateId;
+					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : '';
+					this.listQuery.endTime = val.searchTime ? val.searchTime[1] : '';
+					this.getDataList();
+					break;
+				case 'reset':
+					this.$refs.searchBarForm.resetForm();
+					this.listQuery = {
+						pageSize: 10,
+						pageNo: 1,
+						total: 1,
+					};
+					this.getDataList();
+					break;
+				case 'add':
+					this.addOrEditTitle = '新增';
+					this.addOrUpdateVisible = true;
+					this.addOrUpdateHandle();
+					break;
+				case 'export':
+					this.handleExport();
+					break;
+				default:
+					console.log(val);
+			}
+		},
+	},
+};
+</script>
+<style>
+.app-container .el-table .el-table__cell {
+	padding: 0;
+	height: 35px;
+}
+</style>

src/views/asrs/warehouseStorehouseStorageHistory/indexb.vue

@@ -0,0 +1,191 @@
+<template>
+	<div class="app-container">
+		<search-bar
+			:isFold="true"
+			:formConfigs="formConfig"
+			ref="searchBarForm"
+			@headBtnClick="buttonClick" />
+		<el-table
+			:data="tableData"
+			:header-cell-style="{
+				background: '#F2F4F9',
+				color: '#606266',
+			}"
+			border
+			v-loading="dataListLoading"
+			style="width: 100%"
+			ref="dataList">
+			<el-table-column type="expand">
+				<template slot-scope="scope">
+					<product :warehouse-id="scope.row.id" :prop-type="3"></product>
+				</template>
+			</el-table-column>
+			<el-table-column prop="warehouseName" label="仓库名"></el-table-column>
+			<el-table-column prop="warehouseCode" label="仓库编码"></el-table-column>
+			<el-table-column
+				prop="warehouseStorehouseName"
+				label="库位名"></el-table-column>
+			<el-table-column
+				prop="warehouseStorehouseCode"
+				label="库位编码"></el-table-column>
+			<el-table-column prop="trayCode" label="托盘编码"></el-table-column>
+			<el-table-column prop="createDate" label="出入库时间">
+				<template v-slot="scope">
+					<span>{{ parseTime(scope.row.createDate) }}</span>
+				</template>
+			</el-table-column>
+			<el-table-column
+				prop="warehouseStorehouseStorageState"
+				label="出入库状态">
+				<template slot-scope="scope">
+					<span>
+						{{
+							scope.row.warehouseStorehouseStorageState >= 0
+								? warehouseStorehouseStorageState[
+										scope.row.warehouseStorehouseStorageState
+								  ].name
+								: ''
+						}}
+					</span>
+				</template>
+			</el-table-column>
+		</el-table>
+		<pagination
+			:limit.sync="listQuery.pageSize"
+			:page.sync="listQuery.pageNo"
+			:total="listQuery.total"
+			@pagination="getDataList" />
+	</div>
+</template>
+
+<script>
+import product from '../product-mini';
+import basicPage from '../mixins/basic-page';
+import { getWarehouseStorehouseStoragePage, } from "@/api/asrs/warehouseStorehouseStorage";
+const warehouseStorehouseStorageState = [
+	{
+		name: '入库',
+		id: 0,
+	},
+	{
+		name: '出库',
+		id: 1,
+	},
+	{
+		name: '移库',
+		id: 2,
+	},
+];
+export default {
+	mixins: [basicPage],
+	data() {
+		return {
+			urlOptions: {
+				getDataListURL: getWarehouseStorehouseStoragePage,
+			},
+			tableData: [],
+			warehouseStorehouseStorageState,
+			formConfig: [
+				{
+					type: 'input',
+					label: '仓库名',
+					placeholder: '仓库名',
+					param: 'name',
+				},
+				{
+					type: 'input',
+					label: '库位编码',
+					placeholder: '库位编码',
+					param: 'kcode',
+				},
+				{
+					type: 'input',
+					label: '托盘编码',
+					placeholder: '托盘编码',
+					param: 'tcode',
+				},
+				{
+					type: 'select',
+					label: '库位状态',
+					selectOptions: warehouseStorehouseStorageState,
+					param: 'warehouseStorehouseStateId',
+					defaultSelect: '',
+					filterable: true,
+				},
+				{
+					type: 'datePicker',
+					label: '出入库时间',
+					dateType: 'daterange',
+					format: 'yyyy-MM-dd',
+					valueFormat: 'yyyy-MM-dd',
+					rangeSeparator: '-',
+					startPlaceholder: '开始时间',
+					endPlaceholder: '结束时间',
+					param: 'searchTime2',
+				},
+				{
+					type: 'button',
+					btnName: '搜索',
+					name: 'search',
+					color: 'primary',
+				},
+				// {
+				// 	type: this.$auth.hasPermi('base:factory:create') ? 'separate' : '',
+				// },
+				// {
+				// 	type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
+				// 	btnName: '导出',
+				// 	name: 'export',
+				// 	color: 'warning',
+				// },
+			],
+		};
+	},
+	components: {
+		product,
+	},
+	created() {
+		this.listQuery.warehouseId = this.bId;
+  },
+	methods: {
+		buttonClick(val) {
+			switch (val.btnName) {
+				case 'search':
+					this.listQuery.pageNo = 1;
+					this.listQuery.pageSize = 10;
+					this.listQuery.warehouseStorehouseName = val.name;
+					this.listQuery.warehouseStorehouseCode = val.kcode;
+					this.listQuery.trayCode = val.tcode;
+					this.listQuery.warehouseStorehouseStorageState = val.warehouseStorehouseStorageStateId;
+					this.getDataList();
+					break;
+				case 'reset':
+					this.$refs.searchBarForm.resetForm();
+					this.listQuery = {
+						pageSize: 10,
+						pageNo: 1,
+						total: 1,
+					};
+					this.getDataList();
+					break;
+				case 'add':
+					this.addOrEditTitle = '新增';
+					this.addOrUpdateVisible = true;
+					this.addOrUpdateHandle();
+					break;
+				case 'export':
+					this.handleExport();
+					break;
+				default:
+					console.log(val);
+			}
+		},
+	},
+};
+</script>
+<style>
+.app-container .el-table .el-table__cell {
+	padding: 0;
+	height: 35px;
+}
+</style>

src/views/bpm/definition/index.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="app-container">
+    <doc-alert title="工作流" url="https://doc.iocoder.cn/bpm" />
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="定义编号" align="center" prop="id" width="400" />
+      <el-table-column label="定义名称" align="center" prop="name" width="100">
+        <template v-slot="scope">
+          <el-button type="text" @click="handleBpmnDetail(scope.row)">
+            <span>{{ scope.row.name }}</span>
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column label="定义分类" align="center" prop="category" width="100">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="scope.row.category" />
+        </template>
+      </el-table-column>
+      <el-table-column label="表单信息" align="center" prop="formType" width="200">
+        <template v-slot="scope">
+          <el-button v-if="scope.row.formId" type="text" @click="handleFormDetail(scope.row)">
+            <span>{{ scope.row.formName }}</span>
+          </el-button>
+          <el-button v-else-if="scope.row.formCustomCreatePath" type="text" @click="handleFormDetail(scope.row)">
+            <span>{{ scope.row.formCustomCreatePath }}</span>
+          </el-button>
+          <label v-else>暂无表单</label>
+        </template>
+      </el-table-column>
+      <el-table-column label="流程版本" align="center" prop="processDefinition.version" width="80">
+        <template v-slot="scope">
+          <el-tag size="medium" v-if="scope.row">v{{ scope.row.version }}</el-tag>
+          <el-tag size="medium" type="warning" v-else>未部署</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" align="center" prop="version" width="80">
+        <template v-slot="scope">
+            <el-tag type="success" v-if="scope.row.suspensionState === 1">激活</el-tag>
+            <el-tag type="warning" v-if="scope.row.suspensionState === 2">挂起</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="部署时间" align="center" prop="deploymentTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.deploymentTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="定义描述" align="center" prop="description" width="300" show-overflow-tooltip />
+      <el-table-column label="操作" align="center" width="150" fixed="right">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-s-custom" @click="handleAssignRule(scope.row)"
+                     v-hasPermi="['bpm:task-assign-rule:update']">分配规则</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 流程表单配置详情 -->
+    <el-dialog title="表单详情" :visible.sync="detailOpen" width="50%" append-to-body>
+      <parser :key="new Date().getTime()" :form-conf="detailForm" />
+    </el-dialog>
+
+    <!-- 流程模型图的预览 -->
+    <el-dialog title="流程图" :visible.sync="showBpmnOpen" width="80%" append-to-body>
+      <my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" />
+    </el-dialog>
+
+    <!-- 分页组件 -->
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!-- ========== 流程任务分配规则 ========== -->
+    <taskAssignRuleDialog ref="taskAssignRuleDialog" />
+  </div>
+</template>
+
+<script>
+import {getProcessDefinitionBpmnXML, getProcessDefinitionPage} from "@/api/bpm/definition";
+import {DICT_TYPE, getDictDatas} from "@/utils/dict";
+import {decodeFields} from "@/utils/formGenerator";
+import Parser from '@/components/parser/Parser'
+import taskAssignRuleDialog from "../taskAssignRule/taskAssignRuleDialog";
+
+export default {
+  name: "BpmProcessDefinition",
+  components: {
+    Parser,
+    taskAssignRuleDialog
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 总条数
+      total: 0,
+      // 表格数据
+      list: [],
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10
+      },
+
+      // 流程表单详情
+      detailOpen: false,
+      detailForm: {
+        fields: []
+      },
+
+      // BPMN 数据
+      showBpmnOpen: false,
+      bpmnXML: null,
+      bpmnControlForm: {
+        prefix: "flowable"
+      },
+
+      // 数据字典
+      categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY),
+    };
+  },
+  created() {
+    const key = this.$route.query && this.$route.query.key
+    if (key) {
+      this.queryParams['key'] = key
+    }
+    this.getList();
+  },
+  methods: {
+    /** 查询流程定义列表 */
+    getList() {
+      this.loading = true;
+      getProcessDefinitionPage(this.queryParams).then(response => {
+          this.list = response.data.list;
+          this.total = response.data.total;
+          this.loading = false;
+        }
+      );
+    },
+    /** 流程表单的详情按钮操作 */
+    handleFormDetail(row) {
+      // 流程表单
+      if (row.formId) {
+        // 设置值
+        this.detailForm = {
+          ...JSON.parse(row.formConf),
+          fields: decodeFields(row.formFields)
+        }
+        // 弹窗打开
+        this.detailOpen = true
+        // 业务表单
+      } else if (row.formCustomCreatePath) {
+        this.$router.push({ path: row.formCustomCreatePath});
+      }
+    },
+    /** 流程图的详情按钮操作 */
+    handleBpmnDetail(row) {
+      getProcessDefinitionBpmnXML(row.id).then(response => {
+        this.bpmnXML = response.data
+        // 弹窗打开
+        this.showBpmnOpen = true
+      })
+    },
+    /** 处理任务分配规则列表的按钮操作 */
+    handleAssignRule(row) {
+      this.$refs['taskAssignRuleDialog'].initProcessDefinition(row.id);
+    },
+  }
+};
+</script>
+
+<style lang="scss">
+.my-process-designer {
+  height: calc(100vh - 200px);
+}
+</style>

src/views/bpm/form/formEditor.vue

@@ -0,0 +1,567 @@
+<template>
+  <div class="container">
+    <div class="left-board">
+      <div class="logo-wrapper">
+        <div class="logo">流程表单</div>
+      </div>
+      <el-scrollbar class="left-scrollbar">
+        <!-- 左边：表单项 -->
+        <div class="components-list">
+          <div v-for="(item, listIndex) in leftComponents" :key="listIndex">
+            <div class="components-title">
+              <svg-icon icon-class="component" />
+              {{ item.title }}
+            </div>
+            <draggable
+              class="components-draggable"
+              :list="item.list"
+              :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
+              :clone="cloneComponent"
+              draggable=".components-item"
+              :sort="false"
+              @end="onEnd"
+            >
+              <div
+                v-for="(element, index) in item.list"
+                :key="index"
+                class="components-item"
+                @click="addComponent(element)"
+              >
+                <div class="components-body">
+                  <svg-icon :icon-class="element.__config__.tagIcon" />
+                  {{ element.__config__.label }}
+                </div>
+              </div>
+            </draggable>
+          </div>
+
+          <!-- 左边：动态表单 -->
+          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+            <el-form-item label="表单名" prop="name">
+              <el-input v-model="form.name" placeholder="请输入表单名" />
+            </el-form-item>
+            <el-form-item label="开启状态" prop="status">
+              <el-radio-group v-model="form.status">
+                <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
+                          :key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="备注" prop="remark">
+              <el-input type="textarea" v-model="form.remark" placeholder="请输入备注" />
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-scrollbar>
+    </div>
+
+    <div class="center-board">
+      <div class="action-bar">
+        <el-button icon="el-icon-check" type="text" @click="save">保存</el-button>
+        <!--        <el-button icon="el-icon-video-play" type="text" @click="run">-->
+<!--          运行-->
+<!--        </el-button>-->
+        <el-button icon="el-icon-view" type="text" @click="showJson">
+          查看json
+        </el-button>
+<!--        <el-button icon="el-icon-download" type="text" @click="download">-->
+<!--          导出vue文件-->
+<!--        </el-button>-->
+<!--        <el-button class="copy-btn-main" icon="el-icon-document-copy" type="text" @click="copy">-->
+<!--          复制代码-->
+<!--        </el-button>-->
+        <el-button class="delete-btn" icon="el-icon-delete" type="text" @click="empty">
+          清空
+        </el-button>
+      </div>
+
+      <!-- 中间，表单项 -->
+      <el-scrollbar class="center-scrollbar">
+        <el-row class="center-board-row" :gutter="formConf.gutter">
+          <el-form
+            :size="formConf.size"
+            :label-position="formConf.labelPosition"
+            :disabled="formConf.disabled"
+            :label-width="formConf.labelWidth + 'px'"
+          >
+            <draggable class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup">
+              <draggable-item
+                v-for="(item, index) in drawingList"
+                :key="item.renderKey"
+                :drawing-list="drawingList"
+                :current-item="item"
+                :index="index"
+                :active-id="activeId"
+                :form-conf="formConf"
+                @activeItem="activeFormItem"
+                @copyItem="drawingItemCopy"
+                @deleteItem="drawingItemDelete"
+              />
+            </draggable>
+            <div v-show="!drawingList.length" class="empty-info">
+              从左侧拖入或点选组件进行表单设计
+            </div>
+          </el-form>
+        </el-row>
+      </el-scrollbar>
+    </div>
+
+    <!-- 右边：组件属性/表单属性 -->
+    <right-panel
+      :active-data="activeData"
+      :form-conf="formConf"
+      :show-field="!!drawingList.length"
+      @tag-change="tagChange"
+      @fetch-data="fetchData"
+    />
+
+<!--    <form-drawer-->
+<!--      :visible.sync="drawerVisible"-->
+<!--      :form-data="formData"-->
+<!--      size="100%"-->
+<!--      :generate-conf="generateConf"-->
+<!--    />-->
+
+    <json-drawer
+      size="60%"
+      :visible.sync="jsonDrawerVisible"
+      :json-str="JSON.stringify(formData)"
+      @refresh="refreshJson"
+    />
+
+<!--    <code-type-dialog-->
+<!--      :visible.sync="dialogVisible"-->
+<!--      title="选择生成类型"-->
+<!--      :show-file-name="showFileName"-->
+<!--      @confirm="generate"-->
+<!--    />-->
+
+<!--    <input id="copyNode" type="hidden">-->
+  </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+import { debounce } from 'throttle-debounce'
+import { saveAs } from 'file-saver'
+import ClipboardJS from 'clipboard'
+import render from '@/components/render/render'
+import FormDrawer from '@/views/infra/build/FormDrawer'
+import JsonDrawer from '@/views/infra/build/JsonDrawer'
+import RightPanel from '@/views/infra/build/RightPanel'
+import {
+  inputComponents, selectComponents, layoutComponents, formConf
+} from '@/components/generator/config'
+import {beautifierConf, titleCase, deepClone, isObjectObject} from '@/utils'
+import {
+  makeUpHtml, vueTemplate, vueScript, cssStyle
+} from '@/components/generator/html'
+import { makeUpJs } from '@/components/generator/js'
+import { makeUpCss } from '@/components/generator/css'
+import drawingDefalut from '@/components/generator/drawingDefalut'
+import logo from '@/assets/logo/logo.png'
+import CodeTypeDialog from '@/views/infra/build/CodeTypeDialog'
+import DraggableItem from '@/views/infra/build/DraggableItem'
+import {
+  getDrawingList, saveDrawingList, getIdGlobal, saveIdGlobal, getFormConf
+} from '@/utils/db'
+import loadBeautifier from '@/utils/loadBeautifier'
+import {CommonStatusEnum} from "@/utils/constants";
+import {createForm, getForm, updateForm} from "@/api/bpm/form";
+import {decodeFields} from "@/utils/formGenerator";
+
+let beautifier
+const emptyActiveData = { style: {}, autosize: {} }
+let oldActiveId
+let tempActiveData
+const drawingListInDB = getDrawingList()
+const formConfInDB = getFormConf()
+const idGlobal = getIdGlobal()
+
+export default {
+  components: {
+    draggable,
+    render,
+    FormDrawer,
+    JsonDrawer,
+    RightPanel,
+    CodeTypeDialog,
+    DraggableItem
+  },
+  data() {
+    return {
+      logo,
+      idGlobal,
+      formConf,
+      inputComponents,
+      selectComponents,
+      layoutComponents,
+      labelWidth: 100,
+      // drawingList: drawingDefalut,
+      drawingData: {}, // 生成后的表单数据
+      activeId: drawingDefalut[0].__config__.formId,
+
+      drawingList: [], // 表单项的数组
+      // activeId: undefined,
+      // activeData: {},
+
+      drawerVisible: false,
+      formData: {},
+      dialogVisible: false,
+      jsonDrawerVisible: false,
+      generateConf: null,
+      showFileName: false,
+      activeData: drawingDefalut[0], // 右边编辑器激活的表单项
+      saveDrawingListDebounce: debounce(340, saveDrawingList),
+      saveIdGlobalDebounce: debounce(340, saveIdGlobal),
+      leftComponents: [
+        {
+          title: '输入型组件',
+          list: inputComponents
+        },
+        {
+          title: '选择型组件',
+          list: selectComponents
+        },
+        {
+          title: '布局型组件',
+          list: layoutComponents
+        }
+      ],
+
+      // 表单参数
+      form: {
+        status: CommonStatusEnum.ENABLE,
+      },
+      // 表单校验
+      rules: {
+        name: [{ required: true, message: "表单名不能为空", trigger: "blur" }],
+        status: [{ required: true, message: "开启状态不能为空", trigger: "blur" }],
+      }
+    }
+  },
+  computed: {
+  },
+  watch: {
+    // eslint-disable-next-line func-names
+    'activeData.__config__.label': function (val, oldVal) {
+      if (
+        this.activeData.placeholder === undefined
+        || !this.activeData.__config__.tag
+        || oldActiveId !== this.activeId
+      ) {
+        return
+      }
+      this.activeData.placeholder = this.activeData.placeholder.replace(oldVal, '') + val
+    },
+    activeId: {
+      handler(val) {
+        oldActiveId = val
+      },
+      immediate: true
+    },
+    drawingList: {
+      handler(val) {
+        this.saveDrawingListDebounce(val)
+        if (val.length === 0) this.idGlobal = 100
+      },
+      deep: true
+    },
+    idGlobal: {
+      handler(val) {
+        this.saveIdGlobalDebounce(val)
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    // 【add by 芋道源码】不读缓存
+    // if (Array.isArray(drawingListInDB) && drawingListInDB.length > 0) {
+    //   this.drawingList = drawingListInDB
+    // } else {
+    //   this.drawingList = drawingDefalut
+    // }
+    // this.activeFormItem(this.drawingList[0])
+    // if (formConfInDB) {
+    //   this.formConf = formConfInDB
+    // }
+    loadBeautifier(btf => {
+      beautifier = btf
+    })
+    const clipboard = new ClipboardJS('#copyNode', {
+      text: trigger => {
+        const codeStr = this.generateCode()
+        this.$notify({
+          title: '成功',
+          message: '代码已复制到剪切板，可粘贴。',
+          type: 'success'
+        })
+        return codeStr
+      }
+    })
+    clipboard.on('error', e => {
+      this.$message.error('代码复制失败')
+    })
+  },
+  created() {
+    // 读取表单配置
+    const formId = this.$route.query && this.$route.query.formId
+    if (formId) {
+      getForm(formId).then(response => {
+        const data = response.data
+        this.form = {
+          id: data.id,
+          name: data.name,
+          status: data.status,
+          remark: data.remark
+        }
+        this.formConf = JSON.parse(data.conf)
+        this.drawingList = decodeFields(data.fields)
+        // 设置激活的表单项
+        this.activeData = this.drawingList[0]
+        this.activeId = this.activeData.__config__.formId
+        // 设置 idGlobal，避免重复
+        this.idGlobal += this.drawingList.length
+      });
+    }
+  },
+  methods: {
+    setObjectValueReduce(obj, strKeys, data) {
+      const arr = strKeys.split('.')
+      arr.reduce((pre, item, i) => {
+        if (arr.length === i + 1) {
+          pre[item] = data
+        } else if (!isObjectObject(pre[item])) {
+          pre[item] = {}
+        }
+        return pre[item]
+      }, obj)
+    },
+    setRespData(component, resp) {
+      const { dataPath, renderKey, dataConsumer } = component.__config__
+      if (!dataPath || !dataConsumer) return
+      const respData = dataPath.split('.').reduce((pre, item) => pre[item], resp)
+
+      // 将请求回来的数据，赋值到指定属性。
+      // 以el-tabel为例，根据Element文档，应该将数据赋值给el-tabel的data属性，所以dataConsumer的值应为'data';
+      // 此时赋值代码可写成 component[dataConsumer] = respData；
+      // 但为支持更深层级的赋值（如：dataConsumer的值为'options.data'）,使用setObjectValueReduce
+      this.setObjectValueReduce(component, dataConsumer, respData)
+      const i = this.drawingList.findIndex(item => item.__config__.renderKey === renderKey)
+      if (i > -1) this.$set(this.drawingList, i, component)
+    },
+    fetchData(component) {
+      const { dataType, method, url } = component.__config__
+      if (dataType === 'dynamic' && method && url) {
+        this.setLoading(component, true)
+        this.$axios({
+          method,
+          url
+        }).then(resp => {
+          this.setLoading(component, false)
+          this.setRespData(component, resp.data)
+        })
+      }
+    },
+    setLoading(component, val) {
+      const { directives } = component
+      if (Array.isArray(directives)) {
+        const t = directives.find(d => d.name === 'loading')
+        if (t) t.value = val
+      }
+    },
+    activeFormItem(currentItem) {
+      this.activeData = currentItem
+      this.activeId = currentItem.__config__.formId
+    },
+    onEnd(obj) {
+      if (obj.from !== obj.to) {
+        this.fetchData(tempActiveData)
+        this.activeData = tempActiveData
+        this.activeId = this.idGlobal
+      }
+    },
+    addComponent(item) {
+      const clone = this.cloneComponent(item)
+      this.fetchData(clone)
+      this.drawingList.push(clone)
+      this.activeFormItem(clone)
+    },
+    cloneComponent(origin) {
+      const clone = deepClone(origin)
+      const config = clone.__config__
+      config.span = this.formConf.span // 生成代码时，会根据span做精简判断
+      this.createIdAndKey(clone)
+      clone.placeholder !== undefined && (clone.placeholder += config.label)
+      tempActiveData = clone
+      return tempActiveData
+    },
+    createIdAndKey(item) {
+      const config = item.__config__
+      config.formId = ++this.idGlobal
+      config.renderKey = `${config.formId}${+new Date()}` // 改变renderKey后可以实现强制更新组件
+      if (config.layout === 'colFormItem') {
+        item.__vModel__ = `field${this.idGlobal}`
+      } else if (config.layout === 'rowFormItem') {
+        config.componentName = `row${this.idGlobal}`
+        !Array.isArray(config.children) && (config.children = [])
+        delete config.label // rowFormItem无需配置label属性
+      }
+      if (Array.isArray(config.children)) {
+        config.children = config.children.map(childItem => this.createIdAndKey(childItem))
+      }
+      return item
+    },
+    // 获得表单数据
+    AssembleFormData() {
+      this.formData = {
+        fields: deepClone(this.drawingList),
+        ...this.formConf
+      }
+    },
+    save() {
+      // this.AssembleFormData()
+      // console.log(this.formData)
+      this.$refs["form"].validate(valid => {
+        if (!valid) {
+          return;
+        }
+        const form = {
+          conf: JSON.stringify(this.formConf), // 表单配置
+          fields: this.encodeFields(), // 表单项的数组
+          ...this.form // 表单名等
+        }
+        // 修改的提交
+        if (this.form.id != null) {
+          updateForm(form).then(response => {
+            this.$modal.msgSuccess("修改成功");
+            this.close()
+          });
+          return;
+        }
+        // 添加的提交
+        createForm(form).then(response => {
+          this.$modal.msgSuccess("新增成功");
+          this.close()
+        });
+      });
+    },
+    /** 关闭按钮 */
+    close() {
+      this.$tab.closeOpenPage({ path: "/bpm/manager/form" });
+    },
+    encodeFields() {
+      const fields = []
+      this.drawingList.forEach(item => {
+        fields.push(JSON.stringify(item))
+      })
+      return fields
+    },
+    generate(data) {
+      const func = this[`exec${titleCase(this.operationType)}`]
+      this.generateConf = data
+      func && func(data)
+    },
+    execRun(data) {
+      this.AssembleFormData()
+      this.drawerVisible = true
+    },
+    execDownload(data) {
+      const codeStr = this.generateCode()
+      const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' })
+      saveAs(blob, data.fileName)
+    },
+    execCopy(data) {
+      document.getElementById('copyNode').click()
+    },
+    empty() {
+      this.$confirm('确定要清空所有组件吗？', '提示', { type: 'warning' }).then(
+        () => {
+          this.drawingList = []
+          this.idGlobal = 100
+        }
+      )
+    },
+    drawingItemCopy(item, list) {
+      let clone = deepClone(item)
+      clone = this.createIdAndKey(clone)
+      list.push(clone)
+      this.activeFormItem(clone)
+    },
+    drawingItemDelete(index, list) {
+      list.splice(index, 1)
+      this.$nextTick(() => {
+        const len = this.drawingList.length
+        if (len) {
+          this.activeFormItem(this.drawingList[len - 1])
+        }
+      })
+    },
+    generateCode() {
+      const { type } = this.generateConf
+      this.AssembleFormData()
+      const script = vueScript(makeUpJs(this.formData, type))
+      const html = vueTemplate(makeUpHtml(this.formData, type))
+      const css = cssStyle(makeUpCss(this.formData))
+      return beautifier.html(html + script + css, beautifierConf.html)
+    },
+    showJson() {
+      this.AssembleFormData()
+      this.jsonDrawerVisible = true
+    },
+    download() {
+      this.dialogVisible = true
+      this.showFileName = true
+      this.operationType = 'download'
+    },
+    run() {
+      this.dialogVisible = true
+      this.showFileName = false
+      this.operationType = 'run'
+    },
+    copy() {
+      this.dialogVisible = true
+      this.showFileName = false
+      this.operationType = 'copy'
+    },
+    tagChange(newTag) {
+      newTag = this.cloneComponent(newTag)
+      const config = newTag.__config__
+      newTag.__vModel__ = this.activeData.__vModel__
+      config.formId = this.activeId
+      config.span = this.activeData.__config__.span
+      this.activeData.__config__.tag = config.tag
+      this.activeData.__config__.tagIcon = config.tagIcon
+      this.activeData.__config__.document = config.document
+      if (typeof this.activeData.__config__.defaultValue === typeof config.defaultValue) {
+        config.defaultValue = this.activeData.__config__.defaultValue
+      }
+      Object.keys(newTag).forEach(key => {
+        if (this.activeData[key] !== undefined) {
+          newTag[key] = this.activeData[key]
+        }
+      })
+      this.activeData = newTag
+      this.updateDrawingList(newTag, this.drawingList)
+    },
+    updateDrawingList(newTag, list) {
+      const index = list.findIndex(item => item.__config__.formId === this.activeId)
+      if (index > -1) {
+        list.splice(index, 1, newTag)
+      } else {
+        list.forEach(item => {
+          if (Array.isArray(item.__config__.children)) this.updateDrawingList(newTag, item.__config__.children)
+        })
+      }
+    },
+    refreshJson(data) {
+      this.drawingList = deepClone(data.fields)
+      delete data.fields
+      this.formConf = data
+    }
+  }
+}
+</script>
+
+<style lang='scss'>
+@import '@/styles/home';
+</style>

src/views/bpm/form/index.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="app-container">
+    <doc-alert title="工作流" url="https://doc.iocoder.cn/bpm" />
+
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="表单名" prop="name">
+        <el-input v-model="queryParams.name" placeholder="请输入表单名" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                   v-hasPermi="['bpm:form:create']">新增</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="表单名" align="center" prop="name" />
+      <el-table-column label="开启状态" align="center" prop="status">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleDetail(scope.row)"
+                     v-hasPermi="['bpm:form:query']">详情</el-button>
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                     v-hasPermi="['bpm:form:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['bpm:form:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!--表单配置详情-->
+    <el-dialog title="表单详情" :visible.sync="detailOpen" width="50%" append-to-body>
+      <div class="test-form">
+        <parser :key="new Date().getTime()" :form-conf="detailForm" />
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {deleteForm, getForm, getFormPage} from "@/api/bpm/form";
+import Parser from '@/components/parser/Parser'
+import {decodeFields} from "@/utils/formGenerator";
+
+export default {
+  name: "BpmForm",
+  components: {
+    Parser
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 工作流的列表
+      list: [],
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        name: null,
+      },
+      // 表单详情
+      detailOpen: false,
+      detailForm: {
+        fields: []
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      // 执行查询
+      getFormPage(this.queryParams).then(response => {
+        this.list = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 详情按钮操作 */
+    handleDetail(row) {
+      getForm(row.id).then(response => {
+        // 设置值
+        const data = response.data
+        this.detailForm = {
+          ...JSON.parse(data.conf),
+          fields: decodeFields(data.fields)
+        }
+        // 弹窗打开
+        this.detailOpen = true
+      })
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.$router.push({
+        name: "BpmFormEditor"
+      });
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.$router.push({
+        name: "BpmFormEditor",
+        query:{
+          formId: row.id
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const id = row.id;
+      this.$modal.confirm('是否确认删除工作表单的编号为"' + id + '"的数据项?').then(function() {
+        return deleteForm(id);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    }
+  }
+};
+</script>

src/views/bpm/group/index.vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="app-container">
+    <doc-alert title="工作流" url="https://doc.iocoder.cn/bpm" />
+
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="组名" prop="name">
+        <el-input v-model="queryParams.name" placeholder="请输入组名" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
+                     :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                   v-hasPermi="['bpm:user-group:create']">新增</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="组名" align="center" prop="name" />
+      <el-table-column label="描述" align="center" prop="description" />
+      <el-table-column label="成员" align="center">
+        <template v-slot="scope">
+          <span v-for="userId in scope.row.memberUserIds">
+            {{ getUserNickname(userId) }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" align="center" prop="status">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                     v-hasPermi="['bpm:user-group:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['bpm:user-group:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="组名" prop="name">
+          <el-input v-model="form.name" placeholder="请输入组名" />
+        </el-form-item>
+        <el-form-item label="描述" prop="description">
+          <el-input v-model="form.description" placeholder="请输入描述" />
+        </el-form-item>
+        <el-form-item label="成员" prop="memberUserIds">
+          <el-select v-model="form.memberUserIds" multiple placeholder="请选择成员">
+            <el-option v-for="user in users" :key="parseInt(user.id)" :label="user.nickname" :value="parseInt(user.id)"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
+                      :key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { createUserGroup, updateUserGroup, deleteUserGroup, getUserGroup, getUserGroupPage } from "@/api/bpm/userGroup";
+import {CommonStatusEnum} from "@/utils/constants";
+import {listSimpleUsers} from "@/api/system/user";
+
+export default {
+  name: "BpmUserGroup",
+  components: {
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 用户组列表
+      list: [],
+      // 用户列表
+      users: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        name: null,
+        status: null,
+        createTime: []
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        name: [{ required: true, message: "组名不能为空", trigger: "blur" }],
+        description: [{ required: true, message: "描述不能为空", trigger: "blur" }],
+        memberUserIds: [{ required: true, message: "成员不能为空", trigger: "change" }],
+        status: [{ required: true, message: "状态不能为空", trigger: "blur" }],
+      }
+    };
+  },
+  created() {
+    this.getList();
+    // 获得用户列表
+    listSimpleUsers().then(response => {
+      this.users = response.data;
+    })
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      // 执行查询
+      getUserGroupPage(this.queryParams).then(response => {
+        this.list = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    /** 取消按钮 */
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    /** 表单重置 */
+    reset() {
+      this.form = {
+        id: undefined,
+        name: undefined,
+        description: undefined,
+        memberUserIds: [],
+        status: CommonStatusEnum.ENABLE,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加用户组";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id;
+      getUserGroup(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改用户组";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (!valid) {
+          return;
+        }
+        // 修改的提交
+        if (this.form.id != null) {
+          updateUserGroup(this.form).then(response => {
+            this.$modal.msgSuccess("修改成功");
+            this.open = false;
+            this.getList();
+          });
+          return;
+        }
+        // 添加的提交
+        createUserGroup(this.form).then(response => {
+          this.$modal.msgSuccess("新增成功");
+          this.open = false;
+          this.getList();
+        });
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const id = row.id;
+      this.$modal.confirm('是否确认删除用户组编号为"' + id + '"的数据项?').then(function() {
+        return deleteUserGroup(id);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    getUserNickname(userId) {
+      for (const user of this.users) {
+        if (user.id === userId) {
+          return user.nickname;
+        }
+      }
+      return '未知(' + userId + ')';
+    },
+  }
+};
+</script>

src/views/bpm/model/index.vue

@@ -0,0 +1,548 @@
+<template>
+  <div class="app-container">
+    <doc-alert title="工作流" url="https://doc.iocoder.cn/bpm" />
+
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="流程标识" prop="key">
+        <el-input v-model="queryParams.key" placeholder="请输入流程标识" clearable style="width: 240px;"
+                  @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="流程名称" prop="name">
+        <el-input v-model="queryParams.name" placeholder="请输入流程名称" clearable style="width: 240px;"
+                  @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="流程分类" prop="category">
+        <el-select v-model="queryParams.category" placeholder="流程分类" clearable style="width: 240px">
+          <el-option v-for="dict in categoryDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                   v-hasPermi="['bpm:model:create']">新建流程</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="info" icon="el-icon-upload2" size="mini" @click="handleImport"
+                   v-hasPermi="['bpm:model:import']">导入流程</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="流程标识" align="center" prop="key" />
+      <el-table-column label="流程名称" align="center" prop="name" width="200">
+        <template v-slot="scope">
+          <el-button type="text" @click="handleBpmnDetail(scope.row)">
+            <span>{{ scope.row.name }}</span>
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column label="流程分类" align="center" prop="category" width="100">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="scope.row.category" />
+        </template>
+      </el-table-column>
+      <el-table-column label="表单信息" align="center" prop="formType" width="200">
+        <template v-slot="scope">
+          <el-button v-if="scope.row.formId" type="text" @click="handleFormDetail(scope.row)">
+            <span>{{ scope.row.formName }}</span>
+          </el-button>
+          <el-button v-else-if="scope.row.formCustomCreatePath" type="text" @click="handleFormDetail(scope.row)">
+            <span>{{ scope.row.formCustomCreatePath }}</span>
+          </el-button>
+          <label v-else>暂无表单</label>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="最新部署的流程定义" align="center">
+        <el-table-column label="流程版本" align="center" prop="processDefinition.version" width="80">
+          <template v-slot="scope">
+            <el-tag size="medium" v-if="scope.row.processDefinition">v{{ scope.row.processDefinition.version }}</el-tag>
+            <el-tag size="medium" type="warning" v-else>未部署</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="激活状态" align="center" prop="processDefinition.version" width="80">
+          <template v-slot="scope">
+            <el-switch v-if="scope.row.processDefinition" v-model="scope.row.processDefinition.suspensionState"
+                       :active-value="1" :inactive-value="2" @change="handleChangeState(scope.row)" />
+          </template>
+        </el-table-column>
+        <el-table-column label="部署时间" align="center" prop="deploymentTime" width="180">
+          <template v-slot="scope">
+            <span v-if="scope.row.processDefinition">{{ parseTime(scope.row.processDefinition.deploymentTime) }}</span>
+          </template>
+        </el-table-column>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="450" fixed="right">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                     v-hasPermi="['bpm:model:update']">修改流程</el-button>
+          <el-button size="mini" type="text" icon="el-icon-setting" @click="handleDesign(scope.row)"
+                     v-hasPermi="['bpm:model:update']">设计流程</el-button>
+          <el-button size="mini" type="text" icon="el-icon-s-custom" @click="handleAssignRule(scope.row)"
+                     v-hasPermi="['bpm:task-assign-rule:query']">分配规则</el-button>
+          <el-button size="mini" type="text" icon="el-icon-thumb" @click="handleDeploy(scope.row)"
+                     v-hasPermi="['bpm:model:deploy']">发布流程</el-button>
+          <el-button size="mini" type="text" icon="el-icon-ice-cream-round" @click="handleDefinitionList(scope.row)"
+                     v-hasPermi="['bpm:process-definition:query']">流程定义</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['bpm:model:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!-- 流程表单配置详情 -->
+    <el-dialog title="表单详情" :visible.sync="detailOpen" width="50%" append-to-body>
+      <parser :key="new Date().getTime()" :form-conf="detailForm" />
+    </el-dialog>
+
+    <!-- 流程模型图的预览 -->
+    <el-dialog title="流程图" :visible.sync="showBpmnOpen" width="80%" append-to-body>
+      <my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" />
+    </el-dialog>
+
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
+        <el-form-item label="流程标识" prop="key">
+          <el-input v-model="form.key" placeholder="请输入流标标识" style="width: 330px;" :disabled="!!form.id" />
+          <el-tooltip v-if="!form.id" class="item" effect="light" content="新建后，流程标识不可修改！" placement="top">
+            <i style="padding-left: 5px;" class="el-icon-question" />
+          </el-tooltip>
+          <el-tooltip v-else class="item" effect="light" content="流程标识不可修改！" placement="top">
+            <i style="padding-left: 5px;" class="el-icon-question" />
+          </el-tooltip>
+        </el-form-item>
+        <el-form-item label="流程名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入流程名称" :disabled="!!form.id" clearable />
+        </el-form-item>
+        <el-form-item v-if="form.id" label="流程分类" prop="category">
+          <el-select v-model="form.category" placeholder="请选择流程分类" clearable style="width: 100%">
+            <el-option v-for="dict in categoryDictDatas" :key="dict.value" :label="dict.label" :value="dict.value"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="流程描述" prop="description">
+          <el-input type="textarea" v-model="form.description" clearable />
+        </el-form-item>
+        <div v-if="form.id">
+          <el-form-item label="表单类型" prop="formType">
+            <el-radio-group v-model="form.formType">
+              <el-radio v-for="dict in modelFormTypeDictDatas" :key="parseInt(dict.value)" :label="parseInt(dict.value)">
+                {{dict.label}}
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-if="form.formType === 10" label="流程表单" prop="formId">
+            <el-select v-model="form.formId" clearable style="width: 100%">
+              <el-option v-for="form in forms" :key="form.id" :label="form.name" :value="form.id"/>
+            </el-select>
+          </el-form-item>
+          <el-form-item v-if="form.formType === 20" label="表单提交路由" prop="formCustomCreatePath" >
+            <el-input v-model="form.formCustomCreatePath" placeholder="请输入表单提交路由" style="width: 330px;" />
+            <el-tooltip class="item" effect="light" content="自定义表单的提交路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/create" placement="top">
+              <i style="padding-left: 5px;" class="el-icon-question" />
+            </el-tooltip>
+          </el-form-item>
+          <el-form-item v-if="form.formType === 20" label="表单查看路由" prop="formCustomViewPath">
+            <el-input v-model="form.formCustomViewPath" placeholder="请输入表单查看路由" style="width: 330px;" />
+            <el-tooltip class="item" effect="light" content="自定义表单的查看路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/view" placement="top">
+              <i style="padding-left: 5px;" class="el-icon-question" />
+            </el-tooltip>
+          </el-form-item>
+        </div>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 用户导入对话框 -->
+    <el-dialog title="导入流程" :visible.sync="upload.open" width="400px" append-to-body>
+      <el-upload ref="upload" :limit="1" accept=".bpmn, .xml" :headers="upload.headers" :action="upload.url"
+        :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess"
+        :auto-upload="false" name="bpmnFile" :data="upload.form" drag>
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">
+          将文件拖到此处，或
+          <em>点击上传</em>
+        </div>
+        <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“bpm”或“xml”格式文件！</div>
+        <div class="el-upload__tip" slot="tip">
+          <el-form ref="uploadForm" size="mini" label-width="90px" :model="upload.form" :rules="upload.rules" @submit.native.prevent>
+            <el-form-item label="流程标识" prop="key">
+              <el-input v-model="upload.form.key" placeholder="请输入流标标识" style="width: 250px;" />
+              <el-tooltip class="item" effect="light" content="新建后，流程标识不可修改！" placement="top">
+                <i style="padding-left: 5px;" class="el-icon-question" />
+              </el-tooltip>
+            </el-form-item>
+            <el-form-item label="流程名称" prop="name">
+              <el-input v-model="upload.form.name" placeholder="请输入流程名称" clearable />
+            </el-form-item>
+            <el-form-item label="流程描述" prop="description">
+              <el-input type="textarea" v-model="upload.form.description" clearable />
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-upload>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitFileForm">确 定</el-button>
+        <el-button @click="uploadClose">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- ========== 流程任务分配规则 ========== -->
+    <taskAssignRuleDialog ref="taskAssignRuleDialog" />
+  </div>
+</template>
+
+<script>
+import {
+  deleteModel,
+  deployModel,
+  getModelPage,
+  getModel,
+  updateModelState,
+  createModel,
+  updateModel
+} from "@/api/bpm/model";
+import {DICT_TYPE, getDictDatas} from "@/utils/dict";
+import {getForm, getSimpleForms} from "@/api/bpm/form";
+import {decodeFields} from "@/utils/formGenerator";
+import Parser from '@/components/parser/Parser'
+import {getBaseHeader} from "@/utils/request";
+import taskAssignRuleDialog from "../taskAssignRule/taskAssignRuleDialog";
+
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+
+export default {
+  name: "BpmModel",
+  components: {
+    Parser,
+    Treeselect,
+    taskAssignRuleDialog
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 表格数据
+      list: [],
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10
+      },
+
+      // BPMN 数据
+      showBpmnOpen: false,
+      bpmnXML: null,
+      bpmnControlForm: {
+        prefix: "flowable"
+      },
+
+      // 流程表单详情
+      detailOpen: false,
+      detailForm: {
+        fields: []
+      },
+
+      // 流程表单
+      title: "",
+      open: false,
+      form: {},
+      // 表单校验
+      rules: {
+        key: [{ required: true, message: "流程标识不能为空", trigger: "blur" }],
+        name: [{ required: true, message: "流程名称不能为空", trigger: "blur" }],
+        formType: [{ required: true, message: "流程名称不能为空", trigger: "blur" }],
+        formId: [{ required: true, message: "业务表单不能为空", trigger: "blur" }],
+        category: [{ required: true, message: "流程分类不能为空", trigger: "blur" }],
+        formCustomCreatePath: [{ required: true, message: "表单提交路由不能为空", trigger: "blur" }],
+        formCustomViewPath: [{ required: true, message: "表单查看路由不能为空", trigger: "blur" }],
+      },
+
+      // 流程导入参数
+      upload: {
+        // 是否显示弹出层（用户导入）
+        open: false,
+        // 是否禁用上传
+        isUploading: false,
+        // 设置上传的请求头部
+        headers: getBaseHeader(),
+        // 上传的地址
+        url: process.env.VUE_APP_BASE_API + '/admin-api' + "/bpm/model/import",
+        // 表单
+        form: {},
+        // 校验规则
+        rules: {
+          key: [{ required: true, message: "流程标识不能为空", trigger: "blur" }],
+          name: [{ required: true, message: "流程名称不能为空", trigger: "blur" }],
+        },
+      },
+      // 流程表单的下拉框的数据
+      forms: [],
+
+      // 数据字典
+      categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY),
+      modelFormTypeDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_FORM_TYPE),
+      taskAssignRuleDictDatas: getDictDatas(DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE),
+    };
+  },
+  created() {
+    this.getList();
+    // 获得流程表单的下拉框的数据
+    getSimpleForms().then(response => {
+      this.forms = response.data
+    })
+  },
+  methods: {
+    /** 查询流程模型列表 */
+    getList() {
+      this.loading = true;
+      getModelPage(this.queryParams).then(response => {
+          this.list = response.data.list;
+          this.total = response.data.total;
+          this.loading = false;
+        }
+      );
+    },
+    /** 取消按钮 */
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: undefined,
+        key: undefined,
+        name: undefined,
+        description: undefined,
+        category: undefined,
+        formType: undefined,
+        formId: undefined,
+        formCustomCreatePath: undefined,
+        formCustomViewPath: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.title = "新建模型";
+      this.open = true;
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      this.title = "修改模型";
+      this.open = true;
+      // 设置 form
+      this.form = {
+        ...row
+      };
+      // 触发一次校验
+      // this.$refs["form"].validate();
+    },
+    /** 设计按钮操作 */
+    handleDesign(row) {
+      this.$router.push({
+        name: "BpmModelEditor",
+        query:{
+          modelId: row.id
+        }
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (!valid) {
+          return;
+        }
+        // 更新
+        if (this.form.id) {
+          updateModel({
+            ...this.form,
+            formId: this.form.formType === 10 ? this.form.formId : undefined,
+            formCustomCreatePath: this.form.formType === 20 ? this.form.formCustomCreatePath : undefined,
+            formCustomViewPath: this.form.formType === 20 ? this.form.formCustomViewPath : undefined,
+          }).then(response => {
+            this.$modal.msgSuccess("修改模型成功");
+            this.open = false;
+            this.getList();
+          });
+          return;
+        }
+        // 创建
+        createModel(this.form).then(response => {
+          this.open = false;
+          this.getList();
+          this.$alert('<strong>新建模型成功！</strong>后续需要执行如下 4 个步骤：' +
+            '<div>1. 点击【修改流程】按钮，配置流程的分类、表单信息</div>' +
+            '<div>2. 点击【设计流程】按钮，绘制流程图</div>' +
+            '<div>3. 点击【分配规则】按钮，设置每个用户任务的审批人</div>' +
+            '<div>4. 点击【发布流程】按钮，完成流程的最终发布</div>' +
+            '另外，每次流程修改后，都需要点击【发布流程】按钮，才能正式生效！！！',
+            '重要提示', {
+              dangerouslyUseHTMLString: true,
+              type: 'success'
+            });
+        });
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const that = this;
+      this.$modal.confirm('是否删除该流程！！').then(function() {
+        deleteModel(row.id).then(response => {
+          that.getList();
+          that.$modal.msgSuccess("删除成功");
+        })
+      }).catch(() => {});
+    },
+    /** 部署按钮操作 */
+    handleDeploy(row) {
+      const that = this;
+      this.$modal.confirm('是否部署该流程！！').then(function() {
+        deployModel(row.id).then(response => {
+          that.getList();
+          that.$modal.msgSuccess("部署成功");
+        })
+      }).catch(() => {});
+    },
+    /** 流程表单的详情按钮操作 */
+    handleFormDetail(row) {
+      // 流程表单
+      if (row.formId) {
+        getForm(row.formId).then(response => {
+          // 设置值
+          const data = response.data
+          this.detailForm = {
+            ...JSON.parse(data.conf),
+            fields: decodeFields(data.fields)
+          }
+          // 弹窗打开
+          this.detailOpen = true
+        })
+        // 业务表单
+      } else if (row.formCustomCreatePath) {
+        this.$router.push({ path: row.formCustomCreatePath});
+      }
+    },
+    /** 流程图的详情按钮操作 */
+    handleBpmnDetail(row) {
+      getModel(row.id).then(response => {
+        this.bpmnXML = response.data.bpmnXml
+        // 弹窗打开
+        this.showBpmnOpen = true
+      })
+    },
+    /** 跳转流程定义的列表 */
+    handleDefinitionList(row) {
+      this.$router.push({
+        name: "BpmProcessDefinition",
+        query:{
+          key: row.key
+        }
+      });
+    },
+    /** 更新状态操作 */
+    handleChangeState(row) {
+      const id = row.id;
+      let state = row.processDefinition.suspensionState;
+      let statusState = state === 1 ? '激活' : '挂起';
+      this.$modal.confirm('是否确认' + statusState + '流程名字为"' + row.name + '"的数据项?').then(function() {
+        return updateModelState(id, state);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess(statusState + "成功");
+      }).catch(() => {
+        // 取消后，进行恢复按钮
+        row.processDefinition.suspensionState = (state === 1 ? 2 : 1);
+      });
+    },
+    /** 导入按钮操作 */
+    handleImport() {
+      this.upload.open = true;
+    },
+    // 文件上传中处理
+    handleFileUploadProgress(event, file, fileList) {
+      this.upload.isUploading = true;
+    },
+    // 文件上传成功处理
+    handleFileSuccess(response, file, fileList) {
+      if (response.code !== 0) {
+        this.$modal.msgError(response.msg)
+        return;
+      }
+      // 重置表单
+      this.uploadClose();
+      // 提示，并刷新
+      this.$modal.msgSuccess("导入流程成功！请点击【设计流程】按钮，进行编辑保存后，才可以进行【发布流程】");
+      this.getList();
+    },
+    uploadClose() {
+      // 关闭弹窗
+      this.upload.open = false;
+      // 重置上传状态和文件
+      this.upload.isUploading = false;
+      this.$refs.upload.clearFiles();
+      // 重置表单
+      this.upload.form = {};
+      this.resetForm("uploadForm");
+    },
+    /** 提交上传文件 */
+    submitFileForm() {
+      this.$refs["uploadForm"].validate(valid => {
+        if (!valid) {
+          return;
+        }
+        this.$refs.upload.submit();
+      })
+    },
+    /** 处理任务分配规则列表的按钮操作 */
+    handleAssignRule(row) {
+      this.$refs['taskAssignRuleDialog'].initModel(row.id);
+    },
+  }
+};
+</script>
+
+<style lang="scss">
+.my-process-designer {
+  height: calc(100vh - 200px);
+}
+</style>

src/views/bpm/model/modelEditor.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="app-container">
+
+    <!-- 流程设计器，负责绘制流程等 -->
+    <my-process-designer v-if="xmlString !== undefined" :key="`designer-${reloadIndex}`" v-model="xmlString" v-bind="controlForm"
+      keyboard ref="processDesigner" @init-finished="initModeler"
+      @save="save"/>
+
+    <!-- 流程属性器，负责编辑每个流程节点的属性 -->
+    <my-properties-panel :key="`penal-${reloadIndex}`" :bpmn-modeler="modeler" :prefix="controlForm.prefix" class="process-panel"
+      :model="model" />
+
+  </div>
+</template>
+
+<script>
+import translations from "@/components/bpmnProcessDesigner/src/translations";
+// 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
+import CustomContentPadProvider from "@/components/bpmnProcessDesigner/package/designer/plugins/content-pad";
+// 自定义左侧菜单（修改 默认任务 为 用户任务）
+import CustomPaletteProvider from "@/components/bpmnProcessDesigner/package/designer/plugins/palette";
+// import xmlObj2json from "./utils/xml2json";
+import MyProcessPalette from "@/components/bpmnProcessDesigner/package/palette/ProcessPalette";
+import {createModel, getModel, updateModel} from "@/api/bpm/model";
+// 自定义侧边栏
+// import MyProcessPanel from "../package/process-panel/ProcessPanel";
+
+export default {
+  name: "BpmModelEditor",
+  components: { MyProcessPalette },
+  data() {
+    return {
+      xmlString: undefined, // BPMN XML
+      modeler: null,
+      reloadIndex: 0,
+      controlDrawerVisible: false,
+      translationsSelf: translations,
+      controlForm: {
+        simulation: true,
+        labelEditing: false,
+        labelVisible: false,
+        prefix: "flowable",
+        headerButtonSize: "mini",
+        additionalModel: [CustomContentPadProvider, CustomPaletteProvider]
+      },
+      addis: {
+        CustomContentPadProvider,
+        CustomPaletteProvider
+      },
+      // 流程模型的信息
+      model: {},
+    };
+  },
+  created() {
+    // 如果 modelId 非空，说明是修改流程模型
+    const modelId = this.$route.query && this.$route.query.modelId
+    if (modelId) {
+      getModel(modelId).then(response => {
+        this.xmlString = response.data.bpmnXml
+        this.model = {
+          ...response.data,
+          bpmnXml: undefined, // 清空 bpmnXml 属性
+        }
+        // this.controlForm.processId = response.data.key
+      })
+    }
+  },
+  methods: {
+    initModeler(modeler) {
+      setTimeout(() => {
+        this.modeler = modeler;
+        console.log(modeler);
+      }, 10);
+    },
+    save(bpmnXml) {
+      const data = {
+        ...this.model,
+        bpmnXml: bpmnXml, // this.bpmnXml 只是初始化流程图，后续修改无法通过它获得
+      }
+
+      // 修改的提交
+      if (data.id) {
+        updateModel(data).then(response => {
+          this.$modal.msgSuccess("修改成功")
+          // 跳转回去
+          this.close()
+        })
+        return
+      }
+      // 添加的提交
+      createModel(data).then(response => {
+        this.$modal.msgSuccess("保存成功")
+        // 跳转回去
+        this.close()
+      })
+    },
+    /** 关闭按钮 */
+    close() {
+      this.$tab.closeOpenPage({ path: "/bpm/manager/model" });
+    },
+  }
+};
+</script>
+
+<style lang="scss">
+//body {
+//  overflow: hidden;
+//  margin: 0;
+//  box-sizing: border-box;
+//}
+//.app {
+//  width: 100%;
+//  height: 100%;
+//  box-sizing: border-box;
+//  display: inline-grid;
+//  grid-template-columns: 100px auto max-content;
+//}
+.demo-control-bar {
+  position: fixed;
+  right: 8px;
+  bottom: 8px;
+  z-index: 1;
+  .open-control-dialog {
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    font-size: 32px;
+    background: rgba(64, 158, 255, 1);
+    color: #ffffff;
+    cursor: pointer;
+  }
+}
+
+// TODO 芋艿：去掉多余的 faq
+//.info-tip {
+//  position: fixed;
+//  top: 40px;
+//  right: 500px;
+//  z-index: 10;
+//  color: #999999;
+//}
+
+.control-form {
+  .el-radio {
+    width: 100%;
+    line-height: 32px;
+  }
+}
+.element-overlays {
+  box-sizing: border-box;
+  padding: 8px;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 4px;
+  color: #fafafa;
+}
+
+.my-process-designer {
+  height: calc(100vh - 84px);
+}
+.process-panel__container {
+  position: absolute;
+  right: 0;
+  top: 55px;
+  height: calc(100vh - 84px);
+}
+
+</style>

src/views/bpm/oa/leave/create.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="app-container">
+    <!-- 对话框(添加 / 修改) -->
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="开始时间" prop="startTime">
+          <el-date-picker clearable size="small" v-model="form.startTime" type="date" value-format="timestamp" placeholder="选择开始时间" />
+        </el-form-item>
+        <el-form-item label="结束时间" prop="endTime">
+          <el-date-picker clearable size="small" v-model="form.endTime" type="date" value-format="timestamp" placeholder="选择结束时间" />
+        </el-form-item>
+        <el-form-item label="请假类型" prop="type">
+          <el-select v-model="form.type" placeholder="请选择">
+            <el-option v-for="dict in typeDictData" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="原因" prop="reason">
+          <el-col :span="10">
+            <el-input type="textarea" :rows="3" v-model="form.reason" placeholder="请输入原因" />
+          </el-col>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="submitForm">提 交</el-button>
+        </el-form-item>
+      </el-form>
+  </div>
+</template>
+
+<script>
+import { createLeave}  from "@/api/bpm/leave"
+import { getDictDatas, DICT_TYPE } from '@/utils/dict'
+
+export default {
+  name: "BpmOALeaveCreate",
+  components: {
+  },
+  data() {
+    return {
+      // 表单参数
+      form: {
+        startTime: undefined,
+        endTime: undefined,
+        type: undefined,
+        reason: undefined,
+      },
+      // 表单校验
+      rules: {
+        startTime: [{ required: true, message: "开始时间不能为空", trigger: "blur" }],
+        endTime: [{ required: true, message: "结束时间不能为空", trigger: "blur" }],
+        type: [{ required: true, message: "请假类型不能为空", trigger: "change" }],
+        reason: [{ required: true, message: "请假原因不能为空", trigger: "change" }],
+      },
+
+      typeDictData: getDictDatas(DICT_TYPE.BPM_OA_LEAVE_TYPE),
+    };
+  },
+  created() {
+  },
+  methods: {
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (!valid) {
+          return;
+        }
+
+        // 添加的提交
+        createLeave(this.form).then(response => {
+          this.$modal.msgSuccess("发起成功");
+          this.$tab.closeOpenPage({ path: "/bpm/oa/leave" });
+        });
+      });
+    }
+  }
+};
+</script>

src/views/bpm/oa/leave/detail.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="app-container">
+    <!-- 对话框(添加 / 修改) -->
+      <el-form ref="form" :model="form" label-width="100px">
+        <el-form-item label="开始时间：" prop="startTime"> {{parseTime(form.startTime, '{y}-{m}-{d}')}} </el-form-item>
+        <el-form-item label="结束时间：" prop="endTime"> {{parseTime(form.endTime, '{y}-{m}-{d}')}} </el-form-item>
+        <el-form-item label="请假类型：" prop="type">
+          <dict-tag :type="DICT_TYPE.BPM_OA_LEAVE_TYPE" :value="form.type"/>
+        </el-form-item>
+        <el-form-item label="原因：" prop="reason"> {{ form.reason }}</el-form-item>
+      </el-form>
+  </div>
+</template>
+
+<script>
+import { getLeave}  from "@/api/bpm/leave"
+import {getDictDatas, DICT_TYPE} from '@/utils/dict'
+export default {
+  name: "BpmOALeaveDetail",
+  components: {
+  },
+  props: {
+    id: {
+      type: [String, Number],
+      default: undefined
+    },
+  },
+  data() {
+    return {
+      leaveId: undefined, // 请假编号
+      // 表单参数
+      form: {
+        startTime: undefined,
+        endTime: undefined,
+        type: undefined,
+        reason: undefined,
+      },
+
+      typeDictData: getDictDatas(DICT_TYPE.BPM_OA_LEAVE_TYPE),
+    };
+  },
+  created() {
+    this.leaveId = this.id || this.$route.query.id;
+    if (!this.leaveId) {
+      this.$message.error('未传递 id 参数，无法查看 OA 请假信息');
+      return;
+    }
+    this.getDetail();
+  },
+  methods: {
+    /** 获得请假信息 */
+    getDetail() {
+      getLeave(this.leaveId).then(response => {
+        this.form = response.data;
+      });
+    },
+  }
+};
+</script>

src/views/bpm/oa/leave/index.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="app-container">
+    <doc-alert title="工作流" url="https://doc.iocoder.cn/bpm" />
+
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="请假类型" prop="type">
+        <el-select v-model="queryParams.type" placeholder="请选择请假类型" clearable>
+          <el-option v-for="dict in leaveTypeDictData" :key="dict.value" :label="dict.label" :value="dict.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="申请时间" prop="createTime">
+        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item label="结果" prop="result">
+        <el-select v-model="queryParams.result" placeholder="请选择流结果" clearable>
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT)"
+                     :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="原因" prop="reason">
+        <el-input v-model="queryParams.reason" placeholder="请输入原因" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini"
+                   v-hasPermi="['bpm:oa-leave:create']" @click="handleAdd">发起请假</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="申请编号" align="center" prop="id" />
+      <el-table-column label="状态" align="center" prop="result">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT" :value="scope.row.result"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="开始时间" align="center" prop="startTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.startTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="结束时间" align="center" prop="endTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.endTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="请假类型" align="center" prop="type">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.BPM_OA_LEAVE_TYPE" :value="scope.row.type"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="原因" align="center" prop="reason" />
+      <el-table-column label="申请时间" align="center" prop="applyTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleCancel(scope.row)"
+                     v-hasPermi="['bpm:oa-leave:create']" v-if="scope.row.result === 1">取消请假</el-button>
+          <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetail(scope.row)"
+                     v-hasPermi="['bpm:oa-leave:query']">详情</el-button>
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleProcessDetail(scope.row)">审批进度</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+  </div>
+</template>
+
+<script>
+import { getLeavePage } from "@/api/bpm/leave"
+import { getDictDatas, DICT_TYPE } from '@/utils/dict'
+import {cancelProcessInstance} from "@/api/bpm/processInstance";
+
+export default {
+  name: "BpmOALeave",
+  components: {
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 请假申请列表
+      list: [],
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        result: null,
+        type: null,
+        reason: null,
+        createTime: []
+      },
+
+      leaveTypeDictData: getDictDatas(DICT_TYPE.BPM_OA_LEAVE_TYPE),
+      leaveResultData: getDictDatas(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT),
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      // 执行查询
+      getLeavePage(this.queryParams).then(response => {
+        this.list = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.$router.push({ name: "BpmOALeaveCreate"});
+    },
+    /** 详情按钮操作 */
+    handleDetail(row) {
+      this.$router.push({ name: "BpmOALeaveDetail", query: { id: row.id}});
+    },
+    /** 查看审批进度的操作 */
+    handleProcessDetail(row) {
+      this.$router.push({ name: "BpmProcessInstanceDetail", query: { id: row.processInstanceId}});
+    },
+    /** 取消请假 */
+    handleCancel(row) {
+      const id = row.processInstanceId;
+      this.$prompt('请输入取消原因？', "取消流程", {
+        type: 'warning',
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
+        inputErrorMessage: "取消原因不能为空",
+      }).then(({ value }) => {
+        return cancelProcessInstance(id, value);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("取消成功");
+      })
+    }
+  }
+};
+</script>

src/views/bpm/processInstance/create.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="app-container">
+    <!-- 第一步，通过流程定义的列表，选择对应的流程 -->
+    <div v-if="!selectProcessInstance">
+      <el-table v-loading="loading" :data="list">
+        <el-table-column label="流程名称" align="center" prop="name" width="200">
+          <template v-slot="scope">
+            <el-button type="text" @click="handleBpmnDetail(scope.row)">
+              <span>{{ scope.row.name }}</span>
+            </el-button>
+          </template>
+        </el-table-column>
+        <el-table-column label="流程分类" align="center" prop="category" width="100">
+          <template v-slot="scope">
+            <dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="scope.row.category" />
+          </template>
+        </el-table-column>
+        <el-table-column label="流程版本" align="center" prop="processDefinition.version" width="80">
+          <template v-slot="scope">
+            <el-tag size="medium" v-if="scope.row">v{{ scope.row.version }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="流程描述" align="center" prop="description" width="300" show-overflow-tooltip />
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template v-slot="scope">
+            <el-button type="text" size="small" icon="el-icon-plus" @click="handleSelect(scope.row)">选择</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- 第二步，填写表单，进行流程的提交 -->
+    <div v-else>
+      <el-card class="box-card" >
+        <div slot="header" class="clearfix">
+          <span class="el-icon-document">申请信息【{{ selectProcessInstance.name }}】</span>
+          <el-button style="float: right;" type="primary" @click="selectProcessInstance = undefined">选择其它流程</el-button>
+        </div>
+        <el-col :span="16" :offset="6">
+          <div>
+            <parser :key="new Date().getTime()" :form-conf="detailForm" @submit="submitForm" />
+          </div>
+        </el-col>
+      </el-card>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span class="el-icon-picture-outline">流程图</span>
+        </div>
+        <my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" />
+      </el-card>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import {getProcessDefinitionBpmnXML, getProcessDefinitionList} from "@/api/bpm/definition";
+import {DICT_TYPE, getDictDatas} from "@/utils/dict";
+import {decodeFields} from "@/utils/formGenerator";
+import Parser from '@/components/parser/Parser'
+import {createProcessInstance} from "@/api/bpm/processInstance";
+
+// 流程实例的发起
+export default {
+  name: "ProcessInstanceCreate",
+  components: {
+    Parser
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 表格数据
+      list: [],
+
+      // 流程表单详情
+      detailForm: {
+        fields: []
+      },
+
+      // BPMN 数据
+      bpmnXML: null,
+      bpmnControlForm: {
+        prefix: "flowable"
+      },
+
+      // 流程表单
+      selectProcessInstance: undefined, // 选择的流程实例
+
+      // 数据字典
+      categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY),
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询流程定义列表 */
+    getList() {
+      this.loading = true;
+      getProcessDefinitionList({
+        suspensionState: 1
+      }).then(response => {
+          this.list = response.data
+          this.loading = false
+        }
+      );
+    },
+    /** 处理选择流程的按钮操作 **/
+    handleSelect(row) {
+      // 设置选择的流程
+      this.selectProcessInstance = row;
+
+      // 流程表单
+      if (row.formId) {
+        // 设置对应的表单
+        this.detailForm = {
+          ...JSON.parse(row.formConf),
+          fields: decodeFields(row.formFields)
+        }
+
+        // 加载流程图
+        getProcessDefinitionBpmnXML(row.id).then(response => {
+          this.bpmnXML = response.data
+        })
+      } else if (row.formCustomCreatePath) {
+        this.$router.push({ path: row.formCustomCreatePath});
+        // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
+      }
+    },
+    /** 提交按钮 */
+    submitForm(params) {
+      if (!params) {
+        return;
+      }
+      // 设置表单禁用
+      const conf = params.conf;
+      conf.disabled = true; // 表单禁用
+      conf.formBtns = false; // 按钮隐藏
+
+      // 提交表单，创建流程
+      const variables = params.values;
+      createProcessInstance({
+        processDefinitionId: this.selectProcessInstance.id,
+        variables: variables
+      }).then(response => {
+        this.$modal.msgSuccess("发起流程成功");
+        // 关闭当前窗口
+        this.$tab.closeOpenPage();
+        this.$router.go(-1);
+      }).catch(() => {
+        conf.disabled = false; // 表单开启
+        conf.formBtns = true; // 按钮展示
+      })
+    },
+  }
+};
+</script>
+
+<style lang="scss">
+.my-process-designer {
+  height: calc(100vh - 200px);
+}
+
+.box-card {
+  width: 100%;
+  margin-bottom: 20px;
+}
+</style>

src/views/bpm/processInstance/detail.vue

@@ -0,0 +1,400 @@
+<template>
+  <div class="app-container">
+    <!-- 审批信息 -->
+    <el-card class="box-card" v-loading="processInstanceLoading" v-for="(item, index) in runningTasks" :key="index">
+      <div slot="header" class="clearfix">
+        <span class="el-icon-picture-outline">审批任务【{{ item.name }}】</span>
+      </div>
+      <el-col :span="16" :offset="6" >
+        <el-form :ref="'form' + index" :model="auditForms[index]" :rules="auditRule" label-width="100px">
+          <el-form-item label="流程名" v-if="processInstance && processInstance.name">
+            {{ processInstance.name }}
+          </el-form-item>
+          <el-form-item label="流程发起人" v-if="processInstance && processInstance.startUser">
+            {{ processInstance.startUser.nickname }}
+            <el-tag type="info" size="mini">{{ processInstance.startUser.deptName }}</el-tag>
+          </el-form-item>
+          <el-form-item label="审批建议" prop="reason">
+            <el-input type="textarea" v-model="auditForms[index].reason" placeholder="请输入审批建议" />
+          </el-form-item>
+        </el-form>
+        <div style="margin-left: 10%; margin-bottom: 20px; font-size: 14px;">
+          <el-button  icon="el-icon-edit-outline" type="success" size="mini" @click="handleAudit(item, true)">通过</el-button>
+          <el-button  icon="el-icon-circle-close" type="danger" size="mini" @click="handleAudit(item, false)">不通过</el-button>
+          <el-button  icon="el-icon-edit-outline" type="primary" size="mini" @click="handleUpdateAssignee(item)">转办</el-button>
+          <el-button icon="el-icon-edit-outline" type="primary" size="mini" @click="handleDelegate(item)">委派</el-button>
+          <el-button icon="el-icon-refresh-left" type="warning" size="mini" @click="handleBack(item)">退回</el-button>
+        </div>
+      </el-col>
+    </el-card>
+    <!-- 申请信息 -->
+    <el-card class="box-card" v-loading="processInstanceLoading">
+      <div slot="header" class="clearfix">
+        <span class="el-icon-document">申请信息【{{ processInstance.name }}】</span>
+      </div>
+      <el-col v-if="this.processInstance.processDefinition && this.processInstance.processDefinition.formType === 10"
+              :span="16" :offset="6">
+        <div >
+          <parser :key="new Date().getTime()" :form-conf="detailForm" />
+        </div>
+      </el-col>
+      <div v-if="this.processInstance.processDefinition && this.processInstance.processDefinition.formType === 20">
+        <async-biz-form-component :id="this.processInstance.businessKey"></async-biz-form-component>
+      </div>
+    </el-card>
+
+    <!-- 审批记录 -->
+    <el-card class="box-card" v-loading="tasksLoad">
+      <div slot="header" class="clearfix">
+        <span class="el-icon-picture-outline">审批记录</span>
+      </div>
+      <el-col :span="16" :offset="4" >
+        <div class="block">
+          <el-timeline>
+            <el-timeline-item v-for="(item, index) in tasks" :key="index"
+                              :icon="getTimelineItemIcon(item)" :type="getTimelineItemType(item)">
+              <p style="font-weight: 700">任务：{{ item.name }}</p>
+              <el-card :body-style="{ padding: '10px' }">
+                <label v-if="item.assigneeUser" style="font-weight: normal; margin-right: 30px;">
+                  审批人：{{ item.assigneeUser.nickname }}
+                  <el-tag type="info" size="mini">{{ item.assigneeUser.deptName }}</el-tag>
+                </label>
+                <label style="font-weight: normal" v-if="item.createTime">创建时间：</label>
+                <label style="color:#8a909c; font-weight: normal">{{ parseTime(item.createTime) }}</label>
+                <label v-if="item.endTime" style="margin-left: 30px;font-weight: normal">审批时间：</label>
+                <label v-if="item.endTime" style="color:#8a909c;font-weight: normal"> {{ parseTime(item.endTime) }}</label>
+                <label v-if="item.durationInMillis" style="margin-left: 30px;font-weight: normal">耗时：</label>
+                <label v-if="item.durationInMillis" style="color:#8a909c;font-weight: normal"> {{ getDateStar(item.durationInMillis) }} </label>
+                <p v-if="item.reason">
+                  <el-tag :type="getTimelineItemType(item)">{{ item.reason }}</el-tag>
+                </p>
+              </el-card>
+            </el-timeline-item>
+          </el-timeline>
+        </div>
+      </el-col>
+    </el-card>
+
+    <!-- 高亮流程图 -->
+    <el-card class="box-card" v-loading="processInstanceLoading">
+      <div slot="header" class="clearfix">
+        <span class="el-icon-picture-outline">流程图</span>
+      </div>
+      <my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" :activityData="activityList"
+            :processInstanceData="processInstance" :taskData="tasks" />
+    </el-card>
+
+    <!-- 对话框(转派审批人) -->
+    <el-dialog title="转派审批人" :visible.sync="updateAssignee.open" width="500px" append-to-body>
+      <el-form ref="updateAssigneeForm" :model="updateAssignee.form" :rules="updateAssignee.rules" label-width="110px">
+        <el-form-item label="新审批人" prop="assigneeUserId">
+          <el-select v-model="updateAssignee.form.assigneeUserId" clearable style="width: 100%">
+            <el-option v-for="item in userOptions" :key="parseInt(item.id)" :label="item.nickname" :value="parseInt(item.id)" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitUpdateAssigneeForm">确 定</el-button>
+        <el-button @click="cancelUpdateAssigneeForm">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {getProcessDefinitionBpmnXML} from "@/api/bpm/definition";
+import {DICT_TYPE, getDictDatas} from "@/utils/dict";
+import store from "@/store";
+import {decodeFields} from "@/utils/formGenerator";
+import Parser from '@/components/parser/Parser'
+import {getProcessInstance} from "@/api/bpm/processInstance";
+import {approveTask, getTaskListByProcessInstanceId, rejectTask, updateTaskAssignee} from "@/api/bpm/task";
+import {getDate} from "@/utils/dateUtils";
+import {listSimpleUsers} from "@/api/system/user";
+import {getActivityList} from "@/api/bpm/activity";
+import Vue from "vue";
+
+// 流程实例的详情页，可用于审批
+export default {
+  name: "ProcessInstanceDetail",
+  components: {
+    Parser
+  },
+  data() {
+    return {
+      // 遮罩层
+      processInstanceLoading: true,
+      // 流程实例
+      id: undefined, // 流程实例的编号
+      processInstance: {},
+
+      // 流程表单详情
+      detailForm: {
+        fields: []
+      },
+
+      // BPMN 数据
+      bpmnXML: null,
+      bpmnControlForm: {
+        prefix: "flowable"
+      },
+      activityList: [],
+
+      // 审批记录
+      tasksLoad: true,
+      tasks: [],
+
+      // 审批表单
+      runningTasks: [],
+      auditForms: [],
+      auditRule: {
+        reason: [{ required: true, message: "审批建议不能为空", trigger: "blur" }],
+      },
+
+      // 转派审批人
+      userOptions: [],
+      updateAssignee: {
+        open: false,
+        form: {
+          assigneeUserId: undefined,
+        },
+        rules: {
+          assigneeUserId: [{ required: true, message: "新审批人不能为空", trigger: "change" }],
+        }
+      }
+    };
+  },
+  created() {
+    this.id = this.$route.query.id;
+    if (!this.id) {
+      this.$message.error('未传递 id 参数，无法查看流程信息');
+      return;
+    }
+    this.getDetail();
+
+    // 获得用户列表
+    this.userOptions = [];
+    listSimpleUsers().then(response => {
+      this.userOptions.push(...response.data);
+    });
+  },
+  methods: {
+    /** 获得流程实例 */
+    getDetail() {
+      // 获得流程实例相关
+      this.processInstanceLoading = true;
+      getProcessInstance(this.id).then(response => {
+        if (!response.data) {
+          this.$message.error('查询不到流程信息！');
+          return;
+        }
+        // 设置流程信息
+        this.processInstance = response.data;
+
+        //将业务表单，注册为动态组件
+        const path = this.processInstance.processDefinition.formCustomViewPath;
+        Vue.component("async-biz-form-component", function(resolve) {
+          require([`@/views${path}`], resolve);
+        });
+
+        // 设置表单信息
+        if (this.processInstance.processDefinition.formType === 10) {
+          this.detailForm = {
+            ...JSON.parse(this.processInstance.processDefinition.formConf),
+            disabled: true, // 表单禁用
+            formBtns: false, // 按钮隐藏
+            fields: decodeFields(this.processInstance.processDefinition.formFields)
+          }
+          // 设置表单的值
+          this.detailForm.fields.forEach(item => {
+            const val = this.processInstance.formVariables[item.__vModel__]
+            if (val) {
+              item.__config__.defaultValue = val
+            }
+          });
+        }
+
+        // 加载流程图
+        getProcessDefinitionBpmnXML(this.processInstance.processDefinition.id).then(response => {
+          this.bpmnXML = response.data
+        });
+        // 加载活动列表
+        getActivityList({
+          processInstanceId: this.processInstance.id
+        }).then(response => {
+          this.activityList = response.data;
+        });
+
+        // 取消加载中
+        this.processInstanceLoading = false;
+      });
+
+      // 获得流程任务列表（审批记录）
+      this.tasksLoad = true;
+      this.runningTasks = [];
+      this.auditForms = [];
+      getTaskListByProcessInstanceId(this.id).then(response => {
+        // 审批记录
+        this.tasks = [];
+        // 移除已取消的审批
+        response.data.forEach(task => {
+          if (task.result !== 4) {
+            this.tasks.push(task);
+          }
+        });
+        // 排序，将未完成的排在前面，已完成的排在后面；
+        this.tasks.sort((a, b) => {
+          // 有已完成的情况，按照完成时间倒序
+          if (a.endTime && b.endTime) {
+            return b.endTime - a.endTime;
+          } else if (a.endTime) {
+            return 1;
+          } else if (b.endTime) {
+            return -1;
+            // 都是未完成，按照创建时间倒序
+          } else {
+            return b.createTime - a.createTime;
+          }
+        });
+
+        // 需要审核的记录
+        const userId = store.getters.userId;
+        this.tasks.forEach(task => {
+          if (task.result !== 1) { // 只有待处理才需要
+            return;
+          }
+          if (!task.assigneeUser || task.assigneeUser.id !== userId) { // 自己不是处理人
+            return;
+          }
+          this.runningTasks.push({...task});
+          this.auditForms.push({
+            reason: ''
+          })
+        });
+
+        // 取消加载中
+        this.tasksLoad = false;
+      });
+    },
+    getDateStar(ms) {
+      return getDate(ms);
+    },
+    getTimelineItemIcon(item) {
+      if (item.result === 1) {
+        return 'el-icon-time';
+      }
+      if (item.result === 2) {
+        return 'el-icon-check';
+      }
+      if (item.result === 3) {
+        return 'el-icon-close';
+      }
+      if (item.result === 4) {
+        return 'el-icon-remove-outline';
+      }
+      return '';
+    },
+    getTimelineItemType(item) {
+      if (item.result === 1) {
+        return 'primary';
+      }
+      if (item.result === 2) {
+        return 'success';
+      }
+      if (item.result === 3) {
+        return 'danger';
+      }
+      if (item.result === 4) {
+        return 'info';
+      }
+      return '';
+    },
+    /** 处理审批通过和不通过的操作 */
+    handleAudit(task, pass) {
+      const index = this.runningTasks.indexOf(task);
+      this.$refs['form' + index][0].validate(valid => {
+        if (!valid) {
+          return;
+        }
+        const data = {
+          id: task.id,
+          reason: this.auditForms[index].reason
+        }
+        if (pass) {
+          approveTask(data).then(response => {
+            this.$modal.msgSuccess("审批通过成功！");
+            this.getDetail(); // 获得最新详情
+          });
+        } else {
+          rejectTask(data).then(response => {
+            this.$modal.msgSuccess("审批不通过成功！");
+            this.getDetail(); // 获得最新详情
+          });
+        }
+      });
+    },
+    /** 处理转派审批人 */
+    handleUpdateAssignee(task) {
+      // 设置表单
+      this.resetUpdateAssigneeForm();
+      this.updateAssignee.form.id = task.id;
+      // 设置为打开
+      this.updateAssignee.open = true;
+    },
+    /** 提交转派审批人 */
+    submitUpdateAssigneeForm() {
+      this.$refs['updateAssigneeForm'].validate(valid => {
+        if (!valid) {
+          return;
+        }
+        updateTaskAssignee(this.updateAssignee.form).then(response => {
+          this.$modal.msgSuccess("转派任务成功！");
+          this.updateAssignee.open = false;
+          this.getDetail(); // 获得最新详情
+        });
+      });
+    },
+    /** 取消转派审批人 */
+    cancelUpdateAssigneeForm() {
+      this.updateAssignee.open = false;
+      this.resetUpdateAssigneeForm();
+    },
+    /** 重置转派审批人 */
+    resetUpdateAssigneeForm() {
+      this.updateAssignee.form = {
+        id: undefined,
+        assigneeUserId: undefined,
+      };
+      this.resetForm("updateAssigneeForm");
+    },
+    /** 处理审批退回的操作 */
+    handleDelegate(task) {
+      this.$modal.msgError("暂不支持【委派】功能，可以使用【转派】替代！");
+    },
+    /** 处理审批退回的操作 */
+    handleBack(task) {
+      this.$modal.msgError("暂不支持【退回】功能！");
+      // 可参考 http://blog.wya1.com/article/636697030/details/7296
+      // const data = {
+      //   id: task.id,
+      //   assigneeUserId: 1
+      // }
+      // backTask(data).then(response => {
+      //   this.$modal.msgSuccess("回退成功！");
+      //   this.getDetail(); // 获得最新详情
+      // });
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.my-process-designer {
+  height: calc(100vh - 200px);
+}
+
+.box-card {
+  width: 100%;
+  margin-bottom: 20px;
+}
+</style>

src/views/bpm/processInstance/index.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="app-container">
+    <doc-alert title="工作流" url="https://doc.iocoder.cn/bpm" />
+
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="流程名" prop="name">
+        <el-input v-model="queryParams.name" placeholder="请输入流程名" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="所属流程" prop="processDefinitionId">
+        <el-input v-model="queryParams.processDefinitionId" placeholder="请输入流程定义的编号" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="流程分类" prop="category">
+        <el-select v-model="queryParams.category" placeholder="请选择流程分类" clearable>
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY)"
+                     :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="提交时间" prop="createTime">
+        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)"
+                     :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="结果" prop="result">
+        <el-select v-model="queryParams.result" placeholder="请选择流结果" clearable>
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT)"
+                     :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                   v-hasPermi="['bpm:process-instance:query']">发起流程</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="编号" align="center" prop="id" width="320" />
+      <el-table-column label="流程名" align="center" prop="name" />
+      <el-table-column label="流程分类" align="center" prop="category">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="scope.row.category" />
+        </template>
+      </el-table-column>
+      <el-table-column label="当前审批任务" align="center" prop="tasks">
+        <template v-slot="scope">
+          <el-button v-for="task in scope.row.tasks" :key="task.id" type="text"">
+            <span>{{ task.name }}</span>
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" align="center" prop="status">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column label="结果" align="center" prop="result">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT" :value="scope.row.result"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="提交时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="结束时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.endTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button type="text" size="small" icon="el-icon-delete" v-if="scope.row.result === 1"
+                     v-hasPermi="['bpm:process-instance:cancel']" @click="handleCancel(scope.row)">取消</el-button>
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleDetail(scope.row)"
+                     v-hasPermi="['bpm:process-instance:query']">详情</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+  </div>
+</template>
+
+<script>
+import { getMyProcessInstancePage, cancelProcessInstance } from "@/api/bpm/processInstance";
+
+export default {
+  name: "BpmProcessInstance",
+  components: {
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 工作流的流程实例的拓展列表
+      list: [],
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        name: null,
+        processDefinitionId: null,
+        category: null,
+        status: null,
+        result: null,
+        createTime: []
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      // 执行查询
+      getMyProcessInstancePage(this.queryParams).then(response => {
+        this.list = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 **/
+    handleAdd() {
+      this.$router.push({ name: "BpmProcessInstanceCreate"})
+    },
+    /** 取消按钮操作 */
+    handleCancel(row) {
+      const id = row.id;
+      this.$prompt('请输入取消原因？', "取消流程", {
+        type: 'warning',
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
+        inputErrorMessage: "取消原因不能为空",
+      }).then(({ value }) => {
+        return cancelProcessInstance(id, value);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("取消成功");
+      })
+    },
+    /** 处理详情按钮 */
+    handleDetail(row) {
+      this.$router.push({ name: "BpmProcessInstanceDetail", query: { id: row.id}});
+    },
+  }
+};
+</script>

src/views/bpm/task/done/index.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="app-container">
+    <doc-alert title="工作流" url="https://doc.iocoder.cn/bpm" />
+
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="流程名" prop="name">
+        <el-input v-model="queryParams.name" placeholder="请输入流程名" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="任务编号" align="center" prop="id" width="320" fixed />
+      <el-table-column label="任务名称" align="center" prop="name" width="200" />
+      <el-table-column label="所属流程" align="center" prop="processInstance.name" width="200" />
+      <el-table-column label="流程发起人" align="center" prop="processInstance.startUserNickname" width="120" />
+      <el-table-column label="结果" align="center" prop="result">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT" :value="scope.row.result"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="审批意见" align="center" prop="reason" width="200" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="审批时间" align="center" prop="endTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.endTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="耗时" align="center" prop="durationInMillis" width="180">
+        <template v-slot="scope">
+          <span>{{ getDateStar(scope.row.durationInMillis) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleAudit(scope.row)"
+                     v-hasPermi="['bpm:task:query']">详情</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+  </div>
+</template>
+
+<script>
+import {getDoneTaskPage} from '@/api/bpm/task'
+import {getDate} from "@/utils/dateUtils";
+
+export default {
+  name: "BpmDoneTask",
+  components: {
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 已办任务列表
+      list: [],
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        name: null,
+        createTime: []
+      },
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      getDoneTaskPage(this.queryParams).then(response => {
+        this.list = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    getDateStar(ms) {
+      return getDate(ms);
+    },
+    /** 处理审批按钮 */
+    handleAudit(row) {
+      this.$router.push({ name: "BpmProcessInstanceDetail", query: { id: row.processInstance.id}});
+    },
+  }
+};
+</script>

src/views/bpm/task/todo/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="app-container">
+    <doc-alert title="工作流" url="https://doc.iocoder.cn/bpm" />
+
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="流程名" prop="name">
+        <el-input v-model="queryParams.name" placeholder="请输入流程名" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="任务编号" align="center" prop="id" width="320" />
+      <el-table-column label="任务名称" align="center" prop="name" />
+      <el-table-column label="所属流程" align="center" prop="processInstance.name" />
+      <el-table-column label="流程发起人" align="center" prop="processInstance.startUserNickname" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" align="center" prop="version" width="80">
+        <template v-slot="scope">
+          <el-tag type="success" v-if="scope.row.suspensionState === 1">激活</el-tag>
+          <el-tag type="warning" v-if="scope.row.suspensionState === 2">挂起</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleAudit(scope.row)"
+                     v-hasPermi="['bpm:task:update']">审批</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+  </div>
+</template>
+
+<script>
+import {getTodoTaskPage} from '@/api/bpm/task'
+
+export default {
+  name: "BpmTodoTask",
+  components: {
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 待办任务列表
+      list: [],
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        name: null,
+        createTime: []
+      },
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      // 处理查询参数
+      getTodoTaskPage(this.queryParams).then(response => {
+        this.list = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 处理审批按钮 */
+    handleAudit(row) {
+      this.$router.push({ name: "BpmProcessInstanceDetail", query: { id: row.processInstance.id}});
+    },
+  }
+};
+</script>

src/views/bpm/taskAssignRule/taskAssignRuleDialog.vue

@@ -0,0 +1,337 @@
+<template>
+  <div>
+    <!-- 列表弹窗 -->
+    <el-dialog title="任务分配规则" :visible.sync="visible" width="800px" append-to-body>
+      <el-table v-loading="loading" :data="list">
+        <el-table-column label="任务名" align="center" prop="taskDefinitionName" width="120" fixed />
+        <el-table-column label="任务标识" align="center" prop="taskDefinitionKey" width="120" show-tooltip-when-overflow />
+        <el-table-column label="规则类型" align="center" prop="type" width="120">
+          <template v-slot="scope">
+            <dict-tag :type="DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE" :value="scope.row.type" />
+          </template>
+        </el-table-column>
+        <el-table-column label="规则范围" align="center" prop="options" width="440px">
+          <template v-slot="scope">
+            <el-tag size="medium" v-if="scope.row.options" :key="option" v-for="option in scope.row.options">
+              {{ getAssignRuleOptionName(scope.row.type, option) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column v-if="modelId" label="操作" align="center" width="80" fixed="right">
+          <template v-slot="scope">
+            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateTaskAssignRule(scope.row)"
+                       v-hasPermi="['bpm:task-assign-rule:update']">修改</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+    <!-- 添加/修改弹窗 -->
+    <el-dialog title="修改任务规则" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="taskAssignRuleForm" :model="form" :rules="rules" label-width="110px">
+        <el-form-item label="任务名称" prop="taskDefinitionName">
+          <el-input v-model="form.taskDefinitionName" disabled />
+        </el-form-item>
+        <el-form-item label="任务标识" prop="taskDefinitionKey">
+          <el-input v-model="form.taskDefinitionKey" disabled />
+        </el-form-item>
+        <el-form-item label="规则类型" prop="type">
+          <el-select v-model="form.type" clearable style="width: 100%">
+            <el-option v-for="dict in taskAssignRuleTypeDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="form.type === 10" label="指定角色" prop="roleIds">
+          <el-select v-model="form.roleIds" multiple clearable style="width: 100%">
+            <el-option v-for="item in roleOptions" :key="parseInt(item.id)" :label="item.name" :value="parseInt(item.id)" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="form.type === 20 || form.type === 21" label="指定部门" prop="deptIds">
+          <treeselect v-model="form.deptIds" :options="deptTreeOptions" multiple flat :defaultExpandLevel="3"
+                      placeholder="请选择指定部门" :normalizer="normalizer"/>
+        </el-form-item>
+        <el-form-item v-if="form.type === 22" label="指定岗位" prop="postIds">
+          <el-select v-model="form.postIds" multiple clearable style="width: 100%">
+            <el-option v-for="item in postOptions" :key="parseInt(item.id)" :label="item.name" :value="parseInt(item.id)" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="form.type === 30 || form.type === 31 || form.type === 32" label="指定用户" prop="userIds">
+          <el-select v-model="form.userIds" multiple clearable style="width: 100%">
+            <el-option v-for="item in userOptions" :key="parseInt(item.id)" :label="item.nickname" :value="parseInt(item.id)" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="form.type === 40" label="指定用户组" prop="userGroupIds">
+          <el-select v-model="form.userGroupIds" multiple clearable style="width: 100%">
+            <el-option v-for="item in userGroupOptions" :key="parseInt(item.id)" :label="item.name" :value="parseInt(item.id)" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="form.type === 50" label="指定脚本" prop="scripts">
+          <el-select v-model="form.scripts" multiple clearable style="width: 100%">
+            <el-option v-for="dict in taskAssignScriptDictDatas" :key="parseInt(dict.value)"
+                       :label="dict.label" :value="parseInt(dict.value)"/>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitAssignRuleForm">确 定</el-button>
+        <el-button @click="cancelAssignRuleForm">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {DICT_TYPE, getDictDatas} from "@/utils/dict";
+import {createTaskAssignRule, getTaskAssignRuleList, updateTaskAssignRule} from "@/api/bpm/taskAssignRule";
+import {listSimpleRoles} from "@/api/system/role";
+import {listSimpleDepts} from "@/api/system/dept";
+
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import {listSimplePosts} from "@/api/system/post";
+import {listSimpleUsers} from "@/api/system/user";
+import {listSimpleUserGroups} from "@/api/bpm/userGroup";
+
+export default {
+  name: "BpmTaskAssignRule",
+  components: {
+    Treeselect
+  },
+  data() {
+    return {
+      // 如下参数，可传递
+      modelId: undefined, // 流程模型的编号。如果 modelId 非空，则用于流程模型的查看与配置
+      processDefinitionId: undefined, // 流程定义的编号。如果 processDefinitionId 非空，则用于流程定义的查看，不支持配置
+      visible: false,
+
+      // 任务分配规则表单
+      row: undefined, // 选中的流程模型
+      list: [], // 选中流程模型的任务分配规则们
+      loading: false, // 加载中
+      open: false, // 是否打开
+      form: {}, // 表单
+      rules: { // 表单校验规则
+        type: [{ required: true, message: "规则类型不能为空", trigger: "change" }],
+        roleIds: [{required: true, message: "指定角色不能为空", trigger: "change" }],
+        deptIds: [{required: true, message: "指定部门不能为空", trigger: "change" }],
+        postIds: [{required: true, message: "指定岗位不能为空", trigger: "change"}],
+        userIds: [{required: true, message: "指定用户不能为空", trigger: "change"}],
+        userGroupIds: [{required: true, message: "指定用户组不能为空", trigger: "change"}],
+        scripts: [{required: true, message: "指定脚本不能为空", trigger: "change"}],
+      },
+
+      // 各种下拉框
+      roleOptions: [],
+      deptOptions: [],
+      deptTreeOptions: [],
+      postOptions: [],
+      userOptions: [],
+      userGroupOptions: [],
+
+      // 数据字典
+      modelFormTypeDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_FORM_TYPE),
+      taskAssignRuleTypeDictDatas: getDictDatas(DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE),
+      taskAssignScriptDictDatas: getDictDatas(DICT_TYPE.BPM_TASK_ASSIGN_SCRIPT),
+    };
+  },
+  methods: {
+    initModel(modelId) {
+      this.modelId = modelId;
+      this.processDefinitionId = undefined;
+
+      // 初始化所有下拉框
+      this.init0();
+    },
+    initProcessDefinition(processDefinitionId) {
+      this.modelId = undefined;
+      this.processDefinitionId = processDefinitionId;
+
+      // 初始化所有下拉框
+      this.init0();
+    },
+    /** 初始化 */
+    init0() {
+      // 设置可见
+      this.visible = true;
+      // 获得列表
+      this.getList();
+
+      // 获得角色列表
+      this.roleOptions = [];
+      listSimpleRoles().then(response => {
+        this.roleOptions.push(...response.data);
+      });
+      // 获得部门列表
+      this.deptOptions = [];
+      this.deptTreeOptions = [];
+      listSimpleDepts().then(response => {
+        this.deptOptions.push(...response.data);
+        this.deptTreeOptions.push(...this.handleTree(response.data, "id"));
+      });
+      // 获得岗位列表
+      this.postOptions = [];
+      listSimplePosts().then(response => {
+        this.postOptions.push(...response.data);
+      });
+      // 获得用户列表
+      this.userOptions = [];
+      listSimpleUsers().then(response => {
+        this.userOptions.push(...response.data);
+      });
+      // 获得用户组列表
+      this.userGroupOptions = [];
+      listSimpleUserGroups().then(response => {
+        this.userGroupOptions.push(...response.data);
+      });
+    },
+    /** 获得任务分配规则列表 */
+    getList() {
+      this.loading = true;
+      getTaskAssignRuleList({
+        modelId: this.modelId,
+        processDefinitionId: this.processDefinitionId,
+      }).then(response => {
+        this.loading = false;
+        this.list = response.data;
+      })
+    },
+    /** 处理修改任务分配规则的按钮操作 */
+    handleUpdateTaskAssignRule(row) {
+      // 先重置标识
+      this.resetAssignRuleForm();
+      // 设置表单
+      this.form = {
+        ...row,
+        options: [],
+        roleIds: [],
+        deptIds: [],
+        postIds: [],
+        userIds: [],
+        userGroupIds: [],
+        scripts: [],
+      };
+      // 将 options 赋值到对应的 roleIds 等选项
+      if (row.type === 10) {
+        this.form.roleIds.push(...row.options);
+      } else if (row.type === 20 || row.type === 21) {
+        this.form.deptIds.push(...row.options);
+      } else if (row.type === 22) {
+        this.form.postIds.push(...row.options);
+      } else if (row.type === 30 || row.type === 31 || row.type === 32) {
+        this.form.userIds.push(...row.options);
+      } else if (row.type === 40) {
+        this.form.userGroupIds.push(...row.options);
+      } else if (row.type === 50) {
+        this.form.scripts.push(...row.options);
+      }
+      this.open = true;
+    },
+    /** 提交任务分配规则的表单 */
+    submitAssignRuleForm() {
+      this.$refs["taskAssignRuleForm"].validate(valid => {
+        if (valid) {
+          // 构建表单
+          let form = {
+            ...this.form,
+            taskDefinitionName: undefined,
+          };
+          // 将 roleIds 等选项赋值到 options 中
+          if (form.type === 10) {
+            form.options = form.roleIds;
+          } else if (form.type === 20 || form.type === 21) {
+            form.options = form.deptIds;
+          } else if (form.type === 22) {
+            form.options = form.postIds;
+          } else if (form.type === 30 || form.type === 31 || form.type === 32) {
+            form.options = form.userIds;
+          } else if (form.type === 40) {
+            form.options = form.userGroupIds;
+          } else if (form.type === 50) {
+            form.options = form.scripts;
+          }
+          form.roleIds = undefined;
+          form.deptIds = undefined;
+          form.postIds = undefined;
+          form.userIds = undefined;
+          form.userGroupIds = undefined;
+          form.scripts = undefined;
+          // 新增
+          if (!form.id) {
+            form.modelId = this.modelId; // 模型编号
+            createTaskAssignRule(form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+            // 修改
+          } else {
+            form.taskDefinitionKey = undefined; // 无法修改
+            updateTaskAssignRule(form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 取消任务分配规则的表单 */
+    cancelAssignRuleForm() {
+      this.open = false;
+      this.resetAssignRuleForm();
+    },
+    /** 表单重置 */
+    resetAssignRuleForm() {
+      this.form = {};
+      this.resetForm("taskAssignRuleForm");
+    },
+    getAssignRuleOptionName(type, option) {
+      if (type === 10) {
+        for (const roleOption of this.roleOptions) {
+          if (roleOption.id === option) {
+            return roleOption.name;
+          }
+        }
+      } else if (type === 20 || type === 21) {
+        for (const deptOption of this.deptOptions) {
+          if (deptOption.id === option) {
+            return deptOption.name;
+          }
+        }
+      } else if (type === 22) {
+        for (const postOption of this.postOptions) {
+          if (postOption.id === option) {
+            return postOption.name;
+          }
+        }
+      } else if (type === 30 || type === 31 || type === 32) {
+        for (const userOption of this.userOptions) {
+          if (userOption.id === option) {
+            return userOption.nickname;
+          }
+        }
+      } else if (type === 40) {
+        for (const userGroupOption of this.userGroupOptions) {
+          if (userGroupOption.id === option) {
+            return userGroupOption.name;
+          }
+        }
+      } else if (type === 50) {
+        option = option + ''; // 转换成 string
+        for (const dictData of this.taskAssignScriptDictDatas) {
+          if (dictData.value === option) {
+            return dictData.label;
+          }
+        }
+      }
+      return '未知(' + option + ')';
+    },
+    // 格式化部门的下拉框
+    normalizer(node) {
+      return {
+        id: node.id,
+        label: node.name,
+        children: node.children
+      }
+    }
+  }
+};
+</script>

src/views/components/icons/element-icons.js

@@ -0,0 +1,3 @@
+const elementIcons = ['platform-eleme', 'eleme', 'delete-solid', 'delete', 's-tools', 'setting', 'user-solid', 'user', 'phone', 'phone-outline', 'more', 'more-outline', 'star-on', 'star-off', 's-goods', 'goods', 'warning', 'warning-outline', 'question', 'info', 'remove', 'circle-plus', 'success', 'error', 'zoom-in', 'zoom-out', 'remove-outline', 'circle-plus-outline', 'circle-check', 'circle-close', 's-help', 'help', 'minus', 'plus', 'check', 'close', 'picture', 'picture-outline', 'picture-outline-round', 'upload', 'upload2', 'download', 'camera-solid', 'camera', 'video-camera-solid', 'video-camera', 'message-solid', 'bell', 's-cooperation', 's-order', 's-platform', 's-fold', 's-unfold', 's-operation', 's-promotion', 's-home', 's-release', 's-ticket', 's-management', 's-open', 's-shop', 's-marketing', 's-flag', 's-comment', 's-finance', 's-claim', 's-custom', 's-opportunity', 's-data', 's-check', 's-grid', 'menu', 'share', 'd-caret', 'caret-left', 'caret-right', 'caret-bottom', 'caret-top', 'bottom-left', 'bottom-right', 'back', 'right', 'bottom', 'top', 'top-left', 'top-right', 'arrow-left', 'arrow-right', 'arrow-down', 'arrow-up', 'd-arrow-left', 'd-arrow-right', 'video-pause', 'video-play', 'refresh', 'refresh-right', 'refresh-left', 'finished', 'sort', 'sort-up', 'sort-down', 'rank', 'loading', 'view', 'c-scale-to-original', 'date', 'edit', 'edit-outline', 'folder', 'folder-opened', 'folder-add', 'folder-remove', 'folder-delete', 'folder-checked', 'tickets', 'document-remove', 'document-delete', 'document-copy', 'document-checked', 'document', 'document-add', 'printer', 'paperclip', 'takeaway-box', 'search', 'monitor', 'attract', 'mobile', 'scissors', 'umbrella', 'headset', 'brush', 'mouse', 'coordinate', 'magic-stick', 'reading', 'data-line', 'data-board', 'pie-chart', 'data-analysis', 'collection-tag', 'film', 'suitcase', 'suitcase-1', 'receiving', 'collection', 'files', 'notebook-1', 'notebook-2', 'toilet-paper', 'office-building', 'school', 'table-lamp', 'house', 'no-smoking', 'smoking', 'shopping-cart-full', 'shopping-cart-1', 'shopping-cart-2', 'shopping-bag-1', 'shopping-bag-2', 'sold-out', 'sell', 'present', 'box', 'bank-card', 'money', 'coin', 'wallet', 'discount', 'price-tag', 'news', 'guide', 'male', 'female', 'thumb', 'cpu', 'link', 'connection', 'open', 'turn-off', 'set-up', 'chat-round', 'chat-line-round', 'chat-square', 'chat-dot-round', 'chat-dot-square', 'chat-line-square', 'message', 'postcard', 'position', 'turn-off-microphone', 'microphone', 'close-notification', 'bangzhu', 'time', 'odometer', 'crop', 'aim', 'switch-button', 'full-screen', 'copy-document', 'mic', 'stopwatch', 'medal-1', 'medal', 'trophy', 'trophy-1', 'first-aid-kit', 'discover', 'place', 'location', 'location-outline', 'location-information', 'add-location', 'delete-location', 'map-location', 'alarm-clock', 'timer', 'watch-1', 'watch', 'lock', 'unlock', 'key', 'service', 'mobile-phone', 'bicycle', 'truck', 'ship', 'basketball', 'football', 'soccer', 'baseball', 'wind-power', 'light-rain', 'lightning', 'heavy-rain', 'sunrise', 'sunrise-1', 'sunset', 'sunny', 'cloudy', 'partly-cloudy', 'cloudy-and-sunny', 'moon', 'moon-night', 'dish', 'dish-1', 'food', 'chicken', 'fork-spoon', 'knife-fork', 'burger', 'tableware', 'sugar', 'dessert', 'ice-cream', 'hot-water', 'water-cup', 'coffee-cup', 'cold-drink', 'goblet', 'goblet-full', 'goblet-square', 'goblet-square-full', 'refrigerator', 'grape', 'watermelon', 'cherry', 'apple', 'pear', 'orange', 'coffee', 'ice-tea', 'ice-drink', 'milk-tea', 'potato-strips', 'lollipop', 'ice-cream-square', 'ice-cream-round']
+
+export default elementIcons

src/views/components/icons/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="icons-container">
+    <aside>
+      <a href="#" target="_blank">Add and use
+      </a>
+    </aside>
+    <el-tabs type="border-card">
+      <el-tab-pane label="Icons">
+        <div v-for="item of svgIcons" :key="item">
+          <el-tooltip placement="top">
+            <div slot="content">
+              {{ generateIconCode(item) }}
+            </div>
+            <div class="icon-item">
+              <svg-icon :icon-class="item" class-name="disabled" />
+              <span>{{ item }}</span>
+            </div>
+          </el-tooltip>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="Element-UI Icons">
+        <div v-for="item of elementIcons" :key="item">
+          <el-tooltip placement="top">
+            <div slot="content">
+              {{ generateElementIconCode(item) }}
+            </div>
+            <div class="icon-item">
+              <i :class="'el-icon-' + item" />
+              <span>{{ item }}</span>
+            </div>
+          </el-tooltip>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import svgIcons from './svg-icons'
+import elementIcons from './element-icons'
+
+export default {
+  name: 'Icons',
+  data() {
+    return {
+      svgIcons,
+      elementIcons
+    }
+  },
+  methods: {
+    generateIconCode(symbol) {
+      return `<svg-icon icon-class="${symbol}" />`
+    },
+    generateElementIconCode(symbol) {
+      return `<i class="el-icon-${symbol}" />`
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.icons-container {
+  margin: 10px 20px 0;
+  overflow: hidden;
+
+  .icon-item {
+    margin: 20px;
+    height: 85px;
+    text-align: center;
+    width: 100px;
+    float: left;
+    font-size: 30px;
+    color: #24292e;
+    cursor: pointer;
+  }
+
+  span {
+    display: block;
+    font-size: 16px;
+    margin-top: 10px;
+  }
+
+  .disabled {
+    pointer-events: none;
+  }
+}
+</style>

src/views/components/icons/svg-icons.js

@@ -0,0 +1,10 @@
+const req = require.context('../../../assets/icons/svg', false, /\.svg$/)
+const requireAll = requireContext => requireContext.keys()
+
+const re = /\.\/(.*)\.svg/
+
+const svgIcons = requireAll(req).map(i => {
+  return i.match(re)[1]
+})
+
+export default svgIcons

src/views/core/base/factory/add-or-updata.vue

@@ -0,0 +1,78 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-11-18 14:16:25
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-08-01 16:59:06
+ * @Description:
+-->
+<template>
+	<el-form
+		:model="dataForm"
+		:rules="dataRule"
+		ref="dataForm"
+		@keyup.enter.native="dataFormSubmit()"
+		label-width="80px">
+		<el-form-item label="工厂编码" prop="code">
+			<el-input
+				v-model="dataForm.code"
+				clearable
+				placeholder="请输入工厂编码" />
+		</el-form-item>
+		<el-form-item label="工厂名称" prop="name">
+			<el-input
+				v-model="dataForm.name"
+				clearable
+				placeholder="请输入工厂名称" />
+		</el-form-item>
+		<el-form-item label="地址" prop="address">
+			<el-input v-model="dataForm.address" clearable placeholder="请输入地址" />
+		</el-form-item>
+		<!-- <el-form-item label="启用状态" prop="enabled">
+			<el-select
+				v-model="dataForm.enabled"
+				placeholder="请选择启用状态">
+				<el-option
+					v-for="dict in this.getDictDatas(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+					:key="dict.value"
+					:label="dict.label"
+					:value="dict.value" />
+			</el-select>
+		</el-form-item> -->
+		<el-form-item label="备注" prop="remark">
+			<el-input v-model="dataForm.remark" clearable placeholder="请输入备注" />
+		</el-form-item>
+	</el-form>
+</template>
+
+<script>
+import basicAdd from '../../mixins/basic-add';
+import { createFactory, updateFactory, getFactory, getCode } from "@/api/core/base/factory";
+
+export default {
+	mixins: [basicAdd],
+	data() {
+		return {
+			urlOptions: {
+			  isGetCode: true,
+        codeURL: getCode,
+				createURL: createFactory,
+				updateURL: updateFactory,
+				infoURL: getFactory,
+			},
+			dataForm: {
+        id: undefined,
+        code: undefined,
+        name: undefined,
+        address: undefined,
+        remark: undefined,
+			},
+			dataRule: {
+        code: [{ required: true, message: "工厂编码不能为空", trigger: "blur" }],
+        name: [{ required: true, message: "工厂名称不能为空", trigger: "blur" }],
+      }
+		};
+	},
+	methods: {
+	},
+};
+</script>

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

@@ -0,0 +1,150 @@
+<!--
+ * @Author: zwq
+ * @Date: 2023-08-21 14:26:23
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-08-21 15:30:22
+ * @Description:
+-->
+<template>
+	<div class="app-container">
+		<search-bar
+			:formConfigs="formConfig"
+			ref="searchBarForm"
+			@headBtnClick="buttonClick" />
+		<div style="margin: 30px 0" v-for="a in 3" :key="a">
+			<el-row type="flex" justify="space-around">
+				<el-col :span="5" v-for="i in 4" :key="i">
+					<el-row type="flex" justify="space-between">
+						<el-col :span="12" v-for="j in 2" :key="j">
+							<div
+								class="dashboard-layout-item"
+								v-for="z in 2"
+								:key="z"
+								style="background: #ffd781; float: left">
+								<div
+									class="dashboard-layout-item-cricle"
+									style="background: #16dc09" />
+								{{ i + '+' + j + '+' + z }}
+							</div>
+						</el-col>
+					</el-row>
+					<el-row type="flex" justify="space-between">
+						<el-col :span="12" v-for="j in 2" :key="j">
+							<div
+								class="dashboard-layout-item"
+								v-for="z in 2"
+								:key="z"
+								style="background: #ffd781; float: left">
+								<div
+									class="dashboard-layout-item-cricle"
+									style="background: #16dc09" />
+								{{ i + '+' + j + '+' + z }}
+							</div>
+						</el-col>
+					</el-row>
+				</el-col>
+			</el-row>
+      <el-divider></el-divider>
+			<el-row type="flex" justify="space-around">
+				<el-col :span="5" v-for="i in 4" :key="i">
+					<el-row type="flex" justify="space-between">
+						<el-col :span="12" v-for="j in 2" :key="j">
+							<div
+								class="dashboard-layout-item"
+								v-for="z in 2"
+								:key="z"
+								style="background: #ffd781; float: left">
+								<div
+									class="dashboard-layout-item-cricle"
+									style="background: #16dc09" />
+								{{ i + '+' + j + '+' + z }}
+							</div>
+						</el-col>
+					</el-row>
+					<el-row type="flex" justify="space-between">
+						<el-col :span="12" v-for="j in 2" :key="j">
+							<div
+								class="dashboard-layout-item"
+								v-for="z in 2"
+								:key="z"
+								style="background: #ffd781; float: left">
+								<div
+									class="dashboard-layout-item-cricle"
+									style="background: #16dc09" />
+								{{ i + '+' + j + '+' + z }}
+							</div>
+						</el-col>
+					</el-row>
+				</el-col>
+			</el-row>
+		</div>
+	</div>
+</template>
+
+<script>
+import basicPage from '../../mixins/basic-page';
+import {
+	deleteFactory,
+	getFactoryPage,
+	exportFactoryExcel,
+} from '@/api/core/base/factory';
+
+export default {
+	mixins: [basicPage],
+	data() {
+		return {
+			urlOptions: {
+				getDataListURL: getFactoryPage,
+				deleteURL: deleteFactory,
+				exportURL: exportFactoryExcel,
+			},
+			formConfig: [
+				{
+					type: 'input',
+					label: '工厂编码',
+					placeholder: '工厂编码',
+					param: 'code',
+				},
+				{
+					type: 'button',
+					btnName: '搜索',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: 'button',
+					btnName: '重置',
+					name: 'reset',
+				},
+			],
+		};
+	},
+	components: {},
+	created() {},
+	methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.dashboard-layout-item {
+	width: 80px;
+	text-align: center;
+	height: 32px;
+	box-shadow: 0px 3px 6px 0px rgba(166, 174, 190, 0.8);
+	border-radius: 2px 4px 4px 2px;
+	margin-bottom: 8px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	.dashboard-layout-item-cricle {
+		display: inline-block;
+		width: 12px;
+		height: 12px;
+		border-radius: 6px;
+		margin-right: 6px;
+	}
+}
+</style>

src/views/core/base/factory/index1.vue

@@ -0,0 +1,190 @@
+<template>
+	<div class="app-container">
+		<search-bar
+			:formConfigs="formConfig"
+			ref="searchBarForm"
+			@headBtnClick="buttonClick" />
+		<base-table
+			v-loading="dataListLoading"
+			:table-props="tableProps"
+			:page="listQuery.pageNo"
+			:limit="listQuery.pageSize"
+			:table-data="tableData">
+			<method-btn
+				v-if="tableBtn.length"
+				slot="handleBtn"
+				:width="120"
+				label="操作"
+				:method-list="tableBtn"
+				@clickBtn="handleClick" />
+		</base-table>
+		<pagination
+			:limit.sync="listQuery.pageSize"
+			:page.sync="listQuery.pageNo"
+			:total="listQuery.total"
+			@pagination="getDataList" />
+		<base-dialog
+			:dialogTitle="addOrEditTitle"
+			:dialogVisible="addOrUpdateVisible"
+			@cancel="handleCancel"
+			@confirm="handleConfirm"
+			:before-close="handleCancel"
+			width="70%">
+			<add-or-update
+				ref="addOrUpdate"
+				@refreshDataList="successSubmit"></add-or-update>
+		</base-dialog>
+	</div>
+</template>
+
+<script>
+import AddOrUpdate from './add-or-updata';
+import basicPage from '../../mixins/basic-page';
+import { parseTime } from '../../mixins/code-filter';
+import {
+	deleteFactory,
+	getFactoryPage,
+	exportFactoryExcel,
+} from '@/api/core/base/factory';
+
+const tableProps = [
+	{
+		prop: 'code',
+		label: '工厂编码',
+		align: 'center',
+	},
+	{
+		prop: 'name',
+		label: '工厂名称',
+		align: 'center',
+	},
+	{
+		prop: 'address',
+		label: '地址',
+		align: 'center',
+	},
+	{
+		prop: 'remark',
+		label: '备注',
+		align: 'center',
+	},
+	{
+		prop: 'createTime',
+		label: '创建时间',
+		align: 'center',
+		filter: parseTime,
+	},
+];
+
+export default {
+	mixins: [basicPage],
+	data() {
+		return {
+			urlOptions: {
+				getDataListURL: getFactoryPage,
+				deleteURL: deleteFactory,
+				exportURL: exportFactoryExcel,
+			},
+			tableProps,
+			tableBtn: [
+				this.$auth.hasPermi(`base:factory:update`)
+					? {
+							type: 'edit',
+							btnName: '编辑',
+					  }
+					: undefined,
+          this.$auth.hasPermi(`base:factory:delete`)
+					? {
+							type: 'delete',
+							btnName: '删除',
+					  }
+					: undefined,
+			].filter((v)=>v),
+			tableData: [],
+			formConfig: [
+				{
+					type: 'input',
+					label: '工厂编码',
+					placeholder: '工厂编码',
+					param: 'code',
+				},
+				{
+					type: 'input',
+					label: '工厂名称',
+					placeholder: '工厂名称',
+					param: 'name',
+				},
+				{
+					type: 'button',
+					btnName: '搜索',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: 'button',
+					btnName: '重置',
+					name: 'reset',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: this.$auth.hasPermi('base:factory:create') ? 'button' : '',
+					btnName: '新增',
+					name: 'add',
+					color: 'success',
+					plain: true,
+				},
+				// {
+				// 	type: this.$auth.hasPermi('base:factory:create') ? 'separate' : '',
+				// },
+				// {
+				// 	type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
+				// 	btnName: '导出',
+				// 	name: 'export',
+				// 	color: 'warning',
+				// },
+			],
+		};
+	},
+	components: {
+		AddOrUpdate,
+	},
+	created() {},
+	methods: {
+		buttonClick(val) {
+			switch (val.btnName) {
+				case 'search':
+					this.listQuery.pageNo = 1;
+					this.listQuery.pageSize = 10;
+					this.listQuery.name = val.name;
+					this.listQuery.code = val.code;
+					this.getDataList();
+					break;
+				case 'reset':
+					this.$refs.searchBarForm.resetForm();
+					this.listQuery = {
+						pageSize: 10,
+						pageNo: 1,
+						total: 1,
+					};
+					this.getDataList();
+					break;
+				case 'add':
+					this.addOrEditTitle = '新增';
+					this.addOrUpdateVisible = true;
+					this.addOrUpdateHandle();
+					break;
+				case 'export':
+					this.handleExport();
+					break;
+				default:
+					console.log(val);
+			}
+		},
+	},
+};
+</script>

src/views/core/base/factory/test.vue

@@ -0,0 +1,192 @@
+<!--
+ * @Author: gtz
+ * @Date: 2022-03-03 09:16:10
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-08-21 14:20:42
+ * @Description: file content
+ * @FilePath: \mt-ck-wms-ui\src\views\dashboard\index.vue
+-->
+<template>
+  <div class="dashboard-container">
+    <el-card class="dashboard-main">
+      <el-row class="dashboard-title">
+        <div class="dashboard-header-line" />
+        <div class="dashboard-header-title">库存信息</div>
+      </el-row>
+      <el-row class="dashboard-legend">
+        <div v-for="item in cassetteStatusList" :key="'cassette' + item.id" class="dashboard-legend-cassette">
+          <div class="dashboard-legend-cassette-cricle" :style="{background: item.color}" />
+          {{ item.name }}
+        </div>
+        |
+        <div v-for="item in portAttributeList" :key="'port' + item.id" class="dashboard-legend-port" :style="{background: item.color}">
+          {{ item.name }}
+        </div>
+        <div class="dashboard-legend-search">
+          <el-select v-model="current" size="mini" placeholder="请选择库存范围" @change="handleChange">
+            <el-option v-for="item in totalPage" :key="'select' + item" :label="'第' + item + '页'" :value="item" />
+          </el-select>
+        </div>
+      </el-row>
+      <el-row v-if="current * 80 < shelfList[0].rowList[0].portList.length" class="dashboard-layout" :gutter="12">
+        <el-col v-for="item in 4" :key="'shelfbox' + item" class="dashboard-layout-shelf-box" :span="6">
+          <el-row>
+            <el-col v-for="(i, index) in shelfList" :key="item + 'shelf' + i.id" :span="12" class="dashboard-layout-shelf">
+              <el-row>
+                <el-col v-for="z in i.rowList" :key="item + 'shelf' + i + 'row' + z.id" :span="12" class="dashboard-layout-row">
+                  <div v-for="x in 20" :key="item + 'shelf' + i + 'row' + z + 'item' + x" class="dashboard-layout-item" :style="{background: portAttributeObj[z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute], cursor: z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute === 3 ? 'not-allowed' : 'pointer', color: z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute === 3 ? '#A2A8B5' : ''}">
+                    <div v-if="z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3" class="dashboard-layout-item-cricle" :style="{background: z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteList[0] ? cassetteStatusObj[z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteList[0].status] : ''}" />
+                    {{ z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3 ? z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].name : 'XXXX' }}
+                  </div>
+                </el-col>
+              </el-row>
+              <div class="dashboard-layout-footer">
+                {{ '第' + rowIndex[index] + '排(' + ((current - 1) * 4 + item) + ')' }}
+              </div>
+            </el-col>
+          </el-row>
+        </el-col>
+      </el-row>
+      <el-row v-else class="dashboard-layout" :gutter="12">
+        <el-col v-for="item in Math.ceil((shelfList[0].rowList[0].portList.length - (current - 1) * 80) / 20)" :key="'shelfbox' + item" class="dashboard-layout-shelf-box" :span="6">
+          <el-row>
+            <el-col v-for="(i, index) in shelfList" :key="item + 'shelf' + i.id" :span="12" class="dashboard-layout-shelf">
+              <el-row v-if="item < Math.ceil((shelfList[0].rowList[0].portList.length - (current - 1) * 80) / 20)">
+                <el-col v-for="z in i.rowList" :key="item + 'shelf' + i + 'row' + z.id" :span="12" class="dashboard-layout-row">
+                  <div v-for="x in 20" :key="item + 'shelf' + i + 'row' + z + 'item' + x" class="dashboard-layout-item" :style="{background: portAttributeObj[z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute], cursor: z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute === 3 ? 'not-allowed' : 'pointer', color: z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute === 3 ? '#A2A8B5' : ''}">
+                    <div v-if="z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3" class="dashboard-layout-item-cricle" :style="{background: z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteList[0] ? cassetteStatusObj[z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteList[0].status] : ''}" />
+                    {{ z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3 ? z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].name : 'XXXX' }}
+                  </div>
+                </el-col>
+              </el-row>
+              <el-row v-else>
+                <el-col v-for="z in i.rowList" :key="item + 'shelf' + i + 'row' + z.id" :span="12" class="dashboard-layout-row">
+                  <div v-for="x in shelfList[0].rowList[0].portList.length - (item - 1) * 20 - (current - 1) * 80" :key="item + 'shelf' + i + 'row' + z + 'item' + x" class="dashboard-layout-item" :style="{background: portAttributeObj[z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute], cursor: z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute === 3 ? 'not-allowed' : 'pointer', color: z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute === 3 ? '#A2A8B5' : ''}">
+                    <div v-if="z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3" class="dashboard-layout-item-cricle" :style="{background: z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteList[0] ? cassetteStatusObj[z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteList[0].status] : ''}" />
+                    {{ z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3 ? z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].name : 'XXXX' }}
+                  </div>
+                </el-col>
+              </el-row>
+              <div class="dashboard-layout-footer">
+                {{ '第' + rowIndex[index] + '排(' + ((current - 1) * 4 + item) + ')' }}
+              </div>
+            </el-col>
+          </el-row>
+        </el-col>
+      </el-row>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import testdata from './testdata'
+
+export default {
+  name: 'Dashboard',
+  data () {
+    return testdata
+  },
+  created () {
+    console.log(this.shelfList)
+    this.totalPage = Math.ceil(this.shelfList[0].rowList[0].portList.length / 80)
+  },
+  methods: {
+    handleChange (v) {
+      console.log(v)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dashboard-container {
+  background: #F2F4F9;
+  min-height: calc(100vh - 134px);
+  overflow-x: scroll;
+  font-size: 14px;
+  .dashboard-main {
+    width: 100%;
+    min-width: 1380px;
+    background-color: #fff;
+    border-radius: 8px;
+    min-height: calc(100vh - 186px);
+    .dashboard-title {
+      .dashboard-header-line{
+        display: inline-block;
+        width: 4px;
+        height: 16px;
+        background: #0B58FF;
+        border-radius: 1px;
+        position: relative;
+        top: 2px;
+        margin-right: 4px;
+      }
+      .dashboard-header-title{
+        display: inline-block;
+        font-size: 16px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #000000;
+        line-height: 16px;
+      }
+    }
+    .dashboard-legend {
+      margin-top: 20px;
+      .dashboard-legend-cassette {
+        display: inline-block;
+        margin-right: 24px;
+        .dashboard-legend-cassette-cricle {
+          display: inline-block;
+          width: 12px;
+          height: 12px;
+          border-radius: 6px;
+        }
+      }
+      .dashboard-legend-port {
+        display: inline-block;
+        height: 24px;
+        line-height: 24px;
+        border-radius: 4px;
+        padding: 0 16px;
+        margin-left: 24px;
+      }
+      .dashboard-legend-search {
+        float: right;
+      }
+    }
+    .dashboard-layout {
+      margin: 20px 0;
+      .dashboard-layout-shelf-box {
+        .dashboard-layout-footer {
+          text-align: center;
+          margin-top: 12px;
+        }
+        .dashboard-layout-shelf {
+          padding: 0 8px;
+          .dashboard-layout-row {
+            padding: 0 1px;
+            .dashboard-layout-item {
+              width: 100%;
+              text-align: center;
+              height: 32px;
+              box-shadow: 0px 3px 6px 0px rgba(166, 174, 190, 0.8);
+              border-radius: 2px 4px 4px 2px;
+              margin-bottom: 8px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              .dashboard-layout-item-cricle{
+                display: inline-block;
+                width: 12px;
+                height: 12px;
+                border-radius: 6px;
+                margin-right: 6px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,103 @@
+<!--
+ * @Author: zwq
+ * @Date: 2023-08-02 15:12:42
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-08-03 14:24:36
+ * @Description:
+-->
+<template>
+	<div class="app-container">
+		<search-bar
+			:formConfigs="formConfig"
+			ref="searchBarForm"
+			@headBtnClick="buttonClick" />
+		<base-table
+			v-loading="dataListLoading"
+			:table-props="tableProps"
+			:page="listQuery.pageNo"
+			:limit="listQuery.pageSize"
+			:table-data="tableData"
+			@emitFun="inputChange" />
+		<pagination
+			:limit.sync="listQuery.pageSize"
+			:page.sync="listQuery.pageNo"
+			:total="listQuery.total"
+			@pagination="getDataList" />
+	</div>
+</template>
+
+<script>
+import basicPage from '../../mixins/basic-page';
+import { parseTime } from '../../mixins/code-filter';
+import { getLineBindProductPage } from '@/api/core/base/lineBindProduct';
+import selectProduct from './selectProduct';
+import { getProductPage } from '@/api/core/base/product';
+
+const tableProps = [
+	{
+		prop: 'lineName',
+		label: '产线',
+		align: 'center',
+	},
+	{
+		prop: 'productName',
+		label: '在制产品',
+		align: 'center',
+		list: [],
+		subcomponent: selectProduct,
+	},
+	{
+		prop: 'recordTime',
+		label: '开始时间',
+		align: 'center',
+		filter: parseTime,
+	},
+];
+
+export default {
+	mixins: [basicPage, selectProduct],
+	data() {
+		return {
+			urlOptions: {
+				getDataListURL: getLineBindProductPage,
+			},
+			tableProps,
+			tableData: [],
+			formConfig: [
+				{
+					type: 'button',
+					btnName: '同步',
+					name: 'search',
+					color: 'primary',
+				},
+			],
+		};
+	},
+	components: {},
+	created() {
+		const params = {
+			pageSize: 100,
+			pageNo: 1,
+		};
+		getProductPage(params).then((response) => {
+			this.tableProps[1].list = response.data.list;
+		});
+	},
+	methods: {
+		buttonClick(val) {
+			switch (val.btnName) {
+				case 'search':
+					this.listQuery.pageNo = 1;
+					this.listQuery.pageSize = 10;
+					this.getDataList();
+					break;
+				default:
+					console.log(val);
+			}
+		},
+		inputChange() {
+			this.getDataList();
+		},
+	},
+};
+</script>

src/views/core/base/lineBindProduct/selectProduct.vue

@@ -0,0 +1,73 @@
+<!--
+ * @Author: zwq
+ * @Date: 2023-08-03 14:09:18
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-08-03 14:51:16
+ * @Description:
+-->
+<template>
+	<div class="tableInner">
+		<el-input readonly v-model="list.productName" style="width: 50%;" ></el-input>
+		<el-popover
+    placement="top"
+    title="切换在制产品"
+    width="160"
+    v-model="visible">
+			<el-select v-model="list.string" style="margin: 5px;" filterable>
+				<el-option
+					v-for="item in injectData.list"
+					:key="item.id"
+					:label="item.name"
+					:value="item.id + '+' + item.name"></el-option>
+			</el-select>
+			<div style="text-align: right; margin: 0">
+				<el-button size="mini" type="text" @click="visible = false">
+					取消
+				</el-button>
+				<el-button type="primary" size="mini" @click="changeInput">
+					确定
+				</el-button>
+			</div>
+			<el-button type="text" slot="reference">切换</el-button>
+		</el-popover>
+	</div>
+</template>
+<script>
+import { switchLineBindProduct } from '@/api/core/base/lineBindProduct';
+
+export default {
+	props: {
+		injectData: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+	data() {
+		return {
+			list: this.injectData,
+			visible: false,
+		};
+	},
+	methods: {
+		changeInput() {
+			const data = {
+				id: this.list.id,
+				productId: this.list.string.split('+')[0],
+				productName: this.list.string.split('+')[1],
+			};
+			switchLineBindProduct(data).then((response) => {
+				this.$modal.msgSuccess('修改成功');
+				this.visible = false;
+				this.$emit('emitData');
+			});
+		},
+	},
+};
+</script>
+<style scoped>
+.tableInner .el-input__inner {
+	border: none;
+	padding: 0;
+	height: 33px;
+}
+</style>

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

@@ -0,0 +1,147 @@
+<template>
+	<div class="app-container">
+		<search-bar
+			:formConfigs="formConfig"
+			ref="searchBarForm"
+			@headBtnClick="buttonClick" />
+		<base-table
+			v-loading="dataListLoading"
+			:table-props="tableProps"
+			:page="listQuery.pageNo"
+			:limit="listQuery.pageSize"
+			:table-data="tableData" />
+		<pagination
+			:limit.sync="listQuery.pageSize"
+			:page.sync="listQuery.pageNo"
+			:total="listQuery.total"
+			@pagination="getDataList" />
+	</div>
+</template>
+
+<script>
+import basicPage from '../../mixins/basic-page';
+import { parseTime } from '../../mixins/code-filter';
+import { getLineBindProductLogPage } from '@/api/core/base/lineBindProductLog';
+import { getProductionLinePage } from '@/api/core/base/productionLine';
+import { getProductPage } from '@/api/core/base/product';
+
+const tableProps = [
+	{
+		prop: 'productionLineName',
+		label: '产线',
+		align: 'center',
+	},
+	{
+		prop: 'productName',
+		label: '在制产品',
+		align: 'center',
+	},
+	{
+		prop: 'startTime',
+		label: '开始时间',
+		align: 'center',
+		filter: parseTime,
+	},
+	{
+		prop: 'endTime',
+		label: '结束时间',
+		align: 'center',
+		filter: parseTime,
+	},
+];
+
+export default {
+	mixins: [basicPage],
+	data() {
+		return {
+			urlOptions: {
+				getDataListURL: getLineBindProductLogPage,
+			},
+			tableProps,
+			tableData: [],
+			optionArrUrl: [getProductionLinePage, getProductPage],
+			formConfig: [
+				{
+					type: 'select',
+					label: '产线',
+					selectOptions: [],
+					param: 'productionLineId',
+					defaultSelect: '',
+					filterable: true,
+				},
+				{
+					type: 'select',
+					label: '在制产品',
+					selectOptions: [],
+					param: 'productId',
+					defaultSelect: '',
+					filterable: true,
+				},
+				{
+					type: 'datePicker',
+					label: '时间',
+					dateType: 'daterange',
+					format: 'yyyy-MM-dd',
+					valueFormat: 'yyyy-MM-dd HH:mm:ss',
+					rangeSeparator: '-',
+					startPlaceholder: '开始时间',
+					endPlaceholder: '结束时间',
+					param: 'createTime',
+				},
+				{
+					type: 'button',
+					btnName: '搜索',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'button',
+					btnName: '重置',
+					name: 'reset',
+				},
+			],
+		};
+	},
+	components: {
+	},
+	created() {
+		this.getArr();
+	},
+	methods: {
+		getArr() {
+			const params = {
+				page: 1,
+				limit: 500,
+			};
+			this.optionArrUrl.forEach((item, index) => {
+				item(params).then((response) => {
+					this.formConfig[index].selectOptions = response.data.list;
+				});
+			});
+		},
+		buttonClick(val) {
+			switch (val.btnName) {
+				case 'search':
+					this.listQuery.pageNo = 1;
+					this.listQuery.pageSize = 10;
+					this.listQuery.productionLineId = val.productionLineId;
+					this.listQuery.productId = val.productId;
+					this.listQuery.createTime = val.createTime;
+					this.getDataList();
+					break;
+				case 'reset':
+					this.$refs.searchBarForm.resetForm();
+					this.listQuery = {
+						pageSize: 10,
+						pageNo: 1,
+						total: 1,
+					};
+					this.getDataList();
+					break;
+				default:
+					console.log(val);
+			}
+		},
+	},
+};
+</script>

src/views/core/base/product/SmallTitle.vue

@@ -0,0 +1,65 @@
+<!--
+ * @Author: zwq
+ * @Date: 2023-08-01 15:27:31
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-08-01 16:25:54
+ * @Description:
+-->
+<template>
+	<div :class="[className, { 'p-0': noPadding }]">
+		<slot />
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		size: {
+			// 取值范围:  xl lg md sm
+			type: String,
+			default: 'de',
+			validator: function (val) {
+				return ['xl', 'lg', 'de', 'md', 'sm'].indexOf(val) !== -1;
+			},
+		},
+		noPadding: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	computed: {
+		className: function () {
+			return `${this.size}-title`;
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+$pxls: (xl, 28px) (lg, 24px) (de, 20px) (md, 18px) (sm, 16px);
+$mgr: 8px;
+@each $size, $height in $pxls {
+	.#{$size}-title {
+		font-size: 18px;
+		line-height: $height;
+		color: #000;
+		font-weight: 500;
+		font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
+
+		&::before {
+			content: '';
+			display: inline-block;
+			vertical-align: top;
+			width: 4px;
+			height: $height + 2px;
+			border-radius: 1px;
+			margin-right: $mgr;
+			background-color: #0b58ff;
+		}
+	}
+}
+
+.p-0 {
+	padding: 0;
+}
+</style>

src/views/core/base/product/add-or-updata.vue

@@ -0,0 +1,425 @@
+<template>
+	<el-drawer
+		:visible.sync="visible"
+		:show-close="false"
+		:wrapper-closable="false"
+		class="drawer"
+		size="60%">
+		<small-title slot="title" :no-padding="true">
+			{{ isdetail ? '详情' : !dataForm.id ? '新增' : '编辑' }}
+		</small-title>
+
+		<div class="content">
+			<div class="visual-part">
+				<el-form
+					ref="dataForm"
+					:model="dataForm"
+					:rules="dataRule"
+					label-width="100px"
+					label-position="top"
+					@keyup.enter.native="dataFormSubmit">
+					<el-row :gutter="20">
+						<el-col :span="12">
+							<el-form-item label="产品编码" prop="code">
+								<el-input
+									v-model="dataForm.code"
+									clearable
+									:disabled="isdetail"
+									placeholder="请输入产品编码" />
+							</el-form-item>
+						</el-col>
+						<el-col :span="12">
+							<el-form-item label="产品名称" prop="name">
+								<el-input
+									v-model="dataForm.name"
+									clearable
+									:disabled="isdetail"
+									placeholder="请输入产品名称" />
+							</el-form-item>
+						</el-col>
+					</el-row>
+					<el-row :gutter="20">
+						<el-col :span="12">
+							<el-form-item label="产品类型" prop="typeDictValue">
+								<el-select
+									v-model="dataForm.typeDictValue"
+                  style="width: 100%"
+									:disabled="isdetail"
+									placeholder="请选择产品类型">
+									<el-option
+										v-for="dict in getDictDatas(DICT_TYPE.PRODUCT_TYPE)"
+										:key="dict.value"
+										:label="dict.label"
+										:value="dict.value" />
+								</el-select>
+							</el-form-item>
+						</el-col>
+						<el-col :span="12">
+							<el-form-item label="单位" prop="unitDictValue">
+								<el-select
+									v-model="dataForm.unitDictValue"
+                  style="width: 100%"
+									:disabled="isdetail"
+									placeholder="请选择单位">
+									<el-option
+										v-for="dict in getDictDatas(DICT_TYPE.UNIT_DICT)"
+										:key="dict.value"
+										:label="dict.label"
+										:value="dict.value" />
+								</el-select>
+							</el-form-item>
+						</el-col>
+					</el-row>
+					<el-row :gutter="20">
+						<el-col :span="12">
+							<el-form-item label="规格" prop="specifications">
+								<el-input
+									:disabled="isdetail"
+									v-model="dataForm.specifications"
+									placeholder="请输入规格" />
+							</el-form-item>
+						</el-col>
+						<el-col :span="12">
+							<el-form-item label="单位平方数" prop="area">
+								<el-input
+									:disabled="isdetail"
+                  v-model="dataForm.area"
+                  placeholder="请输入单位平方数" />
+							</el-form-item>
+						</el-col>
+					</el-row>
+					<el-row :gutter="20">
+						<el-col :span="24">
+							<el-form-item label="完成单位产品用时" prop="processTime">
+								<el-input
+									:disabled="isdetail"
+									v-model="dataForm.processTime"
+									placeholder="请输入完成单位产品用时" />
+							</el-form-item>
+						</el-col>
+					</el-row>
+				</el-form>
+
+				<small-title
+					style="margin: 16px 0; padding-left: 8px"
+					:no-padding="true">
+					产品属性列表
+				</small-title>
+
+				<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>
+import {
+	deleteProductAttr,
+	getProductAttrPage,
+} from '@/api/core/base/productAttr';
+
+import {
+	createProduct,
+	updateProduct,
+	getProduct,
+	getCode,
+} from '@/api/core/base/product';
+import productAttrAdd from './attr-add';
+import { parseTime } from '../../mixins/code-filter';
+import SmallTitle from './SmallTitle';
+
+const tableBtn = [
+	{
+		type: 'edit',
+		btnName: '编辑',
+	},
+	{
+		type: 'delete',
+		btnName: '删除',
+	},
+];
+const tableProps = [
+	{
+		prop: 'createTime',
+		label: '添加时间',
+		filter: parseTime,
+	},
+	{
+		prop: 'name',
+		label: '属性名',
+	},
+	{
+		prop: 'value',
+		label: '属性值',
+	},
+];
+
+export default {
+	components: { productAttrAdd, SmallTitle },
+	data() {
+		return {
+			visible: false,
+			addOrUpdateVisible: false,
+			tableBtn,
+			tableProps,
+			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;
+}
+</style>

src/views/core/base/product/attr-add.vue

@@ -0,0 +1,139 @@
+<template>
+	<el-dialog
+		:visible.sync="visible"
+		:width="'35%'"
+		:append-to-body="true"
+		:close-on-click-modal="false"
+		class="dialog">
+		<template #title>
+			<slot name="title">
+				<div class="titleStyle">
+					{{ !dataForm.id ? '新增' : '编辑' }}
+				</div>
+			</slot>
+		</template>
+
+		<el-form
+			ref="dataForm"
+			:model="dataForm"
+			:rules="dataRule"
+			label-width="100px"
+			@keyup.enter.native="dataFormSubmit()">
+			<el-form-item label="属性名" prop="name">
+				<el-input
+					v-model="dataForm.name"
+					placeholder="请输入属性名"
+					clearable />
+			</el-form-item>
+			<el-form-item label="属性值" prop="value">
+				<el-input
+					v-model="dataForm.value"
+					placeholder="请输入属性值"
+					clearable />
+			</el-form-item>
+		</el-form>
+
+		<el-row style="text-align: right">
+			<el-button @click="visible = false">取消</el-button>
+			<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+		</el-row>
+	</el-dialog>
+</template>
+
+<script>
+import {
+	createProductAttr,
+	updateProductAttr,
+	getProductAttr,
+} from '@/api/core/base/productAttr';
+
+export default {
+	props: {
+		productId: {
+			type: String,
+			default: '',
+		},
+	},
+	data() {
+		return {
+			visible: false,
+			dataForm: {
+				id: 0,
+				name: '',
+				value: '',
+			},
+			dataRule: {
+				name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
+			},
+		};
+	},
+	methods: {
+		init(id) {
+			this.dataForm.id = id || '';
+			this.visible = true;
+			this.$nextTick(() => {
+				this.$refs['dataForm'].resetFields();
+				if (this.dataForm.id) {
+					getProductAttr(this.dataForm.id).then((res) => {
+						const { name, value } = res.data;
+						this.dataForm.name = name;
+						this.dataForm.value = value;
+					});
+				}
+			});
+		},
+		// 表单提交
+		dataFormSubmit() {
+			this.$refs['dataForm'].validate((valid) => {
+				if (valid) {
+					// 修改的提交
+					if (this.dataForm.id) {
+						updateProductAttr({
+							...this.dataForm,
+							productId: this.productId,
+						}).then((response) => {
+							this.$modal.msgSuccess('修改成功');
+							this.visible = false;
+							this.$emit('refreshDataList');
+						});
+						return;
+					}
+					// 添加的提交
+					createProductAttr({
+						...this.dataForm,
+						productId: this.productId,
+					}).then((response) => {
+						this.$modal.msgSuccess('新增成功');
+						this.visible = false;
+						this.$emit('refreshDataList');
+					});
+				}
+			});
+		},
+	},
+};
+</script>
+
+<style scoped>
+.dialog >>> .el-dialog__body {
+	padding: 30px 24px;
+}
+.dialog >>> .el-dialog__header {
+	font-size: 16px;
+	color: rgba(0, 0, 0, 0.85);
+	font-weight: 500;
+	padding: 13px 24px;
+	border-bottom: 1px solid #e9e9e9;
+}
+.dialog >>> .el-dialog__header .titleStyle::before {
+	content: '';
+	display: inline-block;
+	width: 4px;
+	height: 16px;
+	background-color: #0b58ff;
+	border-radius: 1px;
+	margin-right: 8px;
+	position: relative;
+	top: 2px;
+}
+</style>

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

@@ -0,0 +1,205 @@
+<!--
+ * @Author: zwq
+ * @Date: 2023-08-01 14:55:51
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-08-03 15:22:53
+ * @Description:
+-->
+<template>
+	<div class="app-container">
+		<search-bar
+			:formConfigs="formConfig"
+			ref="searchBarForm"
+			@headBtnClick="buttonClick" />
+		<base-table
+			:table-props="tableProps"
+			:page="listQuery.pageNo"
+			:limit="listQuery.pageSize"
+			:table-data="tableData">
+			<method-btn
+				v-if="tableBtn.length"
+				slot="handleBtn"
+				:width="120"
+				label="操作"
+				:method-list="tableBtn"
+				@clickBtn="handleClick" />
+		</base-table>
+		<pagination
+			:limit.sync="listQuery.pageSize"
+			:page.sync="listQuery.pageNo"
+			:total="listQuery.total"
+			@pagination="getDataList" />
+		<add-or-update
+			v-if="addOrUpdateVisible"
+			ref="addOrUpdate"
+			@refreshDataList="getDataList" />
+	</div>
+</template>
+
+<script>
+import AddOrUpdate from './add-or-updata';
+import unitDict from './unitDict';
+import basicPage from '../../mixins/basic-page';
+import { parseTime } from '../../mixins/code-filter';
+import {
+	deleteProduct,
+	getProductPage,
+	exportProductExcel,
+} from '@/api/core/base/product';
+
+const tableProps = [
+	{
+		prop: 'code',
+		label: '产品编码',
+		align: 'center',
+	},
+	{
+		prop: 'name',
+		label: '产品名称',
+		align: 'center',
+	},
+	{
+		prop: 'specifications',
+		label: '规格',
+		align: 'center',
+	},
+	{
+		prop: 'unitDictValue',
+		label: '单位',
+		align: 'center',
+		subcomponent: unitDict,
+	},
+	{
+		prop: 'createTime',
+		label: '创建时间',
+		align: 'center',
+		filter: parseTime,
+	},
+];
+
+export default {
+	mixins: [basicPage],
+	data() {
+		return {
+			urlOptions: {
+				getDataListURL: getProductPage,
+				deleteURL: deleteProduct,
+				exportURL: exportProductExcel,
+			},
+			tableProps,
+			tableBtn: [
+				this.$auth.hasPermi(`base:product:update`)
+					? {
+							type: 'edit',
+							btnName: '编辑',
+					  }
+					: undefined,
+				this.$auth.hasPermi(`base:product:delete`)
+					? {
+							type: 'delete',
+							btnName: '删除',
+					  }
+					: undefined,
+				this.$auth.hasPermi(`base:product:update`)
+					? {
+							type: 'detail',
+							btnName: '详情',
+					  }
+					: undefined,
+			].filter((v) => v),
+			tableData: [],
+			formConfig: [
+				{
+					type: 'input',
+					label: '产品编码',
+					placeholder: '产品编码',
+					param: 'code',
+				},
+				{
+					type: 'input',
+					label: '产品名称',
+					placeholder: '产品名称',
+					param: 'name',
+				},
+				{
+					type: 'button',
+					btnName: '搜索',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: 'button',
+					btnName: '重置',
+					name: 'reset',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: this.$auth.hasPermi('base:product:create') ? 'button' : '',
+					btnName: '新增',
+					name: 'add',
+					color: 'success',
+					plain: true,
+				},
+				// {
+				// 	type: 'separate',
+				// 	type: this.$auth.hasPermi('base:product:create') ? 'separate' : '',
+				// },
+				// {
+				// 	type: this.$auth.hasPermi('base:product:export') ? 'button' : '',
+				// 	btnName: '导出',
+				// 	name: 'export',
+				// 	color: 'warning',
+				// },
+			],
+		};
+	},
+	components: {
+		AddOrUpdate,
+	},
+	created() {},
+	methods: {
+		buttonClick(val) {
+			switch (val.btnName) {
+				case 'search':
+					this.listQuery.pageNo = 1;
+					this.listQuery.pageSize = 10;
+					this.listQuery.name = val.name;
+					this.listQuery.code = val.code;
+					this.getDataList();
+					break;
+				case 'reset':
+					this.$refs.searchBarForm.resetForm();
+					this.listQuery = {
+						pageSize: 10,
+						pageNo: 1,
+						total: 1,
+					};
+					this.getDataList();
+					break;
+				case 'add':
+					this.addOrEditTitle = '新增';
+					this.addOrUpdateVisible = true;
+					this.addOrUpdateHandle();
+					break;
+				case 'export':
+					this.handleExport();
+					break;
+				default:
+					console.log(val);
+			}
+		},
+		otherMethods(val) {
+			this.addOrUpdateVisible = true;
+			this.addOrEditTitle = '详情';
+			this.$nextTick(() => {
+				this.$refs.addOrUpdate.init(val.data.id, true);
+			});
+		},
+	},
+};
+</script>

src/views/core/base/product/unitDict.vue

@@ -0,0 +1,15 @@
+<template>
+  <dict-tag
+    :type="DICT_TYPE.UNIT_DICT"
+    :value="injectData.unitDictValue" />
+</template>
+<script>
+export default {
+	props: {
+		injectData: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+};
+</script>

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

@@ -0,0 +1,228 @@
+<template>
+  <div class="app-container">
+
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="名称" prop="name">
+        <el-input v-model="queryParams.name" placeholder="请输入名称" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="产品id,关联产品表" prop="productId">
+        <el-input v-model="queryParams.productId" placeholder="请输入产品id,关联产品表" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="属性值" prop="value">
+        <el-input v-model="queryParams.value" placeholder="请输入属性值" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                   v-hasPermi="['base:product-attr:create']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+                   v-hasPermi="['base:product-attr:export']">导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="ID" align="center" prop="id" />
+      <el-table-column label="名称" align="center" prop="name" />
+      <el-table-column label="产品id,关联产品表" align="center" prop="productId" />
+      <el-table-column label="属性值" align="center" prop="value" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                     v-hasPermi="['base:product-attr:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['base:product-attr:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入名称" />
+        </el-form-item>
+        <el-form-item label="产品id,关联产品表" prop="productId">
+          <el-input v-model="form.productId" placeholder="请输入产品id,关联产品表" />
+        </el-form-item>
+        <el-form-item label="属性值" prop="value">
+          <el-input v-model="form.value" placeholder="请输入属性值" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { createProductAttr, updateProductAttr, deleteProductAttr, getProductAttr, getProductAttrPage, exportProductAttrExcel } from "@/api/core/base/productAttr";
+
+export default {
+  name: "ProductAttr",
+  components: {
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 产品属性列表
+      list: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        name: null,
+        productId: null,
+        value: null,
+        createTime: [],
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
+        productId: [{ required: true, message: "产品id,关联产品表不能为空", trigger: "blur" }],
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      // 执行查询
+      getProductAttrPage(this.queryParams).then(response => {
+        this.list = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    /** 取消按钮 */
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    /** 表单重置 */
+    reset() {
+      this.form = {
+        id: undefined,
+        name: undefined,
+        productId: undefined,
+        value: undefined,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加产品属性";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id;
+      getProductAttr(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改产品属性";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (!valid) {
+          return;
+        }
+        // 修改的提交
+        if (this.form.id != null) {
+          updateProductAttr(this.form).then(response => {
+            this.$modal.msgSuccess("修改成功");
+            this.open = false;
+            this.getList();
+          });
+          return;
+        }
+        // 添加的提交
+        createProductAttr(this.form).then(response => {
+          this.$modal.msgSuccess("新增成功");
+          this.open = false;
+          this.getList();
+        });
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const id = row.id;
+      this.$modal.confirm('是否确认删除产品属性编号为"' + id + '"的数据项?').then(function() {
+          return deleteProductAttr(id);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      // 处理查询参数
+      let params = {...this.queryParams};
+      params.pageNo = undefined;
+      params.pageSize = undefined;
+      this.$modal.confirm('是否确认导出所有产品属性数据项?').then(() => {
+          this.exportLoading = true;
+          return exportProductAttrExcel(params);
+        }).then(response => {
+          this.$download.excel(response, '产品属性.xls');
+          this.exportLoading = false;
+        }).catch(() => {});
+    }
+  }
+};
+</script>

src/views/core/base/productionLine/add-or-updata.vue

@@ -0,0 +1,104 @@
+<!--
+ * @Author: zwq
+ * @Date: 2023-08-01 13:52:10
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-08-01 16:59:35
+ * @Description:
+-->
+<template>
+	<el-form
+		:model="dataForm"
+		:rules="dataRule"
+		ref="dataForm"
+		@keyup.enter.native="dataFormSubmit()"
+		label-width="90px">
+		<el-form-item label="产线编码" prop="code">
+			<el-input
+				v-model="dataForm.code"
+				clearable
+				placeholder="请输入产线编码" />
+		</el-form-item>
+		<el-form-item label="产线名称" prop="name">
+			<el-input
+				v-model="dataForm.name"
+				clearable
+				placeholder="请输入产线名称" />
+		</el-form-item>
+    <el-form-item prop="factoryId" label="工厂名称">
+      <el-select
+      v-model="dataForm.factoryId" filterable clearable placeholder="请选择工厂">
+        <el-option
+          v-for="item in urlOptions.optionArr.arr0"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+    </el-form-item>
+		<el-form-item label="产线TT值(h)" prop="tvalue">
+			<el-input v-model="dataForm.tvalue" clearable placeholder="请输入每小时下片数量" />
+		</el-form-item>
+		<el-form-item label="描述" prop="description">
+			<el-input
+				v-model="dataForm.description"
+				type="textarea"
+				placeholder="请输入内容" />
+		</el-form-item>
+		<el-form-item label="备注" prop="remark">
+			<el-input v-model="dataForm.remark" clearable placeholder="请输入备注" />
+		</el-form-item>
+	</el-form>
+</template>
+
+<script>
+import basicAdd from '../../mixins/basic-add';
+import {
+	createProductionLine,
+	updateProductionLine,
+	getProductionLine,
+	getCode,
+} from '@/api/core/base/productionLine';
+import {
+	getFactoryPage,
+} from '@/api/core/base/factory';
+
+export default {
+	mixins: [basicAdd],
+	data() {
+		return {
+			urlOptions: {
+        getOption: true,
+			  isGetCode: true,
+        codeURL: getCode,
+				createURL: createProductionLine,
+				updateURL: updateProductionLine,
+				infoURL: getProductionLine,
+        optionArrUrl: [getFactoryPage],
+			},
+			dataForm: {
+				id: undefined,
+				code: undefined,
+				name: undefined,
+				tvalue: undefined,
+				factoryId: undefined,
+				remark: undefined,
+				description: undefined,
+			},
+			dataRule: {
+				code: [
+					{ required: true, message: '产线编码不能为空', trigger: 'blur' },
+				],
+				name: [
+					{ required: true, message: '产线名称不能为空', trigger: 'blur' },
+				],
+        factoryId: [
+					{ required: true, message: '工厂不能为空', trigger: 'change' },
+				],
+			},
+		};
+	},
+	methods: {
+	},
+};
+</script>

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

@@ -0,0 +1,225 @@
+<template>
+	<div class="app-container">
+		<search-bar
+			:formConfigs="formConfig"
+			ref="searchBarForm"
+			@headBtnClick="buttonClick" />
+		<base-table
+			v-loading="dataListLoading"
+			:table-props="tableProps"
+			:page="listQuery.pageNo"
+			:limit="listQuery.pageSize"
+			:table-data="tableData">
+			<method-btn
+				v-if="tableBtn.length"
+				slot="handleBtn"
+				:width="120"
+				label="操作"
+				:method-list="tableBtn"
+				@clickBtn="handleClick" />
+		</base-table>
+		<pagination
+			:limit.sync="listQuery.pageSize"
+			:page.sync="listQuery.pageNo"
+			:total="listQuery.total"
+			@pagination="getDataList" />
+		<base-dialog
+			:dialogTitle="addOrEditTitle"
+			:dialogVisible="addOrUpdateVisible"
+			@cancel="handleCancel"
+			@confirm="handleConfirm"
+			:before-close="handleCancel"
+			width="70%">
+			<add-or-update
+				ref="addOrUpdate"
+				@refreshDataList="successSubmit"></add-or-update>
+		</base-dialog>
+	</div>
+</template>
+
+<script>
+import AddOrUpdate from './add-or-updata';
+import basicPage from '../../mixins/basic-page';
+import codeFilter from '../../mixins/code-filter';
+import { parseTime } from '../../mixins/code-filter';
+import {
+	deleteProductionLine,
+	getProductionLinePage,
+	exportProductionLineExcel,
+	getStatus,
+} from '@/api/core/base/productionLine';
+
+const tableProps = [
+	{
+		prop: 'code',
+		label: '产线编码',
+		align: 'center',
+	},
+	{
+		prop: 'name',
+		label: '产线名称',
+		align: 'center',
+	},
+	{
+		prop: 'factoryName',
+		label: '工厂',
+		align: 'center',
+	},
+	{
+		prop: 'externalCode',
+		label: '额外编码',
+		align: 'center',
+	},
+	{
+		prop: 'status',
+		label: '当前状态',
+		align: 'center',
+		filter: codeFilter('lineStatus'),
+	},
+	{
+		prop: 'description',
+		label: '描述',
+		align: 'center',
+	},
+	{
+		prop: 'remark',
+		label: '备注',
+		align: 'center',
+	},
+	{
+		prop: 'createTime',
+		label: '创建时间',
+		align: 'center',
+		filter: parseTime,
+	},
+];
+
+export default {
+	mixins: [basicPage],
+	data() {
+		return {
+			urlOptions: {
+				getDataListURL: getProductionLinePage,
+				deleteURL: deleteProductionLine,
+				exportURL: exportProductionLineExcel,
+			},
+			tableProps,
+			tableBtn: [
+				this.$auth.hasPermi(`base:production-line:update`)
+					? {
+							type: 'edit',
+							btnName: '编辑',
+					  }
+					: undefined,
+				this.$auth.hasPermi(`base:production-line:delete`)
+					? {
+							type: 'delete',
+							btnName: '删除',
+					  }
+					: undefined,
+			].filter((v) => v),
+			tableData: [],
+			formConfig: [
+				{
+					type: 'input',
+					label: '产线名称',
+					placeholder: '产线名称',
+					param: 'name',
+				},
+				{
+					type: 'button',
+					btnName: '搜索',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: 'button',
+					btnName: '重置',
+					name: 'reset',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: this.$auth.hasPermi('base:production-line:create')
+						? 'button'
+						: '',
+					btnName: '新增',
+					name: 'add',
+					color: 'success',
+					plain: true,
+				},
+				// {
+				// 	type: this.$auth.hasPermi('base:production-line:create') ? 'separate' : '',
+				// },
+				// {
+				// 	type: this.$auth.hasPermi('base:production-line:export') ? 'button' : '',
+				// 	btnName: '导出',
+				// 	name: 'export',
+				// 	color: 'warning',
+				// },
+			],
+		};
+	},
+	components: {
+		AddOrUpdate,
+	},
+	created() {},
+	methods: {
+		// 获取数据列表
+		getDataList() {
+			this.dataListLoading = true;
+			this.urlOptions.getDataListURL(this.listQuery).then((response) => {
+				this.total = response.data.total;
+				this.getStatus(response.data.list);
+				this.dataListLoading = false;
+			});
+		},
+		getStatus(list) {
+			const ids = list.map((i) => {
+				return i.id;
+			});
+			getStatus(ids).then((response) => {
+				response.forEach((a) => {
+					list.forEach((b) => {
+						if (b.id === a.id) b.status = a.status;
+					});
+				});
+				this.tableData = list;
+			});
+		},
+		buttonClick(val) {
+			switch (val.btnName) {
+				case 'search':
+					this.listQuery.pageNo = 1;
+					this.listQuery.pageSize = 10;
+					this.listQuery.name = val.name;
+					this.getDataList();
+					break;
+				case 'reset':
+					this.$refs.searchBarForm.resetForm();
+					this.listQuery = {
+						pageSize: 10,
+						pageNo: 1,
+						total: 1,
+					};
+					this.getDataList();
+					break;
+				case 'add':
+					this.addOrEditTitle = '新增';
+					this.addOrUpdateVisible = true;
+					this.addOrUpdateHandle();
+					break;
+				case 'export':
+					this.handleExport();
+					break;
+				default:
+					console.log(val);
+			}
+		},
+	},
+};
+</script>

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

@@ -0,0 +1,271 @@
+<template>
+  <div class="app-container">
+
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="产线id" prop="productionLineId">
+        <el-input v-model="queryParams.productionLineId" placeholder="请输入产线id" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="上一次记录时间至该条记录时间段内上片数量" prop="inputNum">
+        <el-input v-model="queryParams.inputNum" placeholder="请输入上一次记录时间至该条记录时间段内上片数量" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="上一次记录时间至该条记录时间段内下片数量" prop="outputNum">
+        <el-input v-model="queryParams.outputNum" placeholder="请输入上一次记录时间至该条记录时间段内下片数量" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="该记录时间点的累计上片数量" prop="sumInputNum">
+        <el-input v-model="queryParams.sumInputNum" placeholder="请输入该记录时间点的累计上片数量" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="该记录时间点的累计下片数量" prop="sumOutputNum">
+        <el-input v-model="queryParams.sumOutputNum" placeholder="请输入该记录时间点的累计下片数量" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="记录时间" prop="recordTime">
+        <el-date-picker v-model="queryParams.recordTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item label="合格率（%）" prop="passRate">
+        <el-input v-model="queryParams.passRate" placeholder="请输入合格率（%）" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                   v-hasPermi="['base:production-line-rec-day:create']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+                   v-hasPermi="['base:production-line-rec-day:export']">导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="ID" align="center" prop="id" />
+      <el-table-column label="产线id" align="center" prop="productionLineId" />
+      <el-table-column label="上一次记录时间至该条记录时间段内上片数量" align="center" prop="inputNum" />
+      <el-table-column label="上一次记录时间至该条记录时间段内下片数量" align="center" prop="outputNum" />
+      <el-table-column label="该记录时间点的累计上片数量" align="center" prop="sumInputNum" />
+      <el-table-column label="该记录时间点的累计下片数量" align="center" prop="sumOutputNum" />
+      <el-table-column label="记录时间" align="center" prop="recordTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.recordTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="合格率（%）" align="center" prop="passRate" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                     v-hasPermi="['base:production-line-rec-day:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['base:production-line-rec-day:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="产线id" prop="productionLineId">
+          <el-input v-model="form.productionLineId" placeholder="请输入产线id" />
+        </el-form-item>
+        <el-form-item label="上一次记录时间至该条记录时间段内上片数量" prop="inputNum">
+          <el-input v-model="form.inputNum" placeholder="请输入上一次记录时间至该条记录时间段内上片数量" />
+        </el-form-item>
+        <el-form-item label="上一次记录时间至该条记录时间段内下片数量" prop="outputNum">
+          <el-input v-model="form.outputNum" placeholder="请输入上一次记录时间至该条记录时间段内下片数量" />
+        </el-form-item>
+        <el-form-item label="该记录时间点的累计上片数量" prop="sumInputNum">
+          <el-input v-model="form.sumInputNum" placeholder="请输入该记录时间点的累计上片数量" />
+        </el-form-item>
+        <el-form-item label="该记录时间点的累计下片数量" prop="sumOutputNum">
+          <el-input v-model="form.sumOutputNum" placeholder="请输入该记录时间点的累计下片数量" />
+        </el-form-item>
+        <el-form-item label="记录时间" prop="recordTime">
+          <el-date-picker clearable v-model="form.recordTime" type="date" value-format="timestamp" placeholder="选择记录时间" />
+        </el-form-item>
+        <el-form-item label="合格率（%）" prop="passRate">
+          <el-input v-model="form.passRate" placeholder="请输入合格率（%）" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { createProductionLineRecDay, updateProductionLineRecDay, deleteProductionLineRecDay, getProductionLineRecDay, getProductionLineRecDayPage, exportProductionLineRecDayExcel } from "@/api/core/base/productionLineRecDay";
+
+export default {
+  name: "ProductionLineRecDay",
+  components: {
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 产线生产定时记录表 一天添加一次数据列表
+      list: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        productionLineId: null,
+        inputNum: null,
+        outputNum: null,
+        sumInputNum: null,
+        sumOutputNum: null,
+        recordTime: [],
+        passRate: null,
+        createTime: [],
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        inputNum: [{ required: true, message: "上一次记录时间至该条记录时间段内上片数量不能为空", trigger: "blur" }],
+        outputNum: [{ required: true, message: "上一次记录时间至该条记录时间段内下片数量不能为空", trigger: "blur" }],
+        sumInputNum: [{ required: true, message: "该记录时间点的累计上片数量不能为空", trigger: "blur" }],
+        sumOutputNum: [{ required: true, message: "该记录时间点的累计下片数量不能为空", trigger: "blur" }],
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      // 执行查询
+      getProductionLineRecDayPage(this.queryParams).then(response => {
+        this.list = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    /** 取消按钮 */
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    /** 表单重置 */
+    reset() {
+      this.form = {
+        id: undefined,
+        productionLineId: undefined,
+        inputNum: undefined,
+        outputNum: undefined,
+        sumInputNum: undefined,
+        sumOutputNum: undefined,
+        recordTime: undefined,
+        passRate: undefined,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加产线生产定时记录表 一天添加一次数据";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id;
+      getProductionLineRecDay(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改产线生产定时记录表 一天添加一次数据";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (!valid) {
+          return;
+        }
+        // 修改的提交
+        if (this.form.id != null) {
+          updateProductionLineRecDay(this.form).then(response => {
+            this.$modal.msgSuccess("修改成功");
+            this.open = false;
+            this.getList();
+          });
+          return;
+        }
+        // 添加的提交
+        createProductionLineRecDay(this.form).then(response => {
+          this.$modal.msgSuccess("新增成功");
+          this.open = false;
+          this.getList();
+        });
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const id = row.id;
+      this.$modal.confirm('是否确认删除产线生产定时记录表 一天添加一次数据编号为"' + id + '"的数据项?').then(function() {
+          return deleteProductionLineRecDay(id);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      // 处理查询参数
+      let params = {...this.queryParams};
+      params.pageNo = undefined;
+      params.pageSize = undefined;
+      this.$modal.confirm('是否确认导出所有产线生产定时记录表 一天添加一次数据数据项?').then(() => {
+          this.exportLoading = true;
+          return exportProductionLineRecDayExcel(params);
+        }).then(response => {
+          this.$download.excel(response, '产线生产定时记录表 一天添加一次数据.xls');
+          this.exportLoading = false;
+        }).catch(() => {});
+    }
+  }
+};
+</script>

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

@@ -0,0 +1,271 @@
+<template>
+  <div class="app-container">
+
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="产线id" prop="productionLineId">
+        <el-input v-model="queryParams.productionLineId" placeholder="请输入产线id" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="上一次记录时间至该条记录时间端内上片数量" prop="inputNum">
+        <el-input v-model="queryParams.inputNum" placeholder="请输入上一次记录时间至该条记录时间端内上片数量" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="上一次记录时间至该条记录时间端内下片数量" prop="outputNum">
+        <el-input v-model="queryParams.outputNum" placeholder="请输入上一次记录时间至该条记录时间端内下片数量" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="该记录时间点的累计上片数量" prop="sumInputNum">
+        <el-input v-model="queryParams.sumInputNum" placeholder="请输入该记录时间点的累计上片数量" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="该记录时间点的累计下片数量" prop="sumOutputNum">
+        <el-input v-model="queryParams.sumOutputNum" placeholder="请输入该记录时间点的累计下片数量" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="记录时间" prop="recordTime">
+        <el-date-picker v-model="queryParams.recordTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item label="合格率（%）" prop="passRate">
+        <el-input v-model="queryParams.passRate" placeholder="请输入合格率（%）" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                   v-hasPermi="['base:production-line-rec-sch:create']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+                   v-hasPermi="['base:production-line-rec-sch:export']">导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="ID" align="center" prop="id" />
+      <el-table-column label="产线id" align="center" prop="productionLineId" />
+      <el-table-column label="上一次记录时间至该条记录时间端内上片数量" align="center" prop="inputNum" />
+      <el-table-column label="上一次记录时间至该条记录时间端内下片数量" align="center" prop="outputNum" />
+      <el-table-column label="该记录时间点的累计上片数量" align="center" prop="sumInputNum" />
+      <el-table-column label="该记录时间点的累计下片数量" align="center" prop="sumOutputNum" />
+      <el-table-column label="记录时间" align="center" prop="recordTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.recordTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="合格率（%）" align="center" prop="passRate" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                     v-hasPermi="['base:production-line-rec-sch:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['base:production-line-rec-sch:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="产线id" prop="productionLineId">
+          <el-input v-model="form.productionLineId" placeholder="请输入产线id" />
+        </el-form-item>
+        <el-form-item label="上一次记录时间至该条记录时间端内上片数量" prop="inputNum">
+          <el-input v-model="form.inputNum" placeholder="请输入上一次记录时间至该条记录时间端内上片数量" />
+        </el-form-item>
+        <el-form-item label="上一次记录时间至该条记录时间端内下片数量" prop="outputNum">
+          <el-input v-model="form.outputNum" placeholder="请输入上一次记录时间至该条记录时间端内下片数量" />
+        </el-form-item>
+        <el-form-item label="该记录时间点的累计上片数量" prop="sumInputNum">
+          <el-input v-model="form.sumInputNum" placeholder="请输入该记录时间点的累计上片数量" />
+        </el-form-item>
+        <el-form-item label="该记录时间点的累计下片数量" prop="sumOutputNum">
+          <el-input v-model="form.sumOutputNum" placeholder="请输入该记录时间点的累计下片数量" />
+        </el-form-item>
+        <el-form-item label="记录时间" prop="recordTime">
+          <el-date-picker clearable v-model="form.recordTime" type="date" value-format="timestamp" placeholder="选择记录时间" />
+        </el-form-item>
+        <el-form-item label="合格率（%）" prop="passRate">
+          <el-input v-model="form.passRate" placeholder="请输入合格率（%）" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { createProductionLineRecSch, updateProductionLineRecSch, deleteProductionLineRecSch, getProductionLineRecSch, getProductionLineRecSchPage, exportProductionLineRecSchExcel } from "@/api/core/base/productionLineRecSch";
+
+export default {
+  name: "ProductionLineRecSch",
+  components: {
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 产线生产定时记录表 一小时添加一次数据	至少需要一个上片设备和下片设备才会自动添加列表
+      list: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        productionLineId: null,
+        inputNum: null,
+        outputNum: null,
+        sumInputNum: null,
+        sumOutputNum: null,
+        recordTime: [],
+        passRate: null,
+        createTime: [],
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        inputNum: [{ required: true, message: "上一次记录时间至该条记录时间端内上片数量不能为空", trigger: "blur" }],
+        outputNum: [{ required: true, message: "上一次记录时间至该条记录时间端内下片数量不能为空", trigger: "blur" }],
+        sumInputNum: [{ required: true, message: "该记录时间点的累计上片数量不能为空", trigger: "blur" }],
+        sumOutputNum: [{ required: true, message: "该记录时间点的累计下片数量不能为空", trigger: "blur" }],
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      // 执行查询
+      getProductionLineRecSchPage(this.queryParams).then(response => {
+        this.list = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    /** 取消按钮 */
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    /** 表单重置 */
+    reset() {
+      this.form = {
+        id: undefined,
+        productionLineId: undefined,
+        inputNum: undefined,
+        outputNum: undefined,
+        sumInputNum: undefined,
+        sumOutputNum: undefined,
+        recordTime: undefined,
+        passRate: undefined,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加产线生产定时记录表 一小时添加一次数据	至少需要一个上片设备和下片设备才会自动添加";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id;
+      getProductionLineRecSch(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改产线生产定时记录表 一小时添加一次数据	至少需要一个上片设备和下片设备才会自动添加";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (!valid) {
+          return;
+        }
+        // 修改的提交
+        if (this.form.id != null) {
+          updateProductionLineRecSch(this.form).then(response => {
+            this.$modal.msgSuccess("修改成功");
+            this.open = false;
+            this.getList();
+          });
+          return;
+        }
+        // 添加的提交
+        createProductionLineRecSch(this.form).then(response => {
+          this.$modal.msgSuccess("新增成功");
+          this.open = false;
+          this.getList();
+        });
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const id = row.id;
+      this.$modal.confirm('是否确认删除产线生产定时记录表 一小时添加一次数据	至少需要一个上片设备和下片设备才会自动添加编号为"' + id + '"的数据项?').then(function() {
+          return deleteProductionLineRecSch(id);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      // 处理查询参数
+      let params = {...this.queryParams};
+      params.pageNo = undefined;
+      params.pageSize = undefined;
+      this.$modal.confirm('是否确认导出所有产线生产定时记录表 一小时添加一次数据	至少需要一个上片设备和下片设备才会自动添加数据项?').then(() => {
+          this.exportLoading = true;
+          return exportProductionLineRecSchExcel(params);
+        }).then(response => {
+          this.$download.excel(response, '产线生产定时记录表 一小时添加一次数据	至少需要一个上片设备和下片设备才会自动添加.xls');
+          this.exportLoading = false;
+        }).catch(() => {});
+    }
+  }
+};
+</script>

src/views/core/base/workshopSection/add-or-updata.vue

@@ -0,0 +1,100 @@
+<!--
+ * @Author: zwq
+ * @Date: 2023-08-01 13:52:10
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-08-01 16:58:44
+ * @Description:
+-->
+<template>
+	<el-form
+		:model="dataForm"
+		:rules="dataRule"
+		ref="dataForm"
+		@keyup.enter.native="dataFormSubmit()"
+		label-width="90px">
+		<el-form-item label="工段编码" prop="code">
+			<el-input
+				v-model="dataForm.code"
+				clearable
+				placeholder="请输入工段编码" />
+		</el-form-item>
+		<el-form-item label="工段名称" prop="name">
+			<el-input
+				v-model="dataForm.name"
+				clearable
+				placeholder="请输入工段名称" />
+		</el-form-item>
+    <el-form-item prop="productionLineId" label="产线">
+      <el-select
+      v-model="dataForm.productionLineId" filterable clearable placeholder="请选择产线">
+        <el-option
+          v-for="item in urlOptions.optionArr.arr0"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+    </el-form-item>
+		<el-form-item label="排序" prop="sort">
+			<el-input-number v-model="dataForm.sort" :min="1" clearable placeholder="请输入排序" />
+		</el-form-item>
+		<el-form-item label="备注" prop="remark">
+			<el-input v-model="dataForm.remark" clearable placeholder="请输入备注" />
+		</el-form-item>
+	</el-form>
+</template>
+
+<script>
+import basicAdd from '../../mixins/basic-add';
+import {
+	createWorkshopSection,
+	updateWorkshopSection,
+	getWorkshopSection,
+	getCode,
+} from '@/api/core/base/workshopSection';
+import {
+	getProductionLinePage,
+} from '@/api/core/base/productionLine';
+
+export default {
+	mixins: [basicAdd],
+	data() {
+		return {
+			urlOptions: {
+        getOption: true,
+			  isGetCode: true,
+        codeURL: getCode,
+				createURL: createWorkshopSection,
+				updateURL: updateWorkshopSection,
+				infoURL: getWorkshopSection,
+        optionArrUrl: [getProductionLinePage],
+			},
+			dataForm: {
+				id: undefined,
+				code: undefined,
+				productionLineId: undefined,
+				sort: undefined,
+				name: undefined,
+				remark: undefined,
+			},
+			dataRule: {
+				code: [
+					{ required: true, message: '工段编码不能为空', trigger: 'blur' },
+				],
+				name: [
+					{ required: true, message: '工段名称不能为空', trigger: 'blur' },
+				],
+				sort: [
+					{ required: true, message: '排序不能为空', trigger: 'blur' },
+				],
+        productionLineId: [
+					{ required: true, message: '产线不能为空', trigger: 'change' },
+				],
+			},
+		};
+	},
+	methods: {
+	},
+};
+</script>

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

@@ -0,0 +1,188 @@
+<template>
+	<div class="app-container">
+		<search-bar
+			:formConfigs="formConfig"
+			ref="searchBarForm"
+			@headBtnClick="buttonClick" />
+		<base-table
+      v-loading="dataListLoading"
+			:table-props="tableProps"
+			:page="listQuery.pageNo"
+			:limit="listQuery.pageSize"
+			:table-data="tableData">
+			<method-btn
+				v-if="tableBtn.length"
+				slot="handleBtn"
+				:width="120"
+				label="操作"
+				:method-list="tableBtn"
+				@clickBtn="handleClick" />
+		</base-table>
+		<pagination
+			:limit.sync="listQuery.pageSize"
+			:page.sync="listQuery.pageNo"
+			:total="listQuery.total"
+			@pagination="getDataList" />
+		<base-dialog
+			:dialogTitle="addOrEditTitle"
+			:dialogVisible="addOrUpdateVisible"
+			@cancel="handleCancel"
+			@confirm="handleConfirm"
+			:before-close="handleCancel"
+			width="70%">
+			<add-or-update
+				ref="addOrUpdate"
+				@refreshDataList="successSubmit"></add-or-update>
+		</base-dialog>
+	</div>
+</template>
+
+<script>
+import AddOrUpdate from './add-or-updata';
+import basicPage from '../../mixins/basic-page';
+import { parseTime } from '../../mixins/code-filter';
+import {
+  deleteWorkshopSection,
+  getWorkshopSectionPage,
+  exportWorkshopSectionExcel
+} from "@/api/core/base/workshopSection";
+
+const tableProps = [
+	{
+		prop: 'code',
+		label: '工段编码',
+		align: 'center',
+	},
+	{
+		prop: 'name',
+		label: '工段名称',
+		align: 'center',
+	},
+	{
+		prop: 'productionLineName',
+		label: '产线',
+		align: 'center',
+	},
+	{
+		prop: 'sort',
+		label: '排序',
+		align: 'center',
+	},
+	{
+		prop: 'remark',
+		label: '备注',
+		align: 'center',
+	},
+	{
+		prop: 'createTime',
+		label: '创建时间',
+		align: 'center',
+		filter: parseTime,
+	},
+];
+
+export default {
+	mixins: [basicPage],
+	data() {
+		return {
+			urlOptions: {
+				getDataListURL: getWorkshopSectionPage,
+				deleteURL: deleteWorkshopSection,
+				exportURL: exportWorkshopSectionExcel,
+			},
+			tableProps,
+			tableBtn: [
+				this.$auth.hasPermi(`base:workshop-section:update`)
+					? {
+							type: 'edit',
+							btnName: '编辑',
+					  }
+					: undefined,
+          this.$auth.hasPermi(`base:workshop-section:delete`)
+					? {
+							type: 'delete',
+							btnName: '删除',
+					  }
+					: undefined,
+			].filter((v)=>v),
+			tableData: [],
+			formConfig: [
+				{
+					type: 'input',
+					label: '工段名称',
+					placeholder: '工段名称',
+					param: 'name',
+				},
+				{
+					type: 'button',
+					btnName: '搜索',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: 'button',
+					btnName: '重置',
+					name: 'reset',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: this.$auth.hasPermi('base:workshop-section:create') ? 'button' : '',
+					btnName: '新增',
+					name: 'add',
+					color: 'success',
+					plain: true,
+				},
+				// {
+				// 	type: this.$auth.hasPermi('base:workshop-section:create') ? 'separate' : '',
+				// },
+				// {
+				// 	type: this.$auth.hasPermi('base:workshop-section:export') ? 'button' : '',
+				// 	btnName: '导出',
+				// 	name: 'export',
+				// 	color: 'warning',
+				// },
+			],
+		};
+	},
+	components: {
+		AddOrUpdate,
+	},
+	created() {},
+	methods: {
+		buttonClick(val) {
+			switch (val.btnName) {
+				case 'search':
+					this.listQuery.pageNo = 1;
+					this.listQuery.pageSize = 10;
+					this.listQuery.name = val.name;
+					this.getDataList();
+					break;
+				case 'reset':
+					this.$refs.searchBarForm.resetForm();
+					this.listQuery = {
+						pageSize: 10,
+						pageNo: 1,
+						total: 1,
+					};
+					this.getDataList();
+					break;
+				case 'add':
+					this.addOrEditTitle = '新增';
+					this.addOrUpdateVisible = true;
+					this.addOrUpdateHandle();
+					break;
+				case 'export':
+					this.handleExport();
+					break;
+				default:
+					console.log(val);
+			}
+		},
+	},
+};
+</script>

src/views/core/mixins/basic-add.js

@@ -0,0 +1,100 @@
+/*
+ * @Author: zwq
+ * @Date: 2022-08-24 11:19:43
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-08-03 14:21:04
+ * @Description:
+ */
+export default {
+  data() {
+    /* eslint-disable */
+    return {
+      urlOptions: {
+        createURL: '',
+        updateURL: '',
+        infoURL: '',
+        codeURL: '',
+        getOption: false,
+        isGetCode: false,
+        optionArrUrl: [],
+        optionArr: {}
+      },
+      visible: false,
+      setData: false
+    }
+  },
+  created() {
+  },
+  activated() {
+  },
+  methods: {
+    init(id) {
+      this.dataForm.id = id || "";
+      this.visible = true;
+      if (this.urlOptions.getOption) {
+        this.getArr()
+      }
+      this.$nextTick(() => {
+        this.$refs["dataForm"].resetFields();
+        if (this.dataForm.id) {
+          this.urlOptions.infoURL(id).then(response => {
+            this.dataForm = response.data;
+            if (this.setData) {
+              this.setDataForm()
+            }
+          });
+        } else {
+          if (this.urlOptions.isGetCode) {
+            this.getCode()
+          }
+				}
+      });
+    },
+		getCode() {
+			this.urlOptions.codeURL()
+				.then(({ data: res }) => {
+					this.dataForm.code = res;
+				})
+				.catch(() => {});
+		},
+    getArr() {
+      const params = {
+        pageSize: 100,
+        pageNo: 1,
+      }
+      this.urlOptions.optionArrUrl.forEach((item, index) => {
+        item(params).then(({ data: res }) => {
+          this.$set(this.urlOptions.optionArr, `arr${index}`, res.list)
+        })
+          .catch(() => {
+          });
+      });
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs["dataForm"].validate((valid) => {
+        if (!valid) {
+          return false;
+        }
+        // 修改的提交
+        if (this.dataForm.id) {
+          this.urlOptions.updateURL(this.dataForm).then(response => {
+            this.$modal.msgSuccess("修改成功");
+            this.visible = false;
+            this.$emit("refreshDataList");
+          });
+          return;
+        }
+        // 添加的提交
+        this.urlOptions.createURL(this.dataForm).then(response => {
+          this.$modal.msgSuccess("新增成功");
+          this.visible = false;
+          this.$emit("refreshDataList");
+        });
+      });
+    },
+    formClear() {
+      this.$refs.dataForm.resetFields()
+    }
+  }
+}

src/views/core/mixins/basic-page.js

@@ -0,0 +1,168 @@
+/*
+ * @Author: zwq
+ * @Date: 2022-08-24 11:19:43
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-08-02 10:56:37
+ * @Description:
+ */
+export default {
+  data() {
+    /* eslint-disable */
+    return {
+      urlOptions: {
+        getDataListURL: '',
+        deleteURL: '',
+        statusUrl: '',
+        exportURL: ''
+      },
+      tableData: [],
+      listQuery: {
+        pageSize: 10,
+        pageNo: 1,
+        total: 1,
+      },
+      exportLoading: false,
+      dataListLoading: false,
+      addOrEditTitle: '',
+      addOrUpdateVisible: false,
+    }
+  },
+  created() {
+  },
+  mounted() {
+    this.getDataList()
+  },
+  methods: {
+    // 获取数据列表
+    getDataList() {
+      this.dataListLoading = true;
+      this.urlOptions.getDataListURL(this.listQuery).then(response => {
+        this.tableData = response.data.list;
+        this.total = response.data.total;
+        this.dataListLoading = false;
+      });
+    },
+    // 每页数
+    sizeChangeHandle(val) {
+      this.listQuery.pageSize = val;
+      this.listQuery.pageNo = 1;
+      this.getDataList();
+    },
+    // 当前页
+    currentChangeHandle(val) {
+      this.listQuery.pageNo = val;
+      this.getDataList();
+    },
+    // 新增 / 修改
+    addOrUpdateHandle(id) {
+      this.addOrUpdateVisible = true;
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id);
+      });
+    },
+    cancel(id) {
+      this.$refs["popover-" + id].showPopper = false;
+    },
+    //改变状态
+    changeStatus(id) {
+      this.$http
+        .post(this.urlOptions.statusUrl, { id })
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          this.$refs["popover-" + id].showPopper = false;
+          this.$message({
+            message: this.$t("prompt.success"),
+            type: "success",
+            duration: 500,
+            onClose: () => {
+              this.getDataList();
+            },
+          });
+        })
+        .catch(() => { });
+    },
+    //tableBtn点击
+    handleClick(val) {
+      if (val.type === "edit") {
+        this.addOrUpdateVisible = true;
+        this.addOrEditTitle = "编辑";
+        this.$nextTick(() => {
+          this.$refs.addOrUpdate.init(val.data.id);
+        });
+      } else if (val.type === "delete") {
+        this.deleteHandle(val.data.id, val.data.name, val.data._pageIndex)
+      } else if (val.type === "change") {
+        this.changeStatus(val.data.id)
+      } else {
+        this.otherMethods(val)
+      }
+    },
+    // 删除
+    deleteHandle(id, name, index) {
+      this.$confirm(`确定对${name ? '[名称=' + name + ']' : '[序号=' + index + ']'}进行删除操作?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.urlOptions.deleteURL(id).then(({ data }) => {
+            this.$message({
+              message: "操作成功",
+              type: "success",
+              duration: 1500,
+              onClose: () => {
+                this.getDataList();
+              },
+            });
+          });
+        })
+        .catch(() => { });
+    },
+    //search-bar点击
+    buttonClick(val) {
+      switch (val.btnName) {
+        case "search":
+          this.listQuery.xm1 = val.xm1;
+          this.listQuery.xm2 = val.xm2;
+          this.listQuery.pageNo = 1;
+          this.getDataList();
+          break;
+        case "add":
+          this.addOrEditTitle = '新增'
+          this.addOrUpdateVisible = true;
+          this.addOrUpdateHandle()
+          break;
+        default:
+          console.log(val)
+      }
+    },
+    handleCancel() {
+      this.$refs.addOrUpdate.formClear()
+      this.addOrUpdateVisible = false
+      this.addOrEditTitle = ''
+    },
+    handleConfirm() {
+      this.$refs.addOrUpdate.dataFormSubmit()
+    },
+    successSubmit() {
+      this.handleCancel()
+      this.getDataList()
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      // 处理查询参数
+      let params = { ...this.queryParams };
+      params.pageNo = undefined;
+      params.pageSize = undefined;
+      this.$modal.confirm('是否确认导出所有数据项?').then(() => {
+        this.exportLoading = true;
+        return this.urlOptions.exportURL(params);
+      }).then(response => {
+        this.$download.excel(response, '工厂.xls');
+        this.exportLoading = false;
+      }).catch(() => { });
+    }
+  }
+}

src/views/core/mixins/code-filter.js

@@ -0,0 +1,64 @@
+
+/*
+ * @Date: 2020-12-29 16:49:28
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-08-01 11:10:04
+ * @FilePath: \basic-admin\src\filters\basicData\index.js
+ * @Description:
+ */
+
+const table = {
+  lineStatus: {
+    1: '生产中',
+    2: '停止',
+    3: '未知',
+  },
+}
+
+// 日期格式化
+export function parseTime(time, pattern) {
+  if (arguments.length === 0 || !time) {
+    return null
+  }
+  const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
+  let date
+  if (typeof time === 'object') {
+    date = time
+  } else {
+    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
+      time = parseInt(time)
+    } else if (typeof time === 'string') {
+      time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.\d{3}/gm),'');
+    }
+    if ((typeof time === 'number') && (time.toString().length === 10)) {
+      time = time * 1000
+    }
+    date = new Date(time)
+  }
+  const formatObj = {
+    y: date.getFullYear(),
+    m: date.getMonth() + 1,
+    d: date.getDate(),
+    h: date.getHours(),
+    i: date.getMinutes(),
+    s: date.getSeconds(),
+    a: date.getDay()
+  }
+  const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
+    let value = formatObj[key]
+    // Note: getDay() returns 0 on Sunday
+    if (key === 'a') {
+      return ['日', '一', '二', '三', '四', '五', '六'][value]
+    }
+    if (result.length > 0 && value < 10) {
+      value = '0' + value
+    }
+    return value || 0
+  })
+  return time_str
+}
+export default function (dictTable) {
+  return function (val) {
+    return table?.[dictTable]?.[val]
+  }
+}

src/views/core/njlm/components/add-or-updata.vue

@@ -0,0 +1,64 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-11-18 14:16:25
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-08-18 15:49:42
+ * @Description:
+-->
+<template>
+	<el-form
+		:model="dataForm"
+		:rules="dataRule"
+		ref="dataForm"
+		@keyup.enter.native="dataFormSubmit()"
+		label-width="80px">
+		<el-form-item label="仓库编码" prop="code">
+			<el-input
+				v-model="dataForm.code"
+				clearable
+				placeholder="请输入仓库编码" />
+		</el-form-item>
+		<el-form-item label="仓库名称" prop="name">
+			<el-input
+				v-model="dataForm.name"
+				clearable
+				placeholder="请输入仓库名称" />
+		</el-form-item>
+		<el-form-item label="备注" prop="remark">
+			<el-input v-model="dataForm.remark" clearable placeholder="请输入备注" />
+		</el-form-item>
+	</el-form>
+</template>
+
+<script>
+import basicAdd from '../../mixins/basic-add';
+import { createFactory, updateFactory, getFactory, getCode } from "@/api/core/base/factory";
+
+export default {
+	mixins: [basicAdd],
+	data() {
+		return {
+			urlOptions: {
+			  isGetCode: true,
+        codeURL: getCode,
+				createURL: createFactory,
+				updateURL: updateFactory,
+				infoURL: getFactory,
+			},
+			dataForm: {
+        id: undefined,
+        code: undefined,
+        name: undefined,
+        address: undefined,
+        remark: undefined,
+			},
+			dataRule: {
+        code: [{ required: true, message: "仓库编码不能为空", trigger: "blur" }],
+        name: [{ required: true, message: "仓库名称不能为空", trigger: "blur" }],
+      }
+		};
+	},
+	methods: {
+	},
+};
+</script>

src/views/core/njlm/ware.vue

@@ -0,0 +1,171 @@
+<template>
+	<div class="app-container">
+		<search-bar
+			:formConfigs="formConfig"
+			ref="searchBarForm"
+			@headBtnClick="buttonClick" />
+		<base-table
+			v-loading="dataListLoading"
+			:table-props="tableProps"
+			:page="listQuery.pageNo"
+			:limit="listQuery.pageSize"
+			:table-data="tableData">
+			<method-btn
+				v-if="tableBtn.length"
+				slot="handleBtn"
+				:width="120"
+				label="操作"
+				:method-list="tableBtn"
+				@clickBtn="handleClick" />
+		</base-table>
+		<pagination
+			:limit.sync="listQuery.pageSize"
+			:page.sync="listQuery.pageNo"
+			:total="listQuery.total"
+			@pagination="getDataList" />
+		<base-dialog
+			:dialogTitle="addOrEditTitle"
+			:dialogVisible="addOrUpdateVisible"
+			@cancel="handleCancel"
+			@confirm="handleConfirm"
+			:before-close="handleCancel"
+			width="70%">
+			<add-or-update
+				ref="addOrUpdate"
+				@refreshDataList="successSubmit"></add-or-update>
+		</base-dialog>
+	</div>
+</template>
+
+<script>
+import AddOrUpdate from './components/add-or-updata';
+import basicPage from '../mixins/basic-page';
+import { parseTime } from '../mixins/code-filter';
+import {
+	deleteFactory,
+	getFactoryPage,
+	exportFactoryExcel,
+} from '@/api/core/base/factory';
+
+const tableProps = [
+	{
+		prop: 'code',
+		label: '仓库编码',
+		align: 'center',
+	},
+	{
+		prop: 'name',
+		label: '仓库名称',
+		align: 'center',
+	},
+	{
+		prop: 'remark',
+		label: '备注',
+		align: 'center',
+	},
+];
+
+export default {
+	mixins: [basicPage],
+	data() {
+		return {
+			urlOptions: {
+				getDataListURL: getFactoryPage,
+				deleteURL: deleteFactory,
+				exportURL: exportFactoryExcel,
+			},
+			tableProps,
+			tableBtn: [
+				this.$auth.hasPermi(`base:factory:update`)
+					? {
+							type: 'edit',
+							btnName: '编辑',
+					  }
+					: undefined,
+          this.$auth.hasPermi(`base:factory:delete`)
+					? {
+							type: 'delete',
+							btnName: '删除',
+					  }
+					: undefined,
+			].filter((v)=>v),
+			tableData: [],
+			formConfig: [
+				{
+					type: 'input',
+					label: '仓库编码',
+					placeholder: '仓库编码',
+					param: 'code',
+				},
+				{
+					type: 'input',
+					label: '仓库名称',
+					placeholder: '仓库名称',
+					param: 'name',
+				},
+				{
+					type: 'button',
+					btnName: '搜索',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: this.$auth.hasPermi('base:factory:create') ? 'button' : '',
+					btnName: '新增',
+					name: 'add',
+					color: 'success',
+					plain: true,
+				},
+				// {
+				// 	type: this.$auth.hasPermi('base:factory:create') ? 'separate' : '',
+				// },
+				// {
+				// 	type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
+				// 	btnName: '导出',
+				// 	name: 'export',
+				// 	color: 'warning',
+				// },
+			],
+		};
+	},
+	components: {
+		AddOrUpdate,
+	},
+	created() {},
+	methods: {
+		buttonClick(val) {
+			switch (val.btnName) {
+				case 'search':
+					this.listQuery.pageNo = 1;
+					this.listQuery.pageSize = 10;
+					this.listQuery.name = val.name;
+					this.listQuery.code = val.code;
+					this.getDataList();
+					break;
+				case 'reset':
+					this.$refs.searchBarForm.resetForm();
+					this.listQuery = {
+						pageSize: 10,
+						pageNo: 1,
+						total: 1,
+					};
+					this.getDataList();
+					break;
+				case 'add':
+					this.addOrEditTitle = '新增';
+					this.addOrUpdateVisible = true;
+					this.addOrUpdateHandle();
+					break;
+				case 'export':
+					this.handleExport();
+					break;
+				default:
+					console.log(val);
+			}
+		},
+	},
+};
+</script>

src/views/core/njlm/wareMonitor.vue

@@ -0,0 +1,192 @@
+<!--
+ * @Author: gtz
+ * @Date: 2022-03-03 09:16:10
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-04-11 09:10:11
+ * @Description: file content
+ * @FilePath: \mt-ck-wms-ui\src\views\dashboard\index.vue
+-->
+<template>
+  <div class="dashboard-container">
+    <el-card class="dashboard-main">
+      <el-row class="dashboard-title">
+        <div class="dashboard-header-line" />
+        <div class="dashboard-header-title">WMS库存信息</div>
+      </el-row>
+      <el-row class="dashboard-legend">
+        <div v-for="item in cassetteStatusList" :key="'cassette' + item.id" class="dashboard-legend-cassette">
+          <div class="dashboard-legend-cassette-cricle" :style="{background: item.color}" />
+          {{ item.name }}
+        </div>
+        |
+        <div v-for="item in portAttributeList" :key="'port' + item.id" class="dashboard-legend-port" :style="{background: item.color}">
+          {{ item.name }}
+        </div>
+        <div class="dashboard-legend-search">
+          <el-select v-model="current" size="mini" placeholder="请选择库存范围" @change="handleChange">
+            <el-option v-for="item in totalPage" :key="'select' + item" :label="'第' + item + '页'" :value="item" />
+          </el-select>
+        </div>
+      </el-row>
+      <el-row v-if="current * 80 < shelfList[0].rowList[0].portList.length" class="dashboard-layout" :gutter="12">
+        <el-col v-for="item in 4" :key="'shelfbox' + item" class="dashboard-layout-shelf-box" :span="6">
+          <el-row>
+            <el-col v-for="(i, index) in shelfList" :key="item + 'shelf' + i.id" :span="12" class="dashboard-layout-shelf">
+              <el-row>
+                <el-col v-for="z in i.rowList" :key="item + 'shelf' + i + 'row' + z.id" :span="12" class="dashboard-layout-row">
+                  <div v-for="x in 20" :key="item + 'shelf' + i + 'row' + z + 'item' + x" class="dashboard-layout-item" :style="{background: portAttributeObj[z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute], cursor: z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute === 3 ? 'not-allowed' : 'pointer', color: z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute === 3 ? '#A2A8B5' : ''}">
+                    <div v-if="z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3" class="dashboard-layout-item-cricle" :style="{background: z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteList[0] ? cassetteStatusObj[z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteList[0].status] : ''}" />
+                    {{ z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3 ? z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].name : 'XXXX' }}
+                  </div>
+                </el-col>
+              </el-row>
+              <div class="dashboard-layout-footer">
+                {{ '第' + rowIndex[index] + '排(' + ((current - 1) * 4 + item) + ')' }}
+              </div>
+            </el-col>
+          </el-row>
+        </el-col>
+      </el-row>
+      <el-row v-else class="dashboard-layout" :gutter="12">
+        <el-col v-for="item in Math.ceil((shelfList[0].rowList[0].portList.length - (current - 1) * 80) / 20)" :key="'shelfbox' + item" class="dashboard-layout-shelf-box" :span="6">
+          <el-row>
+            <el-col v-for="(i, index) in shelfList" :key="item + 'shelf' + i.id" :span="12" class="dashboard-layout-shelf">
+              <el-row v-if="item < Math.ceil((shelfList[0].rowList[0].portList.length - (current - 1) * 80) / 20)">
+                <el-col v-for="z in i.rowList" :key="item + 'shelf' + i + 'row' + z.id" :span="12" class="dashboard-layout-row">
+                  <div v-for="x in 20" :key="item + 'shelf' + i + 'row' + z + 'item' + x" class="dashboard-layout-item" :style="{background: portAttributeObj[z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute], cursor: z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute === 3 ? 'not-allowed' : 'pointer', color: z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute === 3 ? '#A2A8B5' : ''}">
+                    <div v-if="z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3" class="dashboard-layout-item-cricle" :style="{background: z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteList[0] ? cassetteStatusObj[z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteList[0].status] : ''}" />
+                    {{ z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3 ? z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].name : 'XXXX' }}
+                  </div>
+                </el-col>
+              </el-row>
+              <el-row v-else>
+                <el-col v-for="z in i.rowList" :key="item + 'shelf' + i + 'row' + z.id" :span="12" class="dashboard-layout-row">
+                  <div v-for="x in shelfList[0].rowList[0].portList.length - (item - 1) * 20 - (current - 1) * 80" :key="item + 'shelf' + i + 'row' + z + 'item' + x" class="dashboard-layout-item" :style="{background: portAttributeObj[z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute], cursor: z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute === 3 ? 'not-allowed' : 'pointer', color: z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute === 3 ? '#A2A8B5' : ''}">
+                    <div v-if="z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3" class="dashboard-layout-item-cricle" :style="{background: z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteList[0] ? cassetteStatusObj[z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteList[0].status] : ''}" />
+                    {{ z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3 ? z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].name : 'XXXX' }}
+                  </div>
+                </el-col>
+              </el-row>
+              <div class="dashboard-layout-footer">
+                {{ '第' + rowIndex[index] + '排(' + ((current - 1) * 4 + item) + ')' }}
+              </div>
+            </el-col>
+          </el-row>
+        </el-col>
+      </el-row>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import testdata from './testdata'
+
+export default {
+  name: 'Dashboard',
+  data () {
+    return testdata
+  },
+  created () {
+    console.log(this.shelfList)
+    this.totalPage = Math.ceil(this.shelfList[0].rowList[0].portList.length / 80)
+  },
+  methods: {
+    handleChange (v) {
+      console.log(v)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dashboard-container {
+  background: #F2F4F9;
+  min-height: calc(100vh - 134px);
+  overflow-x: scroll;
+  font-size: 14px;
+  .dashboard-main {
+    width: 100%;
+    min-width: 1380px;
+    background-color: #fff;
+    border-radius: 8px;
+    min-height: calc(100vh - 186px);
+    .dashboard-title {
+      .dashboard-header-line{
+        display: inline-block;
+        width: 4px;
+        height: 16px;
+        background: #0B58FF;
+        border-radius: 1px;
+        position: relative;
+        top: 2px;
+        margin-right: 4px;
+      }
+      .dashboard-header-title{
+        display: inline-block;
+        font-size: 16px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #000000;
+        line-height: 16px;
+      }
+    }
+    .dashboard-legend {
+      margin-top: 20px;
+      .dashboard-legend-cassette {
+        display: inline-block;
+        margin-right: 24px;
+        .dashboard-legend-cassette-cricle {
+          display: inline-block;
+          width: 12px;
+          height: 12px;
+          border-radius: 6px;
+        }
+      }
+      .dashboard-legend-port {
+        display: inline-block;
+        height: 24px;
+        line-height: 24px;
+        border-radius: 4px;
+        padding: 0 16px;
+        margin-left: 24px;
+      }
+      .dashboard-legend-search {
+        float: right;
+      }
+    }
+    .dashboard-layout {
+      margin: 20px 0;
+      .dashboard-layout-shelf-box {
+        .dashboard-layout-footer {
+          text-align: center;
+          margin-top: 12px;
+        }
+        .dashboard-layout-shelf {
+          padding: 0 8px;
+          .dashboard-layout-row {
+            padding: 0 1px;
+            .dashboard-layout-item {
+              width: 100%;
+              text-align: center;
+              height: 32px;
+              box-shadow: 0px 3px 6px 0px rgba(166, 174, 190, 0.8);
+              border-radius: 2px 4px 4px 2px;
+              margin-bottom: 8px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              .dashboard-layout-item-cricle{
+                display: inline-block;
+                width: 12px;
+                height: 12px;
+                border-radius: 6px;
+                margin-right: 6px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/dashboard/BarChart.vue

@@ -0,0 +1,102 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+const animationDuration = 6000
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        grid: {
+          top: 10,
+          left: '2%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          axisTick: {
+            alignWithLabel: true
+          }
+        }],
+        yAxis: [{
+          type: 'value',
+          axisTick: {
+            show: false
+          }
+        }],
+        series: [{
+          name: 'pageA',
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: [79, 52, 200, 334, 390, 330, 220],
+          animationDuration
+        }, {
+          name: 'pageB',
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: [80, 52, 200, 334, 390, 330, 220],
+          animationDuration
+        }, {
+          name: 'pageC',
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: [30, 52, 200, 334, 390, 330, 220],
+          animationDuration
+        }]
+      })
+    }
+  }
+}
+</script>

src/views/dashboard/LineChart.vue

@@ -0,0 +1,135 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '350px'
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    chartData: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val)
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.setOptions(this.chartData)
+    },
+    setOptions({ expectedData, actualData } = {}) {
+      this.chart.setOption({
+        xAxis: {
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          boundaryGap: false,
+          axisTick: {
+            show: false
+          }
+        },
+        grid: {
+          left: 10,
+          right: 10,
+          bottom: 20,
+          top: 30,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          },
+          padding: [5, 10]
+        },
+        yAxis: {
+          axisTick: {
+            show: false
+          }
+        },
+        legend: {
+          data: ['expected', 'actual']
+        },
+        series: [{
+          name: 'expected', itemStyle: {
+            normal: {
+              color: '#FF005A',
+              lineStyle: {
+                color: '#FF005A',
+                width: 2
+              }
+            }
+          },
+          smooth: true,
+          type: 'line',
+          data: expectedData,
+          animationDuration: 2800,
+          animationEasing: 'cubicInOut'
+        },
+        {
+          name: 'actual',
+          smooth: true,
+          type: 'line',
+          itemStyle: {
+            normal: {
+              color: '#3888fa',
+              lineStyle: {
+                color: '#3888fa',
+                width: 2
+              },
+              areaStyle: {
+                color: '#f3f8ff'
+              }
+            }
+          },
+          data: actualData,
+          animationDuration: 2800,
+          animationEasing: 'quadraticOut'
+        }]
+      })
+    }
+  }
+}
+</script>

src/views/dashboard/PanelGroup.vue

@@ -0,0 +1,180 @@
+<template>
+  <el-row :gutter="40" class="panel-group">
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
+        <div class="card-panel-icon-wrapper icon-people">
+          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            访客
+          </div>
+          <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
+        </div>
+      </div>
+    </el-col>
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('messages')">
+        <div class="card-panel-icon-wrapper icon-message">
+          <svg-icon icon-class="message" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            消息
+          </div>
+          <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
+        </div>
+      </div>
+    </el-col>
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('purchases')">
+        <div class="card-panel-icon-wrapper icon-money">
+          <svg-icon icon-class="money" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            金额
+          </div>
+          <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
+        </div>
+      </div>
+    </el-col>
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
+        <div class="card-panel-icon-wrapper icon-shopping">
+          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            订单
+          </div>
+          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import CountTo from 'vue-count-to'
+
+export default {
+  components: {
+    CountTo
+  },
+  methods: {
+    handleSetLineChartData(type) {
+      this.$emit('handleSetLineChartData', type)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+  margin-top: 18px;
+
+  .card-panel-col {
+    margin-bottom: 32px;
+  }
+
+  .card-panel {
+    height: 108px;
+    cursor: pointer;
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+
+    &:hover {
+      .card-panel-icon-wrapper {
+        color: #fff;
+      }
+
+      .icon-people {
+        background: #40c9c6;
+      }
+
+      .icon-message {
+        background: #36a3f7;
+      }
+
+      .icon-money {
+        background: #f4516c;
+      }
+
+      .icon-shopping {
+        background: #34bfa3
+      }
+    }
+
+    .icon-people {
+      color: #40c9c6;
+    }
+
+    .icon-message {
+      color: #36a3f7;
+    }
+
+    .icon-money {
+      color: #f4516c;
+    }
+
+    .icon-shopping {
+      color: #34bfa3
+    }
+
+    .card-panel-icon-wrapper {
+      float: left;
+      margin: 14px 0 0 14px;
+      padding: 16px;
+      transition: all 0.38s ease-out;
+      border-radius: 6px;
+    }
+
+    .card-panel-icon {
+      float: left;
+      font-size: 48px;
+    }
+
+    .card-panel-description {
+      float: right;
+      font-weight: bold;
+      margin: 26px 26px 26px 0;
+
+      .card-panel-text {
+        line-height: 18px;
+        color: rgba(0, 0, 0, 0.45);
+        font-size: 16px;
+        margin-bottom: 12px;
+      }
+
+      .card-panel-num {
+        font-size: 20px;
+      }
+    }
+  }
+}
+
+@media (max-width:550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+</style>

src/views/dashboard/PieChart.vue

@@ -0,0 +1,79 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+          left: 'center',
+          bottom: '10',
+          data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
+        },
+        series: [
+          {
+            name: 'WEEKLY WRITE ARTICLES',
+            type: 'pie',
+            roseType: 'radius',
+            radius: [15, 95],
+            center: ['50%', '38%'],
+            data: [
+              { value: 320, name: 'Industries' },
+              { value: 240, name: 'Technology' },
+              { value: 149, name: 'Forex' },
+              { value: 100, name: 'Gold' },
+              { value: 59, name: 'Forecasts' }
+            ],
+            animationEasing: 'cubicInOut',
+            animationDuration: 2600
+          }
+        ]
+      })
+    }
+  }
+}
+</script>

src/views/dashboard/RaddarChart.vue

@@ -0,0 +1,116 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+const animationDuration = 3000
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        radar: {
+          radius: '66%',
+          center: ['50%', '42%'],
+          splitNumber: 8,
+          splitArea: {
+            areaStyle: {
+              color: 'rgba(127,95,132,.3)',
+              opacity: 1,
+              shadowBlur: 45,
+              shadowColor: 'rgba(0,0,0,.5)',
+              shadowOffsetX: 0,
+              shadowOffsetY: 15
+            }
+          },
+          indicator: [
+            { name: 'Sales', max: 10000 },
+            { name: 'Administration', max: 20000 },
+            { name: 'Information Techology', max: 20000 },
+            { name: 'Customer Support', max: 20000 },
+            { name: 'Development', max: 20000 },
+            { name: 'Marketing', max: 20000 }
+          ]
+        },
+        legend: {
+          left: 'center',
+          bottom: '10',
+          data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
+        },
+        series: [{
+          type: 'radar',
+          symbolSize: 0,
+          areaStyle: {
+            normal: {
+              shadowBlur: 13,
+              shadowColor: 'rgba(0,0,0,.2)',
+              shadowOffsetX: 0,
+              shadowOffsetY: 10,
+              opacity: 1
+            }
+          },
+          data: [
+            {
+              value: [5000, 7000, 12000, 11000, 15000, 14000],
+              name: 'Allocated Budget'
+            },
+            {
+              value: [4000, 9000, 15000, 15000, 13000, 11000],
+              name: 'Expected Spending'
+            },
+            {
+              value: [5500, 11000, 12000, 15000, 12000, 12000],
+              name: 'Actual Spending'
+            }
+          ],
+          animationDuration: animationDuration
+        }]
+      })
+    }
+  }
+}
+</script>

src/views/dashboard/mixins/resize.js

@@ -0,0 +1,56 @@
+import { debounce } from '@/utils'
+
+export default {
+  data() {
+    return {
+      $_sidebarElm: null,
+      $_resizeHandler: null
+    }
+  },
+  mounted() {
+    this.initListener()
+  },
+  activated() {
+    if (!this.$_resizeHandler) {
+      // avoid duplication init
+      this.initListener()
+    }
+
+    // when keep-alive chart activated, auto resize
+    this.resize()
+  },
+  beforeDestroy() {
+    this.destroyListener()
+  },
+  deactivated() {
+    this.destroyListener()
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_sidebarResizeHandler(e) {
+      if (e.propertyName === 'width') {
+        this.$_resizeHandler()
+      }
+    },
+    initListener() {
+      this.$_resizeHandler = debounce(() => {
+        this.resize()
+      }, 100)
+      window.addEventListener('resize', this.$_resizeHandler)
+
+      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    destroyListener() {
+      window.removeEventListener('resize', this.$_resizeHandler)
+      this.$_resizeHandler = null
+
+      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    resize() {
+      const { chart } = this
+      chart && chart.resize()
+    }
+  }
+}

src/views/error/401.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="errPage-container">
+    <el-button icon="arrow-left" class="pan-back-btn" @click="back">
+      返回
+    </el-button>
+    <el-row>
+      <el-col :span="12">
+        <h1 class="text-jumbo text-ginormous">
+          401错误!
+        </h1>
+        <h2>您没有访问权限！</h2>
+        <h6>对不起，您没有访问权限，请不要进行非法操作！您可以返回主页面</h6>
+        <ul class="list-unstyled">
+          <li class="link-type">
+            <router-link to="/">
+              回首页
+            </router-link>
+          </li>
+        </ul>
+      </el-col>
+      <el-col :span="12">
+        <img :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream.">
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import errGif from '@/assets/401_images/401.gif'
+
+export default {
+  name: 'Page401',
+  data() {
+    return {
+      errGif: errGif + '?' + +new Date()
+    }
+  },
+  methods: {
+    back() {
+      if (this.$route.query.noGoBack) {
+        this.$router.push({ path: '/' })
+      } else {
+        this.$router.go(-1)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .errPage-container {
+    width: 800px;
+    max-width: 100%;
+    margin: 100px auto;
+    .pan-back-btn {
+      background: #008489;
+      color: #fff;
+      border: none!important;
+    }
+    .pan-gif {
+      margin: 0 auto;
+      display: block;
+    }
+    .pan-img {
+      display: block;
+      margin: 0 auto;
+      width: 100%;
+    }
+    .text-jumbo {
+      font-size: 60px;
+      font-weight: 700;
+      color: #484848;
+    }
+    .list-unstyled {
+      font-size: 14px;
+      li {
+        padding-bottom: 5px;
+      }
+      a {
+        color: #008489;
+        text-decoration: none;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+</style>

src/views/error/404.vue

@@ -0,0 +1,233 @@
+<template>
+  <div class="wscn-http404-container">
+    <div class="wscn-http404">
+      <div class="pic-404">
+        <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
+        <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
+        <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
+        <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
+      </div>
+      <div class="bullshit">
+        <div class="bullshit__oops">
+          404错误!
+        </div>
+        <div class="bullshit__headline">
+          {{ message }}
+        </div>
+        <div class="bullshit__info">
+          对不起，您正在寻找的页面不存在。尝试检查URL的错误，然后按浏览器上的刷新按钮或尝试在我们的应用程序中找到其他内容。
+        </div>
+        <router-link to="/" class="bullshit__return-home">
+          返回首页
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Page404',
+  computed: {
+    message() {
+      return '找不到网页！'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.wscn-http404-container{
+  transform: translate(-50%,-50%);
+  position: absolute;
+  top: 40%;
+  left: 50%;
+}
+.wscn-http404 {
+  position: relative;
+  width: 1200px;
+  padding: 0 50px;
+  overflow: hidden;
+  .pic-404 {
+    position: relative;
+    float: left;
+    width: 600px;
+    overflow: hidden;
+    &__parent {
+      width: 100%;
+    }
+    &__child {
+      position: absolute;
+      &.left {
+        width: 80px;
+        top: 17px;
+        left: 220px;
+        opacity: 0;
+        animation-name: cloudLeft;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      &.mid {
+        width: 46px;
+        top: 10px;
+        left: 420px;
+        opacity: 0;
+        animation-name: cloudMid;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1.2s;
+      }
+      &.right {
+        width: 62px;
+        top: 100px;
+        left: 500px;
+        opacity: 0;
+        animation-name: cloudRight;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      @keyframes cloudLeft {
+        0% {
+          top: 17px;
+          left: 220px;
+          opacity: 0;
+        }
+        20% {
+          top: 33px;
+          left: 188px;
+          opacity: 1;
+        }
+        80% {
+          top: 81px;
+          left: 92px;
+          opacity: 1;
+        }
+        100% {
+          top: 97px;
+          left: 60px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudMid {
+        0% {
+          top: 10px;
+          left: 420px;
+          opacity: 0;
+        }
+        20% {
+          top: 40px;
+          left: 360px;
+          opacity: 1;
+        }
+        70% {
+          top: 130px;
+          left: 180px;
+          opacity: 1;
+        }
+        100% {
+          top: 160px;
+          left: 120px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudRight {
+        0% {
+          top: 100px;
+          left: 500px;
+          opacity: 0;
+        }
+        20% {
+          top: 120px;
+          left: 460px;
+          opacity: 1;
+        }
+        80% {
+          top: 180px;
+          left: 340px;
+          opacity: 1;
+        }
+        100% {
+          top: 200px;
+          left: 300px;
+          opacity: 0;
+        }
+      }
+    }
+  }
+  .bullshit {
+    position: relative;
+    float: left;
+    width: 300px;
+    padding: 30px 0;
+    overflow: hidden;
+    &__oops {
+      font-size: 32px;
+      font-weight: bold;
+      line-height: 40px;
+      color: #1482f0;
+      opacity: 0;
+      margin-bottom: 20px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;
+    }
+    &__headline {
+      font-size: 20px;
+      line-height: 24px;
+      color: #222;
+      font-weight: bold;
+      opacity: 0;
+      margin-bottom: 10px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.1s;
+      animation-fill-mode: forwards;
+    }
+    &__info {
+      font-size: 13px;
+      line-height: 21px;
+      color: grey;
+      opacity: 0;
+      margin-bottom: 30px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.2s;
+      animation-fill-mode: forwards;
+    }
+    &__return-home {
+      display: block;
+      float: left;
+      width: 110px;
+      height: 36px;
+      background: #1482f0;
+      border-radius: 100px;
+      text-align: center;
+      color: #ffffff;
+      opacity: 0;
+      font-size: 14px;
+      line-height: 36px;
+      cursor: pointer;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.3s;
+      animation-fill-mode: forwards;
+    }
+    @keyframes slideUp {
+      0% {
+        transform: translateY(60px);
+        opacity: 0;
+      }
+      100% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>

src/views/fpw/chart/BarChart.vue

@@ -0,0 +1,137 @@
+<template>
+	<div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import * as echarts from 'echarts';
+require('echarts/theme/macarons'); // echarts theme
+import resize from '../mixins/resize';
+
+const animationDuration = 1000;
+
+export default {
+	mixins: [resize],
+	props: {
+		className: {
+			type: String,
+			default: 'chart',
+		},
+		title: {
+			type: String,
+			default: 'chart',
+		},
+		width: {
+			type: String,
+			default: '100%',
+		},
+		height: {
+			type: String,
+			default: '300px',
+		},
+		allData: {
+			type: Object,
+			default: () => ({}),
+		},
+		histogram: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	data() {
+		return {
+			chart: null,
+		};
+	},
+	beforeDestroy() {
+		if (!this.chart) {
+			return;
+		}
+		this.chart.dispose();
+		this.chart = null;
+	},
+	methods: {
+		initChart() {
+			var nameArr = [];
+			var valueArr = [];
+			if (this.histogram.length > 0) {
+				this.histogram.forEach((item) => {
+					nameArr.push(item.time);
+					valueArr.push(item.number);
+				});
+			} else {
+				for (let i in this.allData) {
+					nameArr.push(i);
+					valueArr.push(this.allData[i]);
+				}
+			}
+			this.chart = echarts.init(this.$el, 'macarons');
+
+			this.chart.setOption({
+				title: {
+					text: '{space|}{tip|}{space|}{value|' + this.title + '}',
+					left: '0%',
+					top: '0%',
+					textStyle: {
+						rich: {
+							tip: {
+								width: 4,
+								height: 16,
+								backgroundColor: '#1FC495',
+								marginRight: 6,
+							},
+							space: {
+								width: 8,
+							},
+							value: {
+								fontSize: 16,
+								fontWeight: 'bold',
+							},
+						},
+					},
+				},
+				tooltip: {
+					trigger: 'axis',
+					axisPointer: {
+						// 坐标轴指示器，坐标轴触发有效
+						type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
+					},
+				},
+				grid: {
+					top: 40,
+					left: '2%',
+					right: '2%',
+					bottom: '3%',
+					containLabel: true,
+				},
+				xAxis: [
+					{
+						type: 'category',
+						data: nameArr,
+						axisTick: {
+							alignWithLabel: true,
+						},
+					},
+				],
+				yAxis: [
+					{
+						type: 'value',
+						axisTick: {
+							show: false,
+						},
+					},
+				],
+				series: [
+					{
+						name: 'pageA',
+						type: 'bar',
+						stack: 'vistors',
+						barWidth: '60%',
+						data: valueArr,
+						animationDuration,
+					},
+				],
+			});
+		},
+	},
+};
+</script>

src/views/fpw/chart/GaugeChart.vue

@@ -0,0 +1,185 @@
+<!--
+ * @Author: zwq
+ * @Date: 2023-06-01 10:47:42
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-08-31 16:23:08
+ * @Description:
+-->
+<template>
+	<div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import * as echarts from 'echarts';
+require('echarts/theme/macarons'); // echarts theme
+import resize from '../mixins/resize';
+
+export default {
+	mixins: [resize],
+	props: {
+		className: {
+			type: String,
+			default: 'chart',
+		},
+		title: {
+			type: String,
+			default: 'chart',
+		},
+		width: {
+			type: String,
+			default: '100%',
+		},
+		height: {
+			type: String,
+			default: '300px',
+		},
+		occupancyData: {
+			type: Number,
+			default: 0,
+		},
+	},
+	name: 'echarts',
+	data() {
+		return {
+			echart: '',
+		};
+	},
+	beforeDestroy() {
+		if (!this.chart) {
+			return;
+		}
+		this.chart.dispose();
+		this.chart = null;
+	},
+	methods: {
+		initChart() {
+			this.chart = echarts.init(this.$el, 'macarons');
+
+			this.chart.setOption({
+				title: {
+					text: '{space|}{tip|}{space|}{value|' + this.title + '}',
+					left: '0%',
+					top: '2%',
+					textStyle: {
+						rich: {
+							tip: {
+								width: 4,
+								height: 16,
+								backgroundColor: '#1FC495',
+								marginRight: 6,
+							},
+							space: {
+								width: 8,
+							},
+							value: {
+								fontSize: 16,
+								fontWeight: 'bold',
+							},
+						},
+					},
+				},
+				series: [
+					{
+						type: 'gauge',
+						startAngle: 180,
+						endAngle: 0,
+						min: 0,
+						max: 100,
+						splitNumber: 5,
+						itemStyle: {
+							color: '#47E282',
+							shadowColor: 'rgba(0,138,255,0.45)',
+							shadowBlur: 10,
+							shadowOffsetX: 2,
+							shadowOffsetY: 2,
+						},
+						pointer: {
+							itemStyle: {
+								color: 'auto',
+							},
+						},
+						axisLine: {
+							roundCap: true,
+							lineStyle: {
+								width: 16,
+							},
+						},
+						axisTick: {
+							distance: 5,
+							splitNumber: 2,
+							lineStyle: {
+								width: 2,
+								color: '#999',
+							},
+						},
+						splitLine: {
+							distance: 6,
+							length: 14,
+							lineStyle: {
+								width: 4,
+								color: '#999',
+							},
+						},
+						axisLabel: {
+							distance: -55,
+							color: '#999',
+							fontSize: 15,
+						},
+						title: {
+							show: false,
+						},
+						detail: {
+							backgroundColor: '#fff',
+							width: '80%',
+							lineHeight: 15,
+							height: 15,
+							offsetCenter: [0, '20%'],
+							valueAnimation: true,
+							formatter: function (value) {
+								return '{side| }{value|' + value + '}{unit|%}{side1| }';
+							},
+							rich: {
+								value: {
+									fontSize: 18,
+									color: '#1FC495',
+									padding: [0, 0, 0, 16],
+								},
+								side: {
+									width: 35,
+									height: 5,
+									backgroundColor: '#fff',
+									opacity: 0.5,
+									shadowColor: '#43E084',
+									shadowOffsetX: 10,
+								},
+								side1: {
+									width: 35,
+									height: 5,
+									backgroundColor: '#fff',
+									opacity: 0.5,
+									shadowColor: '#43E084',
+									shadowOffsetX: -10,
+								},
+								unit: {
+									fontSize: 12,
+									color: '#999',
+									padding: [0, 16, 0, 0],
+								},
+							},
+						},
+						data: [
+							{
+								value: this.occupancyData * 100,
+							},
+						],
+						radius: '90%',
+						center: ['50%', '70%'],
+					},
+				],
+			});
+		},
+	},
+};
+</script>
+
+<style scoped></style>

src/views/fpw/chart/PieChart.vue

@@ -0,0 +1,165 @@
+<template>
+	<div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import * as echarts from 'echarts';
+require('echarts/theme/macarons'); // echarts theme
+import resize from '../mixins/resize';
+
+const animationDuration = 1000;
+
+export default {
+	mixins: [resize],
+	props: {
+		className: {
+			type: String,
+			default: 'chart',
+		},
+		title: {
+			type: String,
+			default: 'chart',
+		},
+		width: {
+			type: String,
+			default: '100%',
+		},
+		height: {
+			type: String,
+			default: '300px',
+		},
+		pieData: {
+			type: Array,
+			default: () => [],
+		},
+		totalNumber: {
+			type: Number,
+			default: 0,
+		},
+	},
+	data() {
+		return {
+			chart: null,
+		};
+	},
+	beforeDestroy() {
+		if (!this.chart) {
+			return;
+		}
+		this.chart.dispose();
+		this.chart = null;
+	},
+	methods: {
+		initChart() {
+			this.chart = echarts.init(this.$el, 'macarons');
+			this.pieData.forEach((i) => {
+				i.value = i.number;
+			});
+			this.chart.setOption({
+				title: {
+					zlevel: 2, // 控制圆环图中间的字的层级
+					text: '总数',
+					subtext: this.totalNumber,
+					top: '38%', // 控制位置
+					left: '50%', // 控制位置
+					textAlign: 'center', // 让文字居中
+					textStyle: {
+						color: 'rgba(203, 195, 195, 1)',
+					},
+					subtextStyle: {
+						fontSize: 20,
+					},
+				},
+				tooltip: {
+					trigger: 'item',
+					show: true, // 控制鼠标悬浮是否显示数据
+				},
+				legend: {
+					orient: 'vartical',
+					top: 'center',
+					left: 'right',
+					icon: 'circle',
+					itemGap: 16, //图例每项之间的间隔
+					textStyle: {
+						// 文字的样式
+						fontSize: 24, // 可控制每个legend项的间距
+						color: '#828282',
+						rich: {
+							oneone: {
+								width: 50,
+								color: '#000000',
+								fontSize: 12,
+								fontWeight: 'bolder',
+							},
+							twotwo: {
+								width: 35,
+								color: '#333',
+								fontSize: 12,
+							},
+							threethree: {
+								width: 20,
+								color: '#959595',
+								fontSize: 12,
+							},
+						},
+					},
+					formatter: (name) => {
+						var target = this.pieData.find((item) => {
+							return item.name === name;
+						}).number;
+						var v = ((target / this.totalNumber) * 100).toFixed(2);
+						return `{oneone|${name}}  {twotwo|${target}个}   {threethree|${v}%}`;
+					},
+				},
+				grid: {
+					top: 40,
+					left: '2%',
+					right: '2%',
+					bottom: '3%',
+					containLabel: true,
+				},
+				series: [
+					{
+						name: 'pie',
+						type: 'pie',
+						radius: ['55%', '80%'],
+						avoidLabelOverlap: true, // 防止牵引线堆叠挤在一块
+						itemStyle: {
+							borderRadius: 10,
+							borderColor: '#fff',
+							borderWidth: 2,
+						},
+						label: {
+							normal: {
+								show: true,
+								position: 'outside', // 另有参数inside，可以让数据在圆环上
+								formatter: '{d}%', //模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
+								textStyle: {
+									// 牵引线上的文字的样式
+									align: 'right',
+									baseline: 'middle',
+									fontFamily: '微软雅黑',
+									fontSize: 12,
+									fontWeight: 'bolder',
+									color: '#333',
+								},
+							},
+						},
+						emphasis: {
+							label: {
+								show: true,
+								fontSize: 40,
+								fontWeight: 'bold',
+							},
+						},
+						labelLine: {
+							show: false,
+						},
+						data: this.pieData,
+					},
+				],
+			});
+		},
+	},
+};
+</script>

src/views/fpw/finishGoodSpecification/add-or-updata.vue

@@ -0,0 +1,75 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-11-18 14:16:25
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-08-31 16:35:40
+ * @Description:
+-->
+<template>
+	<el-form
+		:model="dataForm"
+		:rules="dataRule"
+		ref="dataForm"
+		@keyup.enter.native="dataFormSubmit()"
+		label-width="120px">
+		<el-form-item label="产品编码" prop="goodSpecificationCode">
+			<el-input
+				v-model="dataForm.goodSpecificationCode"
+				clearable
+				placeholder="请输入产品编码" />
+		</el-form-item>
+		<el-form-item label="产品名称" prop="goodSpecificationName">
+			<el-input
+				v-model="dataForm.goodSpecificationName"
+				clearable
+				placeholder="请输入产品名称" />
+		</el-form-item>
+		<el-form-item label="是否启用" prop="deactivate">
+			<el-switch
+				v-model="dataForm.deactivate"
+				:active-value="1"
+				:inactive-value="0"></el-switch>
+		</el-form-item>
+	</el-form>
+</template>
+
+<script>
+import basicAdd from '../mixins/basic-add';
+import {
+  createFinishGoodSpecification,
+  updateFinishGoodSpecification,
+  getFinishGoodSpecification,
+  getCode
+} from "@/api/fpw/finishGoodSpecification";
+
+export default {
+	mixins: [basicAdd],
+	data() {
+		return {
+			urlOptions: {
+			  isGetCode: true,
+        codeURL: getCode,
+        codeName: 'goodSpecificationCode',
+				createURL: createFinishGoodSpecification,
+				updateURL: updateFinishGoodSpecification,
+				infoURL: getFinishGoodSpecification,
+			},
+			dataForm: {
+				id: undefined,
+				goodSpecificationCode: undefined,
+				goodSpecificationName: undefined,
+				deactivate: undefined,
+			},
+			dataRule: {
+				goodSpecificationCode: [
+					{ required: true, message: '产品编码不能为空', trigger: 'blur' },
+				],
+				goodSpecificationName: [
+					{ required: true, message: '产品名称不能为空', trigger: 'blur' },
+				],
+			},
+		};
+	},
+	methods: {},
+};
+</script>

src/views/fpw/finishGoodSpecification/index.vue

@@ -0,0 +1,177 @@
+<!--
+ * @Author: zwq
+ * @Date: 2023-09-06 14:28:30
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-09-06 14:48:34
+ * @Description:
+-->
+<template>
+	<div class="app-container">
+		<search-bar
+			:formConfigs="formConfig"
+			ref="searchBarForm"
+			@headBtnClick="buttonClick" />
+		<base-table
+			v-loading="dataListLoading"
+			:table-props="tableProps"
+			:page="listQuery.pageNo"
+			:limit="listQuery.pageSize"
+			:table-data="tableData">
+			<method-btn
+				v-if="tableBtn.length"
+				slot="handleBtn"
+				:width="120"
+				label="操作"
+				:method-list="tableBtn"
+				@clickBtn="handleClick" />
+		</base-table>
+		<pagination
+			:limit.sync="listQuery.pageSize"
+			:page.sync="listQuery.pageNo"
+			:total="listQuery.total"
+			@pagination="getDataList" />
+		<base-dialog
+			:dialogTitle="addOrEditTitle"
+			:dialogVisible="addOrUpdateVisible"
+			@cancel="handleCancel"
+			@confirm="handleConfirm"
+			:before-close="handleCancel"
+			width="70%">
+			<add-or-update
+				ref="addOrUpdate"
+				@refreshDataList="successSubmit"></add-or-update>
+		</base-dialog>
+	</div>
+</template>
+
+<script>
+import AddOrUpdate from './add-or-updata';
+import basicPage from '../mixins/basic-page';
+import codeFilter from '../mixins/code-filter';
+import {
+  deleteFinishGoodSpecification,
+  getFinishGoodSpecificationPage
+} from "@/api/fpw/finishGoodSpecification";
+
+const tableProps = [
+	{
+		prop: 'goodSpecificationCode',
+		label: '产品编码',
+		align: 'center',
+	},
+	{
+		prop: 'goodSpecificationName',
+		label: '产品名称',
+		align: 'center',
+	},
+	{
+		prop: 'deactivate',
+		label: '是否启用',
+		align: 'center',
+		filter: codeFilter('deactivate'),
+	},
+];
+
+export default {
+	mixins: [basicPage],
+	data() {
+		return {
+			urlOptions: {
+				getDataListURL: getFinishGoodSpecificationPage,
+				deleteURL: deleteFinishGoodSpecification,
+			},
+			tableProps,
+			tableBtn: [
+				this.$auth.hasPermi(`asrs:good-specification:update`)
+					? {
+							type: 'edit',
+							btnName: '编辑',
+					  }
+					: undefined,
+          this.$auth.hasPermi(`asrs:good-specification:delete`)
+					? {
+							type: 'delete',
+							btnName: '删除',
+					  }
+					: undefined,
+			].filter((v)=>v),
+			tableData: [],
+			formConfig: [
+				{
+					type: 'input',
+					label: '产品编码',
+					placeholder: '产品编码',
+					param: 'code',
+				},
+				{
+					type: 'input',
+					label: '产品名称',
+					placeholder: '产品名称',
+					param: 'name',
+				},
+				{
+					type: 'button',
+					btnName: '搜索',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: this.$auth.hasPermi('asrs:good-specification:create') ? 'button' : '',
+					btnName: '新增',
+					name: 'add',
+					color: 'success',
+					plain: true,
+				},
+				// {
+				// 	type: this.$auth.hasPermi('base:factory:create') ? 'separate' : '',
+				// },
+				// {
+				// 	type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
+				// 	btnName: '导出',
+				// 	name: 'export',
+				// 	color: 'warning',
+				// },
+			],
+		};
+	},
+	components: {
+		AddOrUpdate,
+	},
+	created() {},
+	methods: {
+		buttonClick(val) {
+			switch (val.btnName) {
+				case 'search':
+					this.listQuery.pageNo = 1;
+					this.listQuery.pageSize = 10;
+					this.listQuery.goodSpecificationName = val.name;
+					this.listQuery.goodSpecificationCode = val.code;
+					this.getDataList();
+					break;
+				case 'reset':
+					this.$refs.searchBarForm.resetForm();
+					this.listQuery = {
+						pageSize: 10,
+						pageNo: 1,
+						total: 1,
+					};
+					this.getDataList();
+					break;
+				case 'add':
+					this.addOrEditTitle = '新增';
+					this.addOrUpdateVisible = true;
+					this.addOrUpdateHandle();
+					break;
+				case 'export':
+					this.handleExport();
+					break;
+				default:
+					console.log(val);
+			}
+		},
+	},
+};
+</script>