add CKEditor & update dialog
This commit is contained in:
부모
51022a6e6d
커밋
535004719c
13
package-lock.json
generated
13
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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)
|
||||
},
|
||||
|
||||
|
||||
@ -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
32
src/views/modules/monitoring/equipmentAdd.vue
Normal 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>
|
||||
불러오는 중...
Reference in New Issue
Block a user