@@ -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 | |||
} | |||
}) | |||
}, | |||
// 删除 | |||
@@ -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> |