realty/virgo.wzfrontend/workark/src/components/work/system/serveSet/processSet.vue

<template>
	<div class="process-set">
		<process-set-item v-loading="loading" :list="list" type="edit" @callback="callback"></process-set-item>
		<el-dialog :close-on-click-modal="false" :title="isUpdate?'编辑':'新增'" :visible.sync="visible" width="900px"
			:append-to-body="true">
			<process-form v-if="visible" @callback="callback" :isUpdate="isUpdate" :itemId="itemId"
				:productCouponModelId="part.id">
			</process-form>
		</el-dialog>
	</div>
</template>

<script>
	const processSetItem = () => import('./processSetItem.vue');
	const processForm = () => import('./processForm');
	import {
		getProcessSetData,
		deleteProcessSetData
	} from '@/api/system'
	import {
		mapGetters
	} from 'vuex';
	export default {
		props: ['part'],
		data() {
			return {
				list: [],
				loading: false,
				itemId: '',
				visible: false,
				isUpdate: false
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				this.loading = true;
				getProcessSetData(this.part.id).then(res => {
					if (res.state) {
						this.list = res.data;
					}
					this.loading = false;
				})
			},
			edit() {
				let data = this.$store.getters.processSet;
				this.itemId = data.id;
				switch (data.type) {
					case 'insert':
						this.visible = true;
						this.isUpdate = false;
						break;
					case 'update':
						this.visible = true;
						this.isUpdate = true;
						break;
					case 'delete':
						this.deleteDepartment();
						break;
					default:
						break;
				}
			},
			deleteDepartment() {
				this.$confirm('确定要删除该过程?', () => {
					deleteProcessSetData(this.itemId).then(res => {
						if (res.state) {
							this.$message.success('操作成功');
							this.init();
						}
					})
				});
			},
			callback(type) {
				this.visible = false;
				if (type === 'init') this.init();
			}
		},
		computed: {
			...mapGetters(['processSet'])
		},
		components: {
			processSetItem,
			processForm
		},
		watch: {
			processSet() {
				this.edit()
			}
		},
	}
</script>

<style lang="scss">
	.process-set {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		padding: 15px;

		.process-set-item {
			padding-left: 40px;
			position: relative;
		}

		.process-set-insert {
			font-size: 12px;
			color: $--color-primary;
			border: 1px solid $--color-primary;
			padding: 2px 5px;
			display: inline;
			border-radius: 3px;
			cursor: pointer;
			opacity: 0.8;
		}

		.process-item-title {
			padding: 5px 0;

			.label {
				font-weight: bold;
				color: $--color-text-primary;
				font-size: $--font-size-large;
			}

			.el-icon-edit-outline {
				margin-left: 10px;
			}

			.el-icon-delete,
			.el-icon-edit-outline {
				padding: 2px;
				cursor: pointer;
			}
		}

		.process-item-content {
			padding: 5px 0;
		}

		.process-set-state {
			width: 20px;
			height: 20px;
			border-radius: 50%;
			position: absolute;
			left: 7px;
			top: 6px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.process-set-state-1 {
			width: 8px;
			height: 8px;
			border-radius: 50%;
		}

		.process-set-state-2 {
			width: 14px;
			height: 14px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.line {
			position: absolute;
			left: 16px;
			width: 2px;
		}

		.line-top {
			top: 0;
			height: 6px;
		}

		.line-bottom {
			top: 26px;
			bottom: 0;
		}

		.success {

			.process-set-state,
			.line {
				background: rgba(0, 180, 42, 0.4);
			}

			.process-set-state-1 {
				background: rgba(0, 180, 42, 1);
			}

			.process-set-state-2 {
				background: rgba(0, 180, 42, 0.6);
			}

		}

		.error {

			.process-set-state,
			.line {
				background: rgba(245, 63, 63, 0.4);
			}

			.process-set-state-1 {
				background: rgba(245, 63, 63, 1);
			}

			.process-set-state-2 {
				background: rgba(245, 63, 63, 0.6);
			}
		}

		.waiting {

			.process-set-state,
			.line {
				background: rgba(255, 125, 0, 0.4);
			}

			.process-set-state-1 {
				background: rgba(255, 125, 0, 1);
			}

			.process-set-state-2 {
				background: rgba(255, 125, 0, 0.6);
			}
		}

		.info {

			.process-set-state,
			.line {
				background: rgba(144, 157, 143, 0.4);
			}

			.process-set-state-1 {
				background: rgba(144, 157, 143, 1);
			}

			.process-set-state-2 {
				background: rgba(144, 157, 143, 0.6);
			}
		}
	}
</style>