src/components/base-dialog/AttrForm/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="attr-form">
-		<h3>{{ title }} <el-button style="margin-left: 8px;" type="text" @click="showAddAttr = true">添加</el-button></h3>
+		<h3>{{ title }} <el-button style="margin-left: 8px;" type="text" v-if="!isDetail" @click="showAddAttr = true">添加</el-button></h3>
 		<div v-if="!showAddAttr">
 			<component
 				key="sub-table"
@@ -48,6 +48,10 @@ export default {
 	name: 'AttrForm',
 	components: { BaseTable },
 	props: {
+		isDetail: {
+			type: Boolean,
+			default: false
+		},
 		visible: {
 			type: Boolean,
 			default: false

src/components/base-dialog/addOrUpdate/index.vue

@@ -19,32 +19,36 @@
 								:placeholder="getPlaceholder(n, c)"
 								v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"
 								clearable
+								:disabled="isDetail"
 							/>
-							<el-radio v-if="getType(n, c) === 'radio'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-radio>
-							<el-checkbox v-if="getType(n, c) === 'check'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-checkbox>
+							<el-radio v-if="getType(n, c) === 'radio'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]" :disabled="isDetail" />
+							<el-checkbox v-if="getType(n, c) === 'check'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]" :disabled="isDetail" />
 							<el-select
 								v-if="getType(n, c) === 'select'"
 								:placeholder="getPlaceholder(n, c)"
 								v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"
 								clearable
+								:disabled="isDetail"
 								@change="emitSelectChange(configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name, $event)"
 							>
 								<el-option v-for="opt in configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].options" :key="opt.label" :label="opt.label" :value="opt.value" />
 							</el-select>
-							<el-switch v-if="getType(n, c) === 'switch'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-switch>
+							<el-switch v-if="getType(n, c) === 'switch'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]" :disabled="isDetail" />
 							<el-cascader
 								v-if="getType(n, c) === 'cascader'"
 								v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"
 								:options="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].options"
 								:props="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].props"
-							></el-cascader>
-							<el-time-select v-if="getType(n, c) === 'time'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-time-select>
+								:disabled="isDetail"
+							/>
+							<el-time-select v-if="getType(n, c) === 'time'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]" :disabled="isDetail" />
 							<el-date-picker
 								v-if="getType(n, c) === 'date'"
 								v-bind="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].props"
 								:placeholder="getPlaceholder(n, c)"
 								v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"
-							></el-date-picker>
+								:disabled="isDetail"
+							/>
 						</el-form-item>
 					</el-col>
 				</el-row>
@@ -52,7 +56,15 @@
 				<!-- extra components , like Markdown or RichEdit -->
 				<template v-if="configs.extraComponents && configs.extraComponents.length > 0">
 					<el-form-item v-for="(ec, index) in configs.extraComponents" :key="ec.name + index" :label="ec.label" class="extra-components">
-						<component style="margin-top: 40px;" v-if="ec.hasModel" :is="ec.component" v-bind="ec.props" v-model="dataForm[ec.name]" @ready="handleEditorReady" />
+						<component
+							style="margin-top: 40px;"
+							v-if="ec.hasModel"
+							:is="ec.component"
+							v-bind="ec.props"
+							v-model="dataForm[ec.name]"
+							@ready="handleEditorReady"
+							:read-only="isDetail"
+						/>
 						<!-- <component v-if="ec.hasModel" :is="ec.component" v-bind="ec.props" v-model="dataForm[ec.name]" /> -->
 						<component
 							v-else
@@ -60,13 +72,14 @@
 							v-bind="ec.props"
 							@uploader-update-filelist="handleUploadListUpdate($event, ec.props.extraParams.typeCode)"
 							:uploader-inject-file-list="/*用于设备分流的*/ fileList[ec.props.extraParams.typeCode]"
+							:read-only="isDetail"
 						/>
 					</el-form-item>
 				</template>
 			</el-form>
 
 			<template v-if="dataForm.id && configs.subtable">
-				<attr-form :related-id="dataForm.id" v-bind="configs.subtable" />
+				<attr-form :related-id="dataForm.id" v-bind="configs.subtable" :is-detail="isDetail" />
 			</template>
 		</div>
 		<span slot="footer" class="dialog-footer">
@@ -74,8 +87,9 @@
 				<!-- {{ operate.name | btnNameFilter }} -->
 				<el-button
 					v-if="
-						operate.showAlways ||
-							(((dataForm.id && operate.showOnEdit) || (!dataForm.id && !operate.showOnEdit)) && (operate.permission ? $hasPermission(operate.permission) : true))
+						!isDetail &&
+							(operate.showAlways ||
+								(((dataForm.id && operate.showOnEdit) || (!dataForm.id && !operate.showOnEdit)) && (operate.permission ? $hasPermission(operate.permission) : true)))
 					"
 					:key="`operate-${index}`"
 					:type="btnType[operate.name]"
@@ -83,6 +97,7 @@
 					>{{ btnName[operate.name] }}</el-button
 				>
 			</template>
+			<el-button v-if="isDetail" @click="handleClick({ name: 'cancel' })">返回</el-button>
 		</span>
 	</el-dialog>
 </template>
@@ -347,7 +362,8 @@ export default {
 			}
 		},
 
-		init(id) {
+		init(id, isdetail = false) {
+			this.isDetail = isdetail
 			this.visible = true
 			this.$nextTick(() => {
 				this.$refs['dataForm'].resetFields()

src/components/base-upload/index.vue

@@ -13,7 +13,7 @@
 			<!-- :before-remove="beforeRemove" -->
 			<!-- accept="image/*" -->
 			<!-- <el-upload class="yd-upload" :action="$http.adornUrl(url)" multiple name="files" :data="extraParams" :file-list="fileList" :on-remove="handleRemove" :before-remove="beforeRemove"> -->
-			<el-button size="small" type="primary">{{ buttonContent }}</el-button>
+			<el-button :disabled="readOnly" size="small" type="primary">{{ buttonContent }}</el-button>
 			<div v-if="tip" slot="tip" class="el-upload__tip">{{ tip }}</div>
 		</el-upload>
 	</div>
@@ -39,6 +39,10 @@ export default {
 			// 从外部传进来 fileList，用于展示文件列表用
 			type: Array,
 			default: () => []
+		},
+		readOnly: {
+			type: Boolean,
+			default: false
 		}
 	},
 	// inject: {

src/views/modules/monitoring/equipment.vue

@@ -6,8 +6,8 @@
 			</el-form-item>
 			<el-form-item>
 				<el-button @click="getDataList()">查询</el-button>
-				<el-button @click="test()">test</el-button>
 				<el-button v-if="$hasPermission('monitoring:equipment:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
+				<el-button @click="exportHandle()">导出</el-button>
 			</el-form-item>
 		</el-form>
 
@@ -163,7 +163,7 @@ const addOrUpdateConfigs = {
 			{ prop: 'createTime', name: '创建时间' },
 			{ prop: 'attrName', name: '属性名称', formField: true },
 			{ prop: 'attrValue', name: '属性值', formField: true },
-			{ prop: 'operate', name: '操作', options: ['edit', 'delete'] }
+			{ prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
 		]
 	},
 	operations: [
@@ -272,31 +272,54 @@ export default {
 			switch (type) {
 				case 'view-detail':
 					// const { name, code } = this.dataList.find(item => item.id === id)
-					this.$router.push({
-						name: 'monitoring-equipmentAdd',
-						params: {
-							isdetail: true,
-							equipmentId: id
-						}
-					})
-					break
+					// this.$router.push({
+					// 	name: 'monitoring-equipmentAdd',
+					// 	params: {
+					// 		isdetail: true,
+					// 		equipmentId: id
+					// 	}
+					// })
+					// break
+					return this.addOrUpdateHandle(id, true)
 				case 'edit':
 					return this.addOrUpdateHandle(id)
 				case 'delete':
 					return this.deleteHandle(id)
 			}
 		},
-		test() {
-			this.addOrUpdateVisible = true
-			this.$nextTick(() => {
-				this.$refs.addOrUpdate.init()
+		exportHandle() {
+			// this.$http.get(this.$http.adornUrl('/monitoring/equipment/export')).then(({ data: res }) => {
+			this.$http({ url: this.$http.adornUrl('/monitoring/equipment/export'), method: 'get', responseType: 'blob' }).then(res => {
+				let fileName = 'equipment-list.xls'
+				if (res.headers['content-disposition']) {
+					const contentDisposition = res.headers['content-disposition']
+					fileName = contentDisposition.slice(contentDisposition.indexOf('filename=') + 9)
+				}
+				
+				fileName = decodeURIComponent(fileName)
+
+				const blob = new Blob([res.data])
+
+				if ('download' in document.createElement('a')) {
+					const alink = document.createElement('a')
+					alink.download = fileName
+					alink.style.display = 'none'
+					alink.target = '_blank'
+					alink.href = URL.createObjectURL(blob)
+					document.body.appendChild(alink)
+					alink.click()
+					URL.revokeObjectURL(alink.href)
+					document.body.removeChild(alink)
+				} else {
+					navigator.msSaveBlob(blob, fileName)
+				}
 			})
 		},
 		// 新增 / 修改
-		addOrUpdateHandle(id) {
+		addOrUpdateHandle(id, isdetail = false) {
 			this.addOrUpdateVisible = true
 			this.$nextTick(() => {
-				this.$refs.addOrUpdate.init(id)
+				this.$refs.addOrUpdate.init(id, isdetail)
 			})
 			// this.$router.push({
 			// 	name: 'monitoring-equipmentAdd',