@@ -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"> | |||||
<!-- <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> | </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: '序号', | |||||
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: 'name', name: '设备名称' }, | ||||
{ prop: 'code', name: '设备编码' }, | { prop: 'code', name: '设备编码' }, | ||||
{ prop: 'equipmentTypeId', name: '设备类型' }, | |||||
{ prop: 'groupId', name: '设备分组' }, | |||||
{ prop: 'equipmentTypeName', 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 | ||||
}, | }, | ||||
// 新增 / 修改 | |||||
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.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 | |||||
} | |||||
}) | }) | ||||
}, | }, | ||||
// 删除 | // 删除 | ||||
@@ -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> |