realty/virgo.wzfrontend/console/src/views/work/property/register.vue

<template>
	<div class="hui-flex">
		<div class="hui-flex-box yui-tree-box">
			<div class="hui-left-tree">
				<div class="hui-left-tree-title">
					<svg-icon name="zhuangshi" width="16" height="20"></svg-icon>
					<span class="hui-left-tree-sub">资产列表</span>
				</div>
				<div class="hui-left-tree-content">
					<el-collapse>
						<el-collapse-item v-for="item in treeData" :key="item.id">
							<template slot="title">
								<i class="iconfont huifont-shuzhuangcaidantubiao"></i>
								<span class="el-collapse-name">{{item.name}}</span>
							</template>
							<div>
								<el-tree :data="item.children" :props="defaultProps" :expand-on-click-node="false">
								</el-tree>
							</div>
						</el-collapse-item>
					</el-collapse>
				</div>
			</div>
			<div class="hui-tree-content">
				<div class="hui-flex hui-content box-background">
					<div class="hui-content-title">
						<div class="hui-title-item active">资产登记</div>
					</div>
					<div class="hui-flex-box hui-flex hui-table">
						<div class="hui-content-insert">
							<el-button type="primary" size="medium" @click="insert">新增登记</el-button>
						</div>
						<div class="hui-flex-box">
							<el-table :data="tableData" row-key="id" border height="100%">
								<el-table-column label="序号" width="50">
									<template slot-scope="scope">
										<div style="text-align: center;">{{scope.$index + 1}}</div>
									</template>
								</el-table-column>
								<el-table-column label="资产名称" prop="name"></el-table-column>
								<el-table-column label="单位工程" prop="projectItemName"></el-table-column>
								<el-table-column label="具体位置" prop="projectItemTargetName"></el-table-column>
								<el-table-column label="创建者" prop="createdByUserName"></el-table-column>
								<el-table-column label="状态">
									<template slot-scope="scope">
										<div v-if="!scope.row.state" class="hui-state">
											<span class="hui-state-bage hui-state-primary"></span>
											<span class="hui-state-label">待生成</span>
										</div>
										<div v-if="scope.row.state == -1 || scope.row.state == 1" class="hui-state">
											<span class="hui-state-bage hui-state-primary"></span>
											<span class="hui-state-label">待审核</span>
										</div>
										<div v-if="scope.row.state == 2" class="hui-state">
											<span class="hui-state-bage hui-state-info"></span>
											<span class="hui-state-label">审核中</span>
										</div>
										<div v-if="scope.row.state == 3" class="hui-state">
											<span class="hui-state-bage hui-state-success"></span>
											<span class="hui-state-label">通过</span>
										</div>
										<div v-if="scope.row.state == 4" class="hui-state">
											<span class="hui-state-bage hui-state-error"></span>
											<span class="hui-state-label">未通过</span>
										</div>
									</template>
								</el-table-column>
								<el-table-column label="操作" width="150">
									<template slot-scope="scope">
										<div class="hui-table-operation">
											<span class="table-operation" @click="lookFlow(scope.row)">
												详情
											</span>
											<span class="table-operation" v-if="!scope.row.projectFlowId"
												@click="updateFlow(scope.row)">
												编辑
											</span>
											<span class="table-operation" v-if="!scope.row.projectFlowId"
												@click="deleteFlow(scope.row)">
												删除
											</span>
										</div>
									</template>
								</el-table-column>
								<template slot="empty">
									<empty description="暂无数据"></empty>
								</template>
							</el-table>
						</div>
						<div class="hui-content-pagination">
							<el-pagination :pager-count="9" layout="prev, pager, next" :total="totalCount"
								@current-change="currentChange">
							</el-pagination>
						</div>
					</div>
				</div>
			</div>
		</div>
		<el-dialog :title="isUpdate?'编辑':'新增'" :visible.sync="visible" width="1200px" :append-to-body="true">
			<flow-form v-if="visible" :isUpdate="isUpdate" @callback="callback" :detailId="detailId"
				:flowType="flowType">
			</flow-form>
		</el-dialog>
		<el-drawer title="流程详情" :visible.sync="drawer" :size="400" :append-to-body="true">
			<flow-detail v-if="drawer" @callback="callback" :detailId="detailId"></flow-detail>
		</el-drawer>
	</div>
</template>

<script>
	import {
		initDevicePartList,
		getDevicePartList,
		getFlowList,
		deleteFlow
	} from '@/httpApi/property'
	import flowForm from '@/components/flow/flowForm'
	import flowDetail from '@/components/flow/flowDetail'
	export default {
		data() {
			return {
				flowType: 1,
				tableData: [],
				currPage: 1,
				pageSize: 10,
				totalCount: 0,
				treeData: [],
				defaultProps: {
					children: 'children',
					label: 'name'
				},
				visible: false,
				isUpdate: false,
				detailId: '',
				drawer: false
			}
		},
		created() {
			this.initDeviceList();
			this.init();
		},
		methods: {
			init() {
				getFlowList(this.currPage, this.pageSize, {
					projectId: this.$store.getters.project.id,
					flowType: this.flowType
				}).then(res => {
					if (res.state) {
						this.tableData = res.data.dataList.map(node => {
							node = Object.assign(node, JSON.parse(node.flowData));
							return node;
						});;
						this.totalCount = res.data.totalCount;
					}
				})
			},
			initDeviceList() {
				getDevicePartList(this.$store.getters.organization.id, this.$store.getters.project.id).then(res => {
					if (res.state) {
						if (res.data.length === 0) {
							initDevicePartList(this.$store.getters.organization.id, this.$store.getters.project.id)
								.then(res => {
									if (res.state) this.init();
								})
						} else {
							this.treeData = res.data;
							this.returnChildren(this.treeData);
						}
					}
				})
			},
			returnChildren(data) {
				data.forEach(item => {
					if (item.children && item.deviceList) {
						let obj = item.deviceList.map(res => {
							res['deviceId'] = res.id;
							res['id'] = -res.id;
							return res;
						})
						item.children = item.children.concat(obj);
					}
					if (item.children && item.children.length > 0) this.returnChildren(item.children);
				});
			},
			currentChange(currPage) {
				this.currPage = currPage;
				this.init();
			},
			insert() {
				this.visible = true;
				this.isUpdate = false;
			},
			lookFlow(val) {
				this.detailId = val.id;
				this.drawer = true;
			},
			updateFlow(val) {
				this.detailId = val.id;
				this.isUpdate = true;
				this.visible = true;
			},
			deleteFlow(val) {
				this.$confirm('确定要删除该流程?', () => {
					deleteFlow(val.id).then(res => {
						if (res.state) {
							this.$message.success('操作成功');
							this.init();
						}
					})
				});
			},
			callback(type) {
				this.visible = false;
				if (type === 'init') this.init();
			}
		},
		components: {
			flowForm,
			flowDetail
		},
	}
</script>

<style lang="scss"></style>