mt-fe-group/mt-yd-ui
12
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

update scrollbar style

Browse Source
This commit is contained in:
g7hoo 2022-08-10 15:28:19 +08:00
parent 83fb096f6d
commit e91520e99d
2 changed files with 85 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
src/components/base-dialog/addOrUpdate/index.vue
View File

@ -1,38 +1,62 @@
<template> <template>
<el-dialog class="super-flexible-dialog" :title="isDetail ? title.detail : !dataForm.id ? title.add : title.edit" :visible.sync="visible" @close="handleClose"> <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"> <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-row v-for="n in rows" :key="n" :gutter="20">
<el-form-item <el-col v-for="c in COLUMN_PER_ROW" :key="`${n}+'col'+${c}`" :span="24 / COLUMN_PER_ROW">
v-if="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]" <el-form-item
:prop="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name" v-if="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]"
:key="`${n}-col-${c}-item`" :prop="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name"
:label="getLabel(n, c)" :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-input
<el-checkbox v-if="getType(n, c) === 'check'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-checkbox> v-if="getType(n, c) === 'input'"
<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> :placeholder="getPlaceholder(n, c)"
<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" /> v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"
</el-select> clearable
<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-radio v-if="getType(n, c) === 'radio'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-radio>
<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-checkbox v-if="getType(n, c) === 'check'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-checkbox>
<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-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-form-item>
</el-col> </template>
</el-row> </el-form>
<!-- extra components , like Markdown or RichEdit --> <template v-if="configs.subtable">
<template v-if="configs.extraComponents && configs.extraComponents.length > 0"> <h3>{{ configs.subtable.title }}</h3>
<el-form-item v-for="ec in configs.extraComponents" :key="ec.name" :label="ec.label"> <component
<component :is="ec.component" v-model="dataForm[ec.name]"></component> key="sub-table"
</el-form-item> :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> </template>
</el-form> </div>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<template v-for="(operate, index) in configs.operations"> <template v-for="(operate, index) in configs.operations">
<!-- {{ operate.name | btnNameFilter }} --> <!-- {{ operate.name | btnNameFilter }} -->
@ -73,6 +97,7 @@ const COLUMN_PER_ROW = 2
export default { export default {
name: 'AddOrUpdateDialog', name: 'AddOrUpdateDialog',
components: {},
props: { props: {
configs: { configs: {
/** /**
@ -112,6 +137,7 @@ export default {
// cached: false // 不采用缓存比较的方案了，采用 updated 方案： 如果更新了dataForm就在 confirm 时 emit(refreshDataList) // cached: false // 不采用缓存比较的方案了，采用 updated 方案： 如果更新了dataForm就在 confirm 时 emit(refreshDataList)
isUpdated: false, isUpdated: false,
dataForm: {}, dataForm: {},
subtableDataList: [],
dataFormRules: {}, dataFormRules: {},
defaultNames: { defaultNames: {
name: '名称', name: '名称',
@ -130,6 +156,8 @@ export default {
} }
}, },
mounted() { mounted() {
/** 视情况动态加载table组件 */
/** 计算 defaultPlaceholders */ /** 计算 defaultPlaceholders */
const prefix = '请输入' const prefix = '请输入'
Object.entries(this.defaultNames).map(([key, value]) => { Object.entries(this.defaultNames).map(([key, value]) => {
@ -302,6 +330,8 @@ export default {
// add more.. // add more..
} }
}, },
handleOperations() {},
getDataList() {},
handleClose() { handleClose() {
if (this.isAdd || this.isUpdated) this.$emit('refreshDataList') if (this.isAdd || this.isUpdated) this.$emit('refreshDataList')
this.visible = false this.visible = false
@ -314,4 +344,16 @@ export default {
.super-flexible-dialog >>> .el-select { .super-flexible-dialog >>> .el-select {
width: 100%; 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> </style>

15
src/views/modules/monitoring/product.vue
View File

@ -72,7 +72,7 @@ const UnitDictTypeId = '1557173812109242370'
const ProductTypeDictTypeId = '1557179530308616193' const ProductTypeDictTypeId = '1557179530308616193'
const tableConfigs = [ const tableConfigs = [
{ type: 'index', name: '序号' }, { 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: 'name', name: '产品名称' },
{ prop: 'code', name: '产品编码' }, { prop: 'code', name: '产品编码' },
{ prop: 'specifications', name: '规格' }, { prop: 'specifications', name: '规格' },
@ -151,7 +151,18 @@ const addOrUpdateConfigs = {
{ name: 'reset', url: true }, { name: 'reset', url: true },
{ name: 'save', url: '/monitoring/product', permission: '' }, { name: 'save', url: '/monitoring/product', permission: '' },
{ name: 'update', 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: [ // extraComponents: [
// { // {
// name: 'CompName', // name: 'CompName',