add CKEditor & update dialog
This commit is contained in:
parent
51022a6e6d
commit
535004719c
13
package-lock.json
generated
13
package-lock.json
generated
@ -5283,6 +5283,19 @@
|
|||||||
"safe-buffer": "^5.0.1"
|
"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": {
|
"class-utils": {
|
||||||
"version": "0.3.6",
|
"version": "0.3.6",
|
||||||
"resolved": "https://registry.npm.taobao.org/class-utils/download/class-utils-0.3.6.tgz",
|
"resolved": "https://registry.npm.taobao.org/class-utils/download/class-utils-0.3.6.tgz",
|
||||||
|
@ -13,6 +13,7 @@
|
|||||||
"axios": "^0.19.2",
|
"axios": "^0.19.2",
|
||||||
"babel-eslint": "^8.0.1",
|
"babel-eslint": "^8.0.1",
|
||||||
"babel-plugin-component": "^1.1.1",
|
"babel-plugin-component": "^1.1.1",
|
||||||
|
"ckeditor4-vue": "^2.1.1",
|
||||||
"core-js": "^3.6.5",
|
"core-js": "^3.6.5",
|
||||||
"element-theme": "^2.0.1",
|
"element-theme": "^2.0.1",
|
||||||
"element-ui": "^2.15.7",
|
"element-ui": "^2.15.7",
|
||||||
|
@ -4,7 +4,8 @@
|
|||||||
<el-form ref="dataForm" :model="dataForm" :rules="dataFormRules">
|
<el-form ref="dataForm" :model="dataForm" :rules="dataFormRules">
|
||||||
<!-- 如果需要更精细一点的布局,可以根据配置项实现地再复杂一点,但此处暂时全部采用一行两列布局 -->
|
<!-- 如果需要更精细一点的布局,可以根据配置项实现地再复杂一点,但此处暂时全部采用一行两列布局 -->
|
||||||
<el-row v-for="n in rows" :key="n" :gutter="20">
|
<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 }" -->
|
<!-- :class="{ 'hidden-input': configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].hidden }" -->
|
||||||
<el-form-item
|
<el-form-item
|
||||||
v-if="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]"
|
v-if="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]"
|
||||||
@ -44,9 +45,10 @@
|
|||||||
|
|
||||||
<!-- extra components , like Markdown or RichEdit -->
|
<!-- extra components , like Markdown or RichEdit -->
|
||||||
<template v-if="configs.extraComponents && configs.extraComponents.length > 0">
|
<template v-if="configs.extraComponents && configs.extraComponents.length > 0">
|
||||||
<el-form-item v-for="ec in configs.extraComponents" :key="ec.name" :label="ec.label">
|
<el-form-item v-for="ec in configs.extraComponents" :key="ec.name" :label="ec.label" class="extra-components">
|
||||||
<!-- <component :is="ec.component" v-model="dataForm[ec.name]"></component> -->
|
<component style="margin-top: 40px;" v-if="ec.hasModel" :is="ec.component" v-bind="ec.props" v-model="dataForm[ec.name]" @ready="handleEditorReady" />
|
||||||
<component :is="ec.component" v-bind="ec.props" @uploader-update-filelist="handleUploadListUpdate" :uploader-inject-file-list="dataForm.files"/>
|
<!-- <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>
|
</el-form-item>
|
||||||
</template>
|
</template>
|
||||||
</el-form>
|
</el-form>
|
||||||
@ -244,26 +246,39 @@ export default {
|
|||||||
/** 计算默认值 */
|
/** 计算默认值 */
|
||||||
function calDefault(type) {
|
function calDefault(type) {
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case 'array':
|
case 'array':
|
||||||
return []
|
return []
|
||||||
// more case...
|
// more case...
|
||||||
default:
|
default:
|
||||||
return ''
|
return ''
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/** 检查是否需要额外的组件 */
|
/** 检查是否需要额外的组件 */
|
||||||
this.configs.extraComponents &&
|
this.configs.extraComponents &&
|
||||||
this.configs.extraComponents.forEach(item => {
|
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 */
|
/** 单独设置 id */
|
||||||
this.$set(this.dataForm, 'id', null)
|
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: {
|
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) {
|
getLabel(n, c) {
|
||||||
const opt = this.configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]
|
const opt = this.configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]
|
||||||
if (opt) {
|
if (opt) {
|
||||||
@ -327,18 +342,22 @@ export default {
|
|||||||
if (this.shouldWait)
|
if (this.shouldWait)
|
||||||
this.shouldWait.then(() => {
|
this.shouldWait.then(() => {
|
||||||
if (this.tempForm.length) {
|
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 => {
|
this.tempForm.forEach(item => {
|
||||||
console.log('item data', item.data)
|
console.log('item data', item.data)
|
||||||
this.dataForm[item.name] = 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) {
|
handleClick(btn) {
|
||||||
/** 提取url */
|
/** 提取url */
|
||||||
const urls = {}
|
const urls = {}
|
||||||
@ -354,6 +373,8 @@ export default {
|
|||||||
/** 需要验证表单的操作 */
|
/** 需要验证表单的操作 */
|
||||||
this.$refs['dataForm'].validate(valid => {
|
this.$refs['dataForm'].validate(valid => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
|
console.log('before send: ', this.dataForm)
|
||||||
|
|
||||||
this.$http({
|
this.$http({
|
||||||
url: this.$http.adornUrl(urls[btn.name].url),
|
url: this.$http.adornUrl(urls[btn.name].url),
|
||||||
method: btn.name === 'save' ? 'POST' : 'PUT',
|
method: btn.name === 'save' ? 'POST' : 'PUT',
|
||||||
@ -403,7 +424,11 @@ export default {
|
|||||||
|
|
||||||
handleUploadListUpdate(filelist) {
|
handleUploadListUpdate(filelist) {
|
||||||
// 此处需要参照‘设备类型’新增的接口,灵活地设置 dataForm
|
// 此处需要参照‘设备类型’新增的接口,灵活地设置 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)
|
console.log('handleUploadListUpdate(): ', this.dataForm)
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -6,12 +6,12 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button @click="getDataList()">查询</el-button>
|
<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 v-if="$hasPermission('monitoring:equipment:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
|
||||||
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</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
|
<el-pagination
|
||||||
@size-change="sizeChangeHandle"
|
@size-change="sizeChangeHandle"
|
||||||
@current-change="currentChangeHandle"
|
@current-change="currentChangeHandle"
|
||||||
@ -22,41 +22,123 @@
|
|||||||
layout="total, sizes, prev, pager, next, jumper"
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
></el-pagination>
|
></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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<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 BaseTable from '@/components/base-table'
|
||||||
import TableOperateComponent from '@/components/base-table/components/operationComponent'
|
import TableOperateComponent from '@/components/base-table/components/operationComponent'
|
||||||
import TableTextComponent from '@/components/base-table/components/detailComponent'
|
import TableTextComponent from '@/components/base-table/components/detailComponent'
|
||||||
|
import moment from 'moment'
|
||||||
|
import CKEditor from 'ckeditor4-vue'
|
||||||
|
|
||||||
const tableConfigs = [
|
const tableConfigs = [
|
||||||
{
|
{
|
||||||
type: 'index',
|
type: 'index',
|
||||||
name: '序号',
|
name: '序号'
|
||||||
more: {
|
// more: {
|
||||||
index: function(index) {
|
// index: function(index) {
|
||||||
return (index + 1) * 2
|
// 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: 'name', name: '设备名称' },
|
||||||
{ prop: 'code', name: '设备编码' },
|
{ prop: 'code', name: '设备编码' },
|
||||||
{ prop: 'equipmentTypeId', name: '设备类型' },
|
{ prop: 'equipmentTypeName', name: '设备类型' },
|
||||||
{ prop: 'groupId', name: '设备分组' },
|
{ prop: 'groupName', name: '设备分组' },
|
||||||
{ prop: 'enName', name: '英文名称' },
|
{ prop: 'enName', name: '英文名称' },
|
||||||
{ prop: 'abbr', 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'] }
|
{ 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 {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
tableConfigs,
|
tableConfigs,
|
||||||
|
addOrUpdateConfigs,
|
||||||
dataForm: {
|
dataForm: {
|
||||||
key: ''
|
key: ''
|
||||||
},
|
},
|
||||||
@ -115,11 +197,41 @@ export default {
|
|||||||
selectionChangeHandle(val) {
|
selectionChangeHandle(val) {
|
||||||
this.dataListSelections = val
|
this.dataListSelections = val
|
||||||
},
|
},
|
||||||
// 新增 / 修改
|
handleOperations({ type, data: id }) {
|
||||||
addOrUpdateHandle(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.addOrUpdateVisible = true
|
||||||
this.$nextTick(() => {
|
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>
|
Loading…
Reference in New Issue
Block a user