From e91520e99df3da475774bf670bb57061e23e99ce Mon Sep 17 00:00:00 2001
From: g7hoo <liubin_9396@163.com>
Date: Wed, 10 Aug 2022 15:28:19 +0800
Subject: [PATCH] update scrollbar style

---
 .../base-dialog/addOrUpdate/index.vue         | 102 ++++++++++++------
 src/views/modules/monitoring/product.vue      |  15 ++-
 2 files changed, 85 insertions(+), 32 deletions(-)

diff --git a/src/components/base-dialog/addOrUpdate/index.vue b/src/components/base-dialog/addOrUpdate/index.vue
index b3e1a9f..67f79d7 100644
--- a/src/components/base-dialog/addOrUpdate/index.vue
+++ b/src/components/base-dialog/addOrUpdate/index.vue
@@ -1,38 +1,62 @@
 <template>
 	<el-dialog class="super-flexible-dialog" :title="isDetail ? title.detail : !dataForm.id ? title.add : title.edit" :visible.sync="visible" @close="handleClose">
-		<el-form ref="dataForm" :model="dataForm" :rules="dataFormRules">
-			<!-- 如果需要更精细一点的布局，可以根据配置项实现地再复杂一点，但此处暂时全部采用一行两列布局  -->
-			<el-row v-for="n in rows" :key="n" :gutter="20">
-				<el-col v-for="c in COLUMN_PER_ROW" :key="`${n}+'col'+${c}`" :span="24 / COLUMN_PER_ROW">
-					<el-form-item
-						v-if="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]"
-						:prop="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name"
-						:key="`${n}-col-${c}-item`"
-						:label="getLabel(n, c)"
-					>
-						<!-- 暂时先不实现部分输入方式 -->
-						<el-input v-if="getType(n, c) === 'input'" :placeholder="getPlaceholder(n, c)" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]" clearable />
-						<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-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>
-							<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-cascader v-if="getType(n, c) === 'tree'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></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>
-						<el-date-picker v-if="getType(n, c) === 'date'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-date-picker>
+		<div style="max-height: 60vh; overflow-y: scroll; overflow-x: hidden;">
+			<el-form ref="dataForm" :model="dataForm" :rules="dataFormRules">
+				<!-- 如果需要更精细一点的布局，可以根据配置项实现地再复杂一点，但此处暂时全部采用一行两列布局  -->
+				<el-row v-for="n in rows" :key="n" :gutter="20">
+					<el-col v-for="c in COLUMN_PER_ROW" :key="`${n}+'col'+${c}`" :span="24 / COLUMN_PER_ROW">
+						<el-form-item
+							v-if="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]"
+							:prop="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name"
+							:key="`${n}-col-${c}-item`"
+							:label="getLabel(n, c)"
+						>
+							<!-- 暂时先不实现部分输入方式 -->
+							<el-input
+								v-if="getType(n, c) === 'input'"
+								:placeholder="getPlaceholder(n, c)"
+								v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"
+								clearable
+							/>
+							<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-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
+							>
+								<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-cascader v-if="getType(n, c) === 'tree'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></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>
+							<el-date-picker v-if="getType(n, c) === 'date'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-date-picker>
+						</el-form-item>
+					</el-col>
+				</el-row>
+
+				<!-- extra components , like Markdown or RichEdit -->
+				<template v-if="configs.extraComponents && configs.extraComponents.length > 0">
+					<el-form-item v-for="ec in configs.extraComponents" :key="ec.name" :label="ec.label">
+						<component :is="ec.component" v-model="dataForm[ec.name]"></component>
 					</el-form-item>
-				</el-col>
-			</el-row>
+				</template>
+			</el-form>
 
-			<!-- extra components , like Markdown or RichEdit -->
-			<template v-if="configs.extraComponents && configs.extraComponents.length > 0">
-				<el-form-item v-for="ec in configs.extraComponents" :key="ec.name" :label="ec.label">
-					<component :is="ec.component" v-model="dataForm[ec.name]"></component>
-				</el-form-item>
+			<template v-if="configs.subtable">
+				<h3>{{ configs.subtable.title }}</h3>
+				<component
+					key="sub-table"
+					:is="require('../../base-table/index.vue').default"
+					:table-head-configs="configs.subtable.tableConfigs"
+					:data="subtableDataList"
+					:max-height="500"
+					@operate-event="handleOperations"
+					@refreshDataList="getDataList"
+				></component>
 			</template>
-		</el-form>
-
+		</div>
 		<span slot="footer" class="dialog-footer">
 			<template v-for="(operate, index) in configs.operations">
 				<!-- {{ operate.name | btnNameFilter }} -->
@@ -73,6 +97,7 @@ const COLUMN_PER_ROW = 2
 
 export default {
 	name: 'AddOrUpdateDialog',
+	components: {},
 	props: {
 		configs: {
 			/**
@@ -112,6 +137,7 @@ export default {
 			// cached: false // 不采用缓存比较的方案了，采用 updated 方案： 如果更新了dataForm就在 confirm 时 emit(refreshDataList)
 			isUpdated: false,
 			dataForm: {},
+			subtableDataList: [],
 			dataFormRules: {},
 			defaultNames: {
 				name: '名称',
@@ -130,6 +156,8 @@ export default {
 		}
 	},
 	mounted() {
+		/** 视情况动态加载table组件 */
+
 		/** 计算 defaultPlaceholders */
 		const prefix = '请输入'
 		Object.entries(this.defaultNames).map(([key, value]) => {
@@ -302,6 +330,8 @@ export default {
 				// add more..
 			}
 		},
+		handleOperations() {},
+		getDataList() {},
 		handleClose() {
 			if (this.isAdd || this.isUpdated) this.$emit('refreshDataList')
 			this.visible = false
@@ -314,4 +344,16 @@ export default {
 .super-flexible-dialog >>> .el-select {
 	width: 100%;
 }
+
+.super-flexible-dialog >>> ::-webkit-scrollbar {
+	width: 4px;
+	border-radius: 4px;
+	background: #fff;
+}
+
+.super-flexible-dialog >>> ::-webkit-scrollbar-thumb {
+	width: 4px;
+	border-radius: 4px;
+	background: #ccc;
+}
 </style>
diff --git a/src/views/modules/monitoring/product.vue b/src/views/modules/monitoring/product.vue
index a63803b..3dfcf87 100644
--- a/src/views/modules/monitoring/product.vue
+++ b/src/views/modules/monitoring/product.vue
@@ -72,7 +72,7 @@ const UnitDictTypeId = '1557173812109242370'
 const ProductTypeDictTypeId = '1557179530308616193'
 const tableConfigs = [
 	{ type: 'index', name: '序号' },
-	{ prop: 'updateTime', name: '添加时间', filter: val => (val ? moment(val).format('YYYY-MM-DD hh:mm:ss') : '-') },
+	{ prop: 'createTime', name: '添加时间', filter: val => (val ? moment(val).format('YYYY-MM-DD hh:mm:ss') : '-') },
 	{ prop: 'name', name: '产品名称' },
 	{ prop: 'code', name: '产品编码' },
 	{ prop: 'specifications', name: '规格' },
@@ -151,7 +151,18 @@ const addOrUpdateConfigs = {
 		{ name: 'reset', url: true },
 		{ name: 'save', url: '/monitoring/product', permission: '' },
 		{ name: 'update', url: '/monitoring/product', permission: '' }
-	]
+	],
+	subtable: {
+		// for i18n
+		title: '动态添加属性',
+		url: '',
+		tableConfigs: [
+			{ type: 'index', name: '序号' },
+			{ prop: 'createTime', name: '添加时间', filter: val => (val ? moment(val).format('YYYY-MM-DD hh:mm:ss') : '-') },
+			{ prop: 'name', name: '属性名' },
+			{ prop: 'code', name: '属性值' }
+		]
+	}
 	// extraComponents: [
 	// 	{
 	// 		name: 'CompName',