Cms.vue 2.52 KB
Newer Older
fukai committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99
<template>
  <div class="cms-container">
		<div class="cms-left">
			<div class="screenage-list-registered">
				<c-table>
					<el-table-column type="selection" width="55"></el-table-column>
					<el-table-column label="影像名称" prop="imgName" width="auto"></el-table-column>
					<el-table-column label="类型名称" prop="type" width="auto"></el-table-column>
					<el-table-column label="操作" width="auto">
						<template slot-scope="scope">
							<div>
								<c-button type="primary">删除</c-button>
								<c-button type="primary">修改</c-button>
							</div>
						</template>
					</el-table-column>
				</c-table>
			</div>
			<div class="screenage-list-deleted">
				<c-table>
					<el-table-column label="删除影像" prop="deleteImg" width="auto"></el-table-column>
					<el-table-column label="类型名称" prop="type" width="auto"></el-table-column>
					<el-table-column label="操作" width="auto">
						<template slot-scope="scope">
							<div>
								<c-button type="primary">恢复</c-button>
								<c-button type="primary">清除</c-button>
							</div>
						</template>
					</el-table-column>
				</c-table>
			</div>
		</div>
		<div class="cms-center">
			<div class="cms-operate-options">
				<el-select v-model="selectedType">
					<el-option v-for="(item, idx) in typeOptions" :key="idx" :label="item.value + item.label" :value="item.value"></el-option>
				</el-select>
				<c-button style="margin-left: 15px;" type="primary">扫描/上传</c-button>
				<c-button type="primary">取消</c-button>
				<c-button type="primary">提交</c-button>
				<c-button type="primary">删除</c-button>
				<c-button type="primary">重命名</c-button>
			</div>
			<div class="screenage-content">
				<div></div>
			</div>
		</div>
	</div>
</template>

<script>
export default { 
	name: "Cms",
	props: [],
	data() {
		return {
			selectedType: '',
			typeOptions: [
				{ label: '单据', value: '00' },
				{ label: '发票', value: '01' },
				{ label: '贸易合同', value: '02' },
				{ label: '审查审批', value: '03' },
				{ label: '其他', value: '04' },
			]
		}
	},
	methods: {

	}
};
</script>

<style scoped>
.cms-container {
	width: 100%;
	height: 100%;
	display: flex;
	background-color: #f7fbfd;
}
.cms-left {
	width: 25%;
	display: flex;
	flex-direction: column;
	background-color: #fff;
}
.cms-left .screenage-list-registered, .cms-left .screenage-list-deleted {
	height: 50%;
}
.cms-center {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 0 10px;
}
.cms-center .screenage-content {
	flex: 1;
}
</style>