mirror of https://github.com/veops/cmdb.git
add batch module
This commit is contained in:
shaohaojiecoder
pycook
parent
13476128d5
commit
61f77cf311
|
|
@ -0,0 +1,85 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="title">
|
||||
<ci-type-choice @getCiTypeAttr="showCiType">
|
||||
</ci-type-choice>
|
||||
</div>
|
||||
<a-row>
|
||||
<a-col :span="18">
|
||||
<a-card style="height: 605px">
|
||||
<a-button class="ant-btn-primary" style="margin-left: 10px;" :disabled="uploadFlag" id="upload-button" @click="uploadData">上传</a-button>
|
||||
<upload-file-form v-if="displayUpload" ref="fileEditor"></upload-file-form>
|
||||
<ci-table v-if="editorOnline" :ciTypeAttrs="ciTypeAttrs" ref="onlineEditor"></ci-table>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<div style="min-height: 604px; background: white">
|
||||
<a-card title="上传结果">
|
||||
<upload-result v-if="beginLoad" :upLoadData="needDataList" :ciType="ciType" :unique-field="uniqueField"></upload-result>
|
||||
</a-card>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CiTypeChoice from './modules/CiTypeChoice'
|
||||
import CiTable from './modules/CiTable'
|
||||
import UploadFileForm from './modules/UploadFileForm'
|
||||
import UploadResult from './modules/UploadResult'
|
||||
import { filterNull } from '@/api/cmdb/batch'
|
||||
|
||||
export default {
|
||||
name: 'Batch',
|
||||
components: {
|
||||
CiTypeChoice,
|
||||
CiTable,
|
||||
UploadFileForm,
|
||||
UploadResult
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
editorOnline: false,
|
||||
uploadFlag: true,
|
||||
ciTypeAttrs: [],
|
||||
needDataList: [],
|
||||
ciType: -1,
|
||||
uniqueField: '',
|
||||
uniqueId: 0,
|
||||
beginLoad: false,
|
||||
displayUpload: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showCiType (message) {
|
||||
this.ciTypeAttrs = message
|
||||
this.ciType = message.type_id
|
||||
this.uniqueField = message.unique
|
||||
this.uniqueId = message.unique_id
|
||||
this.editorOnline = false
|
||||
this.$nextTick(() => {
|
||||
this.editorOnline = true
|
||||
})
|
||||
},
|
||||
uploadData () {
|
||||
if (this.ciType < 0) {
|
||||
alert('尚未选择模板类型！')
|
||||
return
|
||||
}
|
||||
this.beginLoad = false
|
||||
const fileData = this.$refs.fileEditor.dataList
|
||||
if (fileData.length > 0) {
|
||||
this.needDataList = filterNull(fileData)
|
||||
} else {
|
||||
this.needDataList = filterNull(this.$refs.onlineEditor.getDataList())
|
||||
}
|
||||
this.displayUpload = false
|
||||
this.$nextTick(() => {
|
||||
this.beginLoad = true
|
||||
this.displayUpload = true
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="hotTable" class="hotTable" style="overflow: hidden; height:275px">
|
||||
<HotTable :root="root" ref="HTable" :settings="hotSettings"></HotTable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { HotTable } from '@handsontable-pro/vue'
|
||||
export default {
|
||||
name: 'Editor',
|
||||
components: {
|
||||
HotTable
|
||||
},
|
||||
props: { ciTypeAttrs: { type: Object, required: true } },
|
||||
data: function () {
|
||||
return {
|
||||
root: 'test-hot',
|
||||
dataTitle: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
hotSettings () {
|
||||
const whiteColumn = []
|
||||
const aliasList = []
|
||||
const dataTitle = []
|
||||
this.$props.ciTypeAttrs.attributes.forEach(item => {
|
||||
dataTitle.push(item.name)
|
||||
aliasList.push(item.alias)
|
||||
whiteColumn.push('')
|
||||
})
|
||||
this.dataTitle = dataTitle
|
||||
const dt = {
|
||||
data: [whiteColumn],
|
||||
startRows: 11,
|
||||
startCols: 6,
|
||||
minRows: 5,
|
||||
minCols: 4,
|
||||
maxRows: 90,
|
||||
maxCols: 90,
|
||||
rowHeaders: true,
|
||||
// minSpareCols: 2, //列留白
|
||||
colHeaders: aliasList,
|
||||
minSpareRows: 2, // 行留白
|
||||
// autoWrapRow: true, // 自动换行
|
||||
// 自定义右键菜单，可汉化，默认布尔值
|
||||
contextMenu: {
|
||||
items: {
|
||||
row_above: {
|
||||
name: '上方插入一行'
|
||||
},
|
||||
row_below: {
|
||||
name: '下方插入一行'
|
||||
},
|
||||
moverow: {
|
||||
name: '删除行'
|
||||
},
|
||||
unfreeze_column: {
|
||||
name: '取消列固定'
|
||||
},
|
||||
hsep1: '---------', // 提供分隔线
|
||||
hsep2: '---------'
|
||||
}
|
||||
},
|
||||
// width: '100%',
|
||||
// fillHandle: true, // 选中拖拽复制 possible values: true, false, "horizontal", "vertical"
|
||||
fixedColumnsLeft: 0, // 固定左边列数
|
||||
fixedRowsTop: 0, // 固定上边列数
|
||||
manualColumnFreeze: true, // 手动固定列
|
||||
// manualColumnMove: true, // 手动移动列
|
||||
// manualRowMove: true, // 手动移动行
|
||||
// manualColumnResize: true, // 手工更改列距
|
||||
// manualRowResize: true, // 手动更改行距
|
||||
comments: true, // 添加注释
|
||||
customBorders: [], // 添加边框
|
||||
columnSorting: true, // 排序
|
||||
stretchH: 'all', // 根据宽度横向扩展，last:只扩展最后一列，none：默认不扩展
|
||||
afterChange: function (changes, source) {
|
||||
if (changes !== null) {
|
||||
document.getElementById('upload-button').disabled = false
|
||||
}
|
||||
}
|
||||
}
|
||||
return dt
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDataList () {
|
||||
const data = this.$refs.HTable.$data.hotInstance.getData()
|
||||
data.unshift(this.dataTitle)
|
||||
return data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
@import '~handsontable/dist/handsontable.full.css';
|
||||
</style>
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
<template>
|
||||
<div>
|
||||
<a-form :form="form" style="max-width: 500px; margin: 30px auto 0;">
|
||||
<a-row>
|
||||
<a-col :span="18">
|
||||
<a-form-item label="模板类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-select
|
||||
placeholder="--请选择模板类型--"
|
||||
v-decorator="['ciTypes', { rules: [{required: true, message: '模板类型必须选择'}] }]"
|
||||
@change="selectCiType"
|
||||
>
|
||||
<a-select-option v-for="ciType in ciTypeList" :key="ciType.name" :value="ciType.id">{{ ciType.alias }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-item>
|
||||
<a-button
|
||||
style="margin-left: 20px"
|
||||
:disabled="downLoadButtonDis"
|
||||
@click="downLoadExcel"
|
||||
>下载模板</a-button>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
<a-divider />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCITypes } from '@/api/cmdb/CIType'
|
||||
import { getCITypeAttributesById } from '@/api/cmdb/CITypeAttr'
|
||||
import { writeExcel } from '@/api/cmdb/batch'
|
||||
|
||||
export default {
|
||||
name: 'CiTypeChoice',
|
||||
data () {
|
||||
return {
|
||||
labelCol: { lg: { span: 5 }, sm: { span: 5 } },
|
||||
wrapperCol: { lg: { span: 19 }, sm: { span: 19 } },
|
||||
form: this.$form.createForm(this),
|
||||
ciTypeList: [],
|
||||
ciTypeName: '',
|
||||
downLoadButtonDis: true,
|
||||
selectNum: 0,
|
||||
selectCiTypeAttrList: []
|
||||
}
|
||||
},
|
||||
created: function () {
|
||||
getCITypes().then(res => {
|
||||
this.ciTypeList = res.ci_types
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
selectCiType (el) {
|
||||
// 当选择好模板类型时的回调函数
|
||||
this.downLoadButtonDis = false
|
||||
this.selectNum = el
|
||||
getCITypeAttributesById(el).then(res => {
|
||||
this.$emit('getCiTypeAttr', res)
|
||||
this.selectCiTypeAttrList = res
|
||||
})
|
||||
|
||||
this.ciTypeList.forEach(item => {
|
||||
if (this.selectNum === item.id) {
|
||||
this.ciTypeName = item.alias || item.name
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
downLoadExcel () {
|
||||
const columns = []
|
||||
this.selectCiTypeAttrList.attributes.forEach(item => {
|
||||
columns.push(item.alias)
|
||||
})
|
||||
const excel = writeExcel(columns, this.ciTypeName)
|
||||
const tempLink = document.createElement('a')
|
||||
tempLink.download = this.ciTypeName + '.xls'
|
||||
tempLink.style.display = 'none'
|
||||
const blob = new Blob([excel])
|
||||
tempLink.href = URL.createObjectURL(blob)
|
||||
document.body.appendChild(tempLink)
|
||||
tempLink.click()
|
||||
document.body.removeChild(tempLink)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.step-form-style-desc {
|
||||
padding: 0 56px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
h3 {
|
||||
margin: 0 0 12px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
}
|
||||
h4 {
|
||||
margin: 0 0 4px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 12px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<template>
|
||||
<div>
|
||||
<a-form :form="form" style="max-width: 500px; margin: 40px auto 0;">
|
||||
<a-upload-dragger ref="upload" :multiple="true" :customRequest="customRequest" accept=".xls">
|
||||
<p class="ant-upload-drag-icon">
|
||||
<a-icon type="inbox" />
|
||||
</p>
|
||||
<p class="ant-upload-text">点击或拖拽文件至此上传！</p>
|
||||
<p class="ant-upload-hint">支持文件类型：xls</p>
|
||||
</a-upload-dragger>
|
||||
</a-form>
|
||||
<a-divider>or</a-divider>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { processFile } from '@/api/cmdb/batch'
|
||||
|
||||
export default {
|
||||
name: 'Step2',
|
||||
data () {
|
||||
return {
|
||||
labelCol: { lg: { span: 5 }, sm: { span: 5 } },
|
||||
wrapperCol: { lg: { span: 19 }, sm: { span: 19 } },
|
||||
form: this.$form.createForm(this),
|
||||
loading: false,
|
||||
timer: 0,
|
||||
ciItemNum: 0,
|
||||
dataList: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
customRequest (data) {
|
||||
processFile(data.file).then(res => {
|
||||
this.ciItemNum = res.length - 1
|
||||
document.getElementById('upload-button').disabled = false
|
||||
this.dataList = res
|
||||
})
|
||||
},
|
||||
|
||||
handleChange (info) {
|
||||
document.getElementById('load-button').disabled = false
|
||||
console.log(info)
|
||||
},
|
||||
clear () {
|
||||
console.log(this.$refs.upload.$children[0].onSuccess('', ''))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.stepFormText {
|
||||
margin-bottom: 24px;
|
||||
.ant-form-item-label,
|
||||
.ant-form-item-control {
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<template>
|
||||
<div>
|
||||
<h4>共 <span style="color: blue">{{ total }}</span> 条,已完成 <span style="color: lightgreen">{{ complete }}</span> 条
|
||||
,失败 <span style="color: red">{{ errorNum }} </span>条</h4>
|
||||
|
||||
<a-progress :percent="mPercent"/>
|
||||
<div class="my-box">
|
||||
<span>错误信息：</span>
|
||||
<ol>
|
||||
<li :key="item" v-for="item in errorItems">{{ item }}</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uploadData } from '@/api/cmdb/batch'
|
||||
|
||||
export default {
|
||||
name: 'Result',
|
||||
props: {
|
||||
upLoadData: {
|
||||
required: true,
|
||||
type: Array
|
||||
},
|
||||
ciType: {
|
||||
required: true,
|
||||
type: Number
|
||||
},
|
||||
uniqueField: {
|
||||
required: true,
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
total: 0,
|
||||
complete: 0,
|
||||
errorNum: 0,
|
||||
errorItems: []
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
document.getElementById('upload-button').disabled = true
|
||||
this.upload2Server()
|
||||
},
|
||||
computed: {
|
||||
mpercent () {
|
||||
return Math.round(this.complete / this.total * 10000) / 100
|
||||
},
|
||||
progressStatus () {
|
||||
if (this.complete === this.total) {
|
||||
return null
|
||||
} else {
|
||||
return 'active'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
upload2Server () {
|
||||
this.total = this.$props.upLoadData.length - 1
|
||||
for (let i = 0; i < this.total; i++) {
|
||||
const item = {}
|
||||
let itemUniqueName = 'unknown'
|
||||
for (let j = 0; j < this.$props.upLoadData[0].length; j++) {
|
||||
item[this.$props.upLoadData[0][j]] = this.$props.upLoadData[i + 1][j]
|
||||
if (this.$props.upLoadData[0][j] === this.$props.uniqueField) {
|
||||
itemUniqueName = this.$props.upLoadData[i + 1][j] || 'unknown'
|
||||
}
|
||||
}
|
||||
uploadData(this.$props.ciType, item).then(res => {
|
||||
console.log(res)
|
||||
}).catch(err => {
|
||||
this.errorNum += 1
|
||||
console.log(err)
|
||||
this.errorItems.push(itemUniqueName + ': ' + (((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'))
|
||||
})
|
||||
this.complete += 1
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
.my-box {
|
||||
margin-top: 20px;
|
||||
color: red;
|
||||
border: 1px red dashed;
|
||||
padding: 8px;
|
||||
border-radius:5px;
|
||||
height: 429px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue