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

add CKEditor & update dialog

Browse Source
This commit is contained in:
g7hoo 2022-08-16 14:07:33 +08:00
parent 51022a6e6d
commit 535004719c
5 changed files with 211 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
package-lock.json generated
View File

@ -5283,6 +5283,19 @@
"safe-buffer": "^5.0.1"
}
},
"ckeditor4-integrations-common": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/ckeditor4-integrations-common/-/ckeditor4-integrations-common-1.0.0.tgz",
"integrity": "sha512-OAoQT/gYrHkg0qgzf6MS/rndYhq3SScLVQ3rtXQeuCE8ju7nFHg3qZ7WGA2XpFxcZzsMP6hhugXqdel5vbcC3g=="
},
"ckeditor4-vue": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/ckeditor4-vue/-/ckeditor4-vue-2.1.1.tgz",
"integrity": "sha512-BBmpT1BYxOmaA+qy9+hvhG0tDYCGqFve1eDSol0ZNwWCm1hZvmPAke809AhkHFUjb834dbNRlTwH3c2qedjtkQ==",
"requires": {
"ckeditor4-integrations-common": "^1.0.0"
}
},
"class-utils": {
"version": "0.3.6",
"resolved": "https://registry.npm.taobao.org/class-utils/download/class-utils-0.3.6.tgz",

1
package.json
View File

@ -13,6 +13,7 @@
"axios": "^0.19.2",
"babel-eslint": "^8.0.1",
"babel-plugin-component": "^1.1.1",
"ckeditor4-vue": "^2.1.1",
"core-js": "^3.6.5",
"element-theme": "^2.0.1",
"element-ui": "^2.15.7",

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

@ -4,7 +4,8 @@
<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-col v-for="c in COLUMN_PER_ROW" :key="`${n}+'col'+${c}`" :span="getSpan(n, c)">
<!-- <el-col v-for="c in COLUMN_PER_ROW" :key="`${n}+'col'+${c}`" :span="24 / COLUMN_PER_ROW"> -->
<!-- :class="{ 'hidden-input': configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].hidden }" -->
<el-form-item
v-if="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]"
@ -44,9 +45,10 @@
<!-- 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> -->
<component :is="ec.component" v-bind="ec.props" @uploader-update-filelist="handleUploadListUpdate" :uploader-inject-file-list="dataForm.files"/>
<el-form-item v-for="ec in configs.extraComponents" :key="ec.name" :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 v-if="ec.hasModel" :is="ec.component" v-bind="ec.props" v-model="dataForm[ec.name]" /> -->
<component v-else :is="ec.component" v-bind="ec.props" @uploader-update-filelist="handleUploadListUpdate" :uploader-inject-file-list="dataForm.files" />
</el-form-item>
</template>
</el-form>
@ -244,26 +246,39 @@ export default {
/** 计算默认值 */
function calDefault(type) {
switch (type) {
case 'array':
case 'array':
return []
// more case...
default:
default:
return ''
}
}
/** 检查是否需要额外的组件 */
this.configs.extraComponents &&
this.configs.extraComponents.forEach(item => {
this.$set(this.dataForm, [item.name], calDefault(item.fieldType))
if (Object.hasOwn(this.dataForm, [item.name])) {
console.log('有了!')
return
} else {
console.log('新建！')
this.$set(this.dataForm, [item.name], calDefault(item.fieldType))
}
console.log('component: ', item.component)
})
/** 单独设置 id */
this.$set(this.dataForm, 'id', null)
console.log('mounted: this.dataForm', JSON.stringify(this.dataForm))
})
console.log("mounted: this.dataForm", JSON.stringify(this.dataForm))
},
methods: {
getSpan(n, c) {
const opt = this.configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]
return opt && opt.span ? opt.span : 24 / COLUMN_PER_ROW
},
getLabel(n, c) {
const opt = this.configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]
if (opt) {
@ -327,18 +342,22 @@ export default {
if (this.shouldWait)
this.shouldWait.then(() => {
if (this.tempForm.length) {
console.log("create new, tempform", JSON.stringify(this.tempForm.length))
console.log('create new, tempform', JSON.stringify(this.tempForm.length))
this.tempForm.forEach(item => {
console.log('item data', item.data)
this.dataForm[item.name] = item.data
})
console.log("create new, dataform", JSON.stringify(this.dataForm))
console.log('create new, dataform', JSON.stringify(this.dataForm))
}
})
}
})
},
handleEditorReady(val) {
console.log('editor rready..', val)
},
handleClick(btn) {
/** 提取url */
const urls = {}
@ -354,6 +373,8 @@ export default {
/** 需要验证表单的操作 */
this.$refs['dataForm'].validate(valid => {
if (valid) {
console.log('before send: ', this.dataForm)
this.$http({
url: this.$http.adornUrl(urls[btn.name].url),
method: btn.name === 'save' ? 'POST' : 'PUT',
@ -403,7 +424,11 @@ export default {
handleUploadListUpdate(filelist) {
// 此处需要参照‘设备类型’新增的接口，灵活地设置 dataForm
this.$set(this.dataForm, 'fileIds', filelist.map(item => item.id))
this.$set(
this.dataForm,
'fileIds',
filelist.map(item => item.id)
)
console.log('handleUploadListUpdate(): ', this.dataForm)
},

146
src/views/modules/monitoring/equipment.vue
View File

@ -6,12 +6,12 @@
</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-form-item>
</el-form>
<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="500" />
<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="500" @operate-event="handleOperations" @refreshDataList="getDataList" />
<el-pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
@ -22,41 +22,123 @@
layout="total, sizes, prev, pager, next, jumper"
></el-pagination>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="addOrUpdateVisible = false" />
</div>
</template>
<script>
import AddOrUpdate from './equipment-add-or-update'
import AddOrUpdate from '@/components/base-dialog/addOrUpdate'
// import AddOrUpdate from './equipment-add-or-update'
import BaseTable from '@/components/base-table'
import TableOperateComponent from '@/components/base-table/components/operationComponent'
import TableTextComponent from '@/components/base-table/components/detailComponent'
import moment from 'moment'
import CKEditor from 'ckeditor4-vue'
const tableConfigs = [
{
type: 'index',
name: '序号',
more: {
index: function(index) {
return (index + 1) * 2
}
}
name: '序号'
// more: {
// index: function(index) {
// return (index + 1) * 2
// }
// }
},
{ prop: 'createTime', name: '添加时间' },
{ prop: 'createTime', name: '添加时间', filter: val => moment(val).format('YYYY-MM-DD HH:mm:ss') },
{ prop: 'name', name: '设备名称' },
{ prop: 'code', name: '设备编码' },
{ prop: 'equipmentTypeId', name: '设备类型' },
{ prop: 'groupId', name: '设备分组' },
{ prop: 'equipmentTypeName', name: '设备类型' },
{ prop: 'groupName', name: '设备分组' },
{ prop: 'enName', name: '英文名称' },
{ prop: 'abbr', name: '缩写' },
{ prop: 'details', name: '详情', subcomponent: TableTextComponent },
{ prop: 'details', name: '详情', subcomponent: TableTextComponent, actionName: 'view-detail' },
{ prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
]
const addOrUpdateConfigs = {
type: 'dialog',
infoUrl: '/monitoring/equipment',
fields: [
{ name: 'name', label: '设备名称' },
{ name: 'code', label: '设备编码' },
{ name: 'enName', label: '英文名称' },
{ name: 'abbr', label: '缩写' },
{ name: 'equipmentTypeId', label: '设备类型', type: 'select', options: [] },
{ name: 'groupId', label: '设备分组', required: true, type: 'select', options: [{ label: 1, value: 1 }] },
{ name: 'productionTime', label: '生产日期' },
{ name: 'enterTime', label: '进厂日期' },
{ name: 'tvalue', label: '设备TT值', required: true },
{ name: 'processingTime', label: '单件产品加工时间' },
{ name: 'manufacturer', label: '制造商' },
{ name: 'spec', label: '设备规格' },
{ name: 'remark', label: '备注 ', span: 24 }
],
// TODO: 富文本
// TODO: 设备资料上传
// TODO: 设备图片上传
extraComponents: [
{
name: 'description',
hasModel: true,
label: '功能描述',
fieldType: 'string',
component: CKEditor.component,
props: {
value: 'tests',
config: {
// ckeditor 的配置: https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html
// toolbar: [['Bold']]
}
}
},
{
name: 'files',
label: '上传资料',
fieldType: 'array',
component: () => import('@/components/base-upload'),
props: {
// 上传组件需要的 props
url: '/monitoring/attachment/uploadFileFormData',
extraParams: { typeCode: 'EquipmentTypeFile' },
buttonContent: '点击上传',
tip: '上传文件大小不要超过 2mb (2048kb)'
},
validators: {
size: () => {}, // 上传大小设置
image: () => {} // 上传图片认证
}
},
{
name: 'files',
label: '设备图片',
fieldType: 'array',
component: () => import('@/components/base-upload'),
props: {
// 上传组件需要的 props
url: '/monitoring/attachment/uploadFileFormData',
extraParams: { typeCode: 'EquipmentTypeImage' },
buttonContent: '点击上传',
tip: '上传文件大小不要超过 2mb (2048kb)'
},
validators: {
size: () => {}, // 上传大小设置
image: () => {} // 上传图片认证
}
}
],
operations: [
{ name: 'cancel', showAlways: true },
{ name: 'save', url: '/monitoring/equipmentGroup', permission: '', showOnEdit: false },
{ name: 'update', url: '/monitoring/equipmentGroup', permission: '', showOnEdit: true }
]
}
export default {
data() {
return {
tableConfigs,
addOrUpdateConfigs,
dataForm: {
key: ''
},
@ -115,11 +197,41 @@ export default {
selectionChangeHandle(val) {
this.dataListSelections = val
},
// 新增 / 修改
addOrUpdateHandle(id) {
handleOperations({ type, data: id }) {
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
case 'edit':
return this.addOrUpdateHandle(id)
case 'delete':
return this.deleteHandle(id)
}
},
test() {
this.addOrUpdateVisible = true
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id)
this.$refs.addOrUpdate.init()
})
},
// 新增 / 修改
addOrUpdateHandle(id) {
// this.addOrUpdateVisible = true
// this.$nextTick(() => {
// this.$refs.addOrUpdate.init(id)
// })
this.$router.push({
name: 'monitoring-equipmentAdd',
params: {
equipmentId: id
}
})
},
// 删除

32
src/views/modules/monitoring/equipmentAdd.vue Normal file
View File

@ -0,0 +1,32 @@
<template>
<div class="equipment-add">
<h2>{{ $route.params.isdetail ? '查看详情' : $route.params.equipmentId ? '编辑' : '新增' }}</h2>
<p>id: {{ $route.params.equipmentId }}</p>
</div>
</template>
<script>
export default {
name: 'EquipmentAdd',
props: {},
data() {
return {}
},
watch: {
'$route.params': function(val, oldVal) {}
},
methods: {}
}
</script>
<style scoped>
.equipment-add {
background: #fff;
padding: 12px;
min-height: 50vh;
}
h2 {
margin: 8px 0;
}
</style>