效果图效果图
由于涉及企业敏感信息，信息进行了打码，还请多多包涵。。。
点击左侧菜单树，右侧加载不同table，并且绑定列名不同(说明：前两列企业名称和城市名称固定不变)
技术思路
左侧菜单为标识，控制表单页面的布局和模块显示，字段显示隐藏，可根据下面2附图加深理解，由于信息敏感问题，暂时不提供表结构和数据，如有需要，请邮件652769324@qq.com联系博主
commonForm.vue
vue代码
<template>
<div class="bgwhite" ref="bgwhite">
<div class="headerText"><a-icon type="unordered-list"></a-icon> {{ directoryName }}</div>
<a-divider />
<div class="top">
<div class="search_item" v-if="postParams.isExistsenp === 1">
<label class="searchLable">城市名称：</label>
<a-tree-select
style="width: 183px"
v-model="searchParams.regionCode"
:replace-fields="parentReplaceFields"
:tree-data="treeData"
:dropdown-style="{ maxHeight: '800px', overflow: 'auto' }"
placeholder="请选择城市"
>
</a-tree-select>
</div>
<div class="search_item" v-if="postParams.isExistsenp === 1">
<label class="searchLable">企业名称：</label>
<a-input type="text" v-model="searchParams.enpName" placeholder="请输入企业名称" />
</div>
<div class="search_item" v-for="(field, index) in dynamicSearchForm" :key="index">
<label class="searchLable">{{ field.itemDesc }}： </label>
<template v-if="field.htmlType === 'input'">
<a-date-picker
v-if="field.itemDatatype === 'date-year'"
mode="year"
format="YYYY"
allowClear
v-model="searchParams[`${field.uriItem}Date`]"
:placeholder="`请选择${field.itemDesc}`"
style="width: 100%"
:open="yearPicker"
:disabledDate="disabledYearDate"
@openChange="openYearChange"
@panelChange="(date) => panelYearChange(date, field.uriItem)"
/>
<a-month-picker
v-else-if="field.itemDatatype === 'date-month'"
mode="month"
format="YYYY-MM"
allowClear
v-model="searchParams[`${field.uriItem}Date`]"
:placeholder="`请选择${field.itemDesc}`"
style="width: 100%"
@change="(_, dateStr) => handleDateChange(dateStr, field.uriItem)"
/>
<a-date-picker
v-else-if="field.itemDatatype === 'date-day'"
mode="date"
format="YYYY-MM-DD"
allowClear
v-model="searchParams[`${field.uriItem}Date`]"
:placeholder="`请选择${field.itemDesc}`"
style="width: 100%"
@change="(_, dateStr) => handleDateChange(dateStr, field.uriItem)"
/>
<a-date-picker
v-else-if="field.itemDatatype === 'date-hour'"
format="YYYY-MM-DD HH"
allowClear
mode="time"
v-model="searchParams[`${field.uriItem}Date`]"
:placeholder="`请选择${field.itemDesc}`"
style="width: 100%"
@change="(_, dateStr) => handleDateChange(dateStr, field.uriItem)"
/>
<a-date-picker
v-else-if="field.itemDatatype === 'date-minute'"
mode="time"
format="YYYY-MM-DD HH:mm"
allowClear
v-model="searchParams[`${field.uriItem}Date`]"
:placeholder="`请选择${field.itemDesc}`"
style="width: 100%"
@change="(_, dateStr) => handleDateChange(dateStr, field.uriItem)"
/>
<a-date-picker
v-else-if="field.itemDatatype === 'date-second'"
mode="time"
format="YYYY-MM-DD HH:mm:ss"
allowClear
v-model="searchParams[`${field.uriItem}Date`]"
:placeholder="`请选择${field.itemDesc}`"
style="width: 100%"
@change="(_, dateStr) => handleDateChange(dateStr, field.uriItem)"
/>
<a-input-number
v-model="searchParams[field.uriItem]"
:placeholder="`请选择${field.itemDesc}`"
v-else-if="field.itemDatatype === 'number'"
></a-input-number>
<a-input v-model="searchParams[field.uriItem]" :placeholder="`请选择${field.itemDesc}`" v-else></a-input>
</template>
<template v-else-if="field.htmlType === 'textarea'">
<a-textarea v-model="searchParams[field.uriItem]" :placeholder="`请输入${field.itemDesc}`" />
</template>
<template v-else-if="field.htmlType === 'select'">
<a-select
v-model="searchParams[field.uriItem]"
:placeholder="`请选择${field.itemDesc}`"
style="width: 183px"
:dropdown-style="{ maxHeight: '240px', overflow: 'auto' }"
>
<a-select-option v-for="(item, zindex) in field.options" :key="zindex" :value="item.value">{{
item.name
}}</a-select-option>
</a-select>
</template>
<template v-else-if="field.htmlType === 'radio'">
<a-radio-group v-model="searchParams[field.uriItem]">
<a-radio v-for="(item, rindex) in ZMD_YN" :key="rindex" :value="item.value">
{{ item.name }}
</a-radio>
</a-radio-group>
</template>
</div>
<div class="search_item">
<a-button type="primary" v-action:query @click="handleSearch">查询</a-button>
<a-button type="primary" v-action:query @click="handleExport">导出</a-button>
</div>
</div>
<div class="mid">
<div class="mid_header">
<div class="mid_header_item">
<a-button type="primary" v-action:add @click="handleAdd">新增</a-button>
<a-button type="primary" v-action:edit @click="handleEdit">编辑</a-button>
<a-button type="primary"
v-action:relation
@click="handleRelation"
v-if="postParams.isExistsenp === 1"
>智能关联企业</a-button
>
<a-button type="primary" v-action:import @click="handleImport">批量入库</a-button>
<a-button type="primary" v-action:back @click="handleBack">批量置回</a-button>
<a-button type="primary" v-action:del @click="handleDel">批量删除</a-button>
</div>
</div>
<a-table
id="apptable"
row-key="ids"
:columns="columns"
:data-source="data"
:bordered="true"
:pagination="pagination"
:row-selection="rowSelection"
:loading="isLoading"
:scroll="{ x: 1100, y: tableH }"
@change="TableChange"
>
<span slot="serial" slot-scope="text, record, index">
{{ index + 1 }}
</span>
<span slot="enpName" slot-scope="text, record">
<a @click="OpenDetailInfo(record.ids)">{{ text }} </a>
</span>
<span slot="operation" slot-scope="text, record">
<a @click="openModal(record.ids, record.enpName)"> 选择 </a><span>{{ record.relationEnpName }}</span>
</span>
</a-table>
<a-modal
:width="1080"
centered
v-drag-modal
v-model="visible"
:title="modalTitle"
:destroyOnClose="true"
@ok="handleOk"
:footer="showFooter === true ? null : undefined"
>
<infoModal
ref="childModal"
:modalTitle="modalTitle"
:form="form"
:contentId="id"
:postParams="postParams"
:infoId="keyWord"
:selectedId="selectedId"
/>
</a-modal>
<a-modal
width="70%"
centered
v-drag-modal
v-model="tableVisible"
:title="tableModalTitle"
:destroyOnClose="true"
@ok="handletableOk"
:footer="showFooter === true ? null : undefined"
>
<tableForm
ref="childTableModal"
:tableModalTitle="tableModalTitle"
:form="form"
:contentId="id"
:postParams="postParams"
:infoId="keyWord"
:selectedId="selectedId"
/>
</a-modal>
<a-modal
:width="900"
centered
v-drag-modal
v-model="relationVisible"
title="智能关联企业"
:destroyOnClose="true"
@ok="handleRelationOk"
>
<RelationModal ref="childRelationModal" :infoId="keyWord" />
</a-modal>
<a-modal
:width="900"
centered
v-drag-modal
v-model="relationInfoVisible"
title="选择关联企业"
:destroyOnClose="true"
><RelationInfoModal
ref="childRelationInfoModal"
:infoId="keyWord"
:selectedId="selectedId"
:selectedEnpName="selectedEnpName"
/>
<template #footer>
<a-button @click="handleCancel">取消</a-button>
<a-button type="primary" @click="handleRelationInfoOk(1)">确定关联</a-button>
<a-button type="primary" @click="handleRelationInfoOk(0)">取消关联</a-button>
</template>
</a-modal>
</div>
</div>
</template>JS部分
<script>
import {
selectResourceIdentifier,
selectResourceField,
queryCommonDataById,
deleteData,
queryCommonData,
addData,
updateData,
batchEnterCommonData,
batchPutBackCommonData,
saveRelateEnterprise,
getRegionTreeData,
exportData,
deleteRelateEnterprise,
batchSave,
batchUpdate
} from '@/dataCenter/commonConfig/infomationManage-api'
import moment from 'moment'
import { exportTableHead } from '@/assets/js/common'
const columns = [
{
title: '序号',
align: 'center',
scopedSlots: { customRender: 'serial' },
width: 50,
checked: true,
fixed: 'left'
}
]
const cols = [
{
title: '企业名称',
align: 'left',
dataIndex: 'enpName',
scopedSlots: { customRender: 'enpName' },
width: 220,
checked: true,
fixed: 'left'
},
{
title: '城市名称',
align: 'center',
dataIndex: 'regionName',
width: 150,
checked: true,
fixed: 'left'
}
]
const statusMap = {
0: {
color: 'red',
text: '否'
},
1: {
color: 'green',
text: '是'
}
}
export default {
components: {
infoModal: () => import('@/dataCenter/commonConfig/infomationManageModal'),
RelationModal: () => import('@/dataCenter/commonConfig/relationEnpModal'),
RelationInfoModal: () => import('@/dataCenter/commonConfig/relationEnpInfoModal'),
tableForm: () => import('@/dataCenter/commonConfig/tableForm')
},
props: {
keyWord: {
type: String,
default: null
},
directoryName: {
type: String,
default: null
}
},
data () {
return {
columns,
parentReplaceFields: {
title: 'regionName',
value: 'regionCode'
},
searchParams: {
regionCode: this.$store.getters.getLngAndLat.regionCode,
enpName: ''
},
dynamicSearchForm: [],
postParams: {
isExistsenp: 0,
isExistFile: 0,
colLayout: ''
},
treeData: [],
modalTitle: '',
visible: false,
relationInfoVisible: false,
relationVisible: false,
tableModalTitle: '',
tableVisible: false,
isLoading: false,
selectedId: '',
id: '',
tablename: '',
selectedEnpName: '',
selectedRowsArr: [], // 弹窗选中行
selectedRowKeys: [],
pagination: {
current: 1,
pageSize: 15,
total: 0,
showTotal: (total, range) => `${range[0]}-${range[1]} 共 ${total} 条`
},
data: [],
form: {
ids: '',
keyWord: '',
uniCode: '',
enpName: '',
regionCode: this.$store.getters.getLngAndLat.regionCode,
regionName: this.$store.getters.getLngAndLat.regionName,
remark: null,
status: 1,
oldIds: null
},
yearPicker: false,
showFooter: false,
tableH: 500,
hasChild: false
}
},
computed: {
rowSelection () {
const { selectedRowKeys } = this
return {
columnWidth: 40,
selectedRowKeys,
onChange: this.onSelectChange
}
}
},
filters: {
statusFilter (type) {
return statusMap[type].text
},
statusColorFilter (type) {
return statusMap[type].color
}
},
watch: {
keyWord (a) {
this.getIdByUriId()
this.getRegionTreeData()
}
},
mounted () {
this.getIdByUriId()
this.getRegionTreeData()
},
methods: {
resize () {
const bgwhite = this.$refs.bgwhite.clientHeight
const top = this.$refs.bgwhite.querySelector('.top').clientHeight
this.tableH = bgwhite - top - 200
},
getIdByUriId () {
this.isLoading = true
const params = {
pageNum: this.pagination.current,
pageSize: this.pagination.pageSize,
uriId: this.keyWord
}
selectResourceIdentifier(params)
.then((res) => {
if (res.result.list.length > 0) {
this.id = res.result.list[0].id
this.postParams.isExistsenp = res.result.list[0].isExistsenp
this.postParams.isExistFile = res.result.list[0].isExistsfile
this.postParams.colLayout = res.result.list[0].colLayout
this.tablename = res.result.list[0].useTable
if (res.result.list[0].childcount > 0) {
this.hasChild = true
} else { this.hasChild = false }
this.getQueryConditions(this.id)
this.getListColumns(this.id)
}
})
.catch((err) => console.log(err))
},
getRegionTreeData () {
getRegionTreeData()
.then((res) => {
this.treeData = res.result
})
.catch((err) => console.log(err))
},
getQueryConditions (id) {
this.dynamicSearchForm = {}
this.searchParams = {
regionCode: this.$store.getters.getLngAndLat.regionCode,
enpName: ''
}
const params = {
pageNum: 0,
isQuery: 1,
uriId: id
}
selectResourceField(params)
.then((res) => {
this.dynamicSearchForm = res.result.list
this.dynamicSearchForm.forEach((el, index) => {
if (el.htmlType === 'select') {
const selectAttr = []
var names = el.itemNames.split('|')
var codes = el.itemCodes.split('|')
names.forEach((val, index) => {
selectAttr.push({
name: val,
value: codes[index]
})
})
el.options = selectAttr
}
if (el.itemDatatype.includes('date-')) {
// this.$set(this.searchParams, el.uriItem, moment().format(this.dealFormat(el.itemDatatype)))
// this.$set(this.searchParams, `${el.uriItem}Date`, moment())
this.$set(this.searchParams, el.uriItem, '')
this.$set(this.searchParams, `${el.uriItem}Date`, null)
}
})
setTimeout(() => {
this.resize()
}, 200)
})
.catch((err) => console.log(err))
},
dealFormat (type) {
switch (type) {
case 'date-year':
return 'YYYY'
case 'date-month':
return 'YYYY-MM'
case 'date-day':
return 'YYYY-MM-DD'
case 'date-hour':
return 'YYYY-MM-DD HH'
case 'date-minute':
return 'YYYY-MM-DD HH:mm'
case 'date-second':
return 'YYYY-MM-DD HH:mm:ss'
}
},
handleDateChange (dateStr, uriItem) {
this.$set(this.searchParams, uriItem, dateStr)
},
getListColumns (id) {
this.selectedRowKeys = []
this.selectedRowsArr = []
const params = {
pageNum: this.pagination.current,
pageSize: this.pagination.pageSize,
keyWord: this.keyWord,
...this.searchParams
}
queryCommonData(params).then((res) => {
if (res.result !== null) {
this.data = res.result.records
this.pagination.total = res.result.total
this.isLoading = false
}
})
selectResourceField({ pageNum: 0, isShow: 1, uriId: id })
.then((res) => {
this.columns = [...columns]
if (this.postParams.isExistsenp === 1) {
this.columns = this.columns.concat(cols)
}
res.result.list.forEach((el) => {
let textAlign = 'center'
if (el.textAlign === '2') {
textAlign = 'right'
} else if (el.textAlign === '3') {
textAlign = 'left'
}
if (el.itemDesc.includes('是否')) {
this.columns.push({
title: el.itemDesc,
customRender: (i, row) => {
return (
<a-tag color={row[el.uriItem] === '1' ? 'green' : 'red'}>
{row[el.uriItem] === '1' ? '是' : '否'}
</a-tag>
)
},
align: 'center',
width: 150,
checked: true
})
} else {
this.columns.push({
title: el.itemDesc,
dataIndex: el.uriItem,
align: textAlign,
width: el.itemDesc.length > 10 ? 260 : 200,
ellipsis: true,
customRender: (text, row) => {
return (
<a-tooltip placement="topLeft" title={text}>
{text}
</a-tooltip>
)
},
checked: true
})
}
})
if (this.postParams.isExistsenp === 1) {
this.columns.push({
title: '关联的企业名称',
align: 'left',
scopedSlots: { customRender: 'operation' },
width: 200,
checked: true,
fixed: 'right'
})
}
})
.catch((err) => console.log(err))
},
onSelectChange (selectedRowKeys, selectedRows) {
this.selectedRowKeys = selectedRowKeys
this.selectedRowsArr = selectedRows
},
// 年
openYearChange (status) {
this.yearPicker = status
},
panelYearChange (value, uriItem) {
this.$set(this.searchParams, uriItem, value.format('YYYY'))
this.$set(this.searchParams, `${uriItem}Date`, value)
this.yearPicker = !this.yearPicker
},
disabledYearDate (current) {
return current && current > moment().endOf('year')
},
// 分页改变
TableChange (e) {
this.pagination.current = e.current
this.getListColumns(this.id)
},
// 查询
handleSearch () {
this.pagination.current = 1
this.getListColumns(this.id)
},
handletableOk () {
if (this.tableModalTitle === '新增') {
this.$refs.childTableModal.$refs.ruleForm.validate((valid) => {
if (valid) {
this.form.tenantId = this.$store.getters.getTenantId
this.form.keyWord = this.keyWord
this.form.childMap = this.$refs.childTableModal.childMap
delete this.form.dcreate
batchSave(this.form).then((res) => {
if (res.code === 200) {
this.$message.success('保存成功！')
this.tableVisible = false
this.getListColumns(this.id)
} else {
this.$message.error(res.msg)
}
})
} else {
return false
}
})
} else {
this.$refs.childTableModal.$refs.ruleForm.validate((valid) => {
if (valid) {
this.form.tenantId = this.$store.getters.getTenantId
this.form.childMap = this.$refs.childTableModal.childMap
this.form.childMap.forEach(item => {
console.log()
delete item.dcreate
})
delete this.form.dcreate
batchUpdate(this.form).then((res) => {
if (res.code === 200) {
this.$message.success('保存成功！')
this.tableVisible = false
this.getListColumns(this.id)
} else {
this.$message.error(res.msg)
}
})
} else {
return false
}
})
}
},
// 新增保存
handleOk () {
if (this.modalTitle === '新增') {
this.$refs.childModal.$refs.ruleForm.validate((valid) => {
if (valid) {
this.form.tenantId = this.$store.getters.getTenantId
this.form.keyWord = this.keyWord
addData(this.form).then((res) => {
if (res.code === 200) {
this.$message.success('保存成功！')
this.visible = false
this.getListColumns(this.id)
} else {
this.$message.error(res.msg)
}
})
} else {
return false
}
})
} else {
this.$refs.childModal.$refs.ruleForm.validate((valid) => {
if (valid) {
this.form.tenantId = this.$store.getters.getTenantId
console.log(this.form)
updateData(this.form).then((res) => {
if (res.code === 200) {
this.$message.success('保存成功！')
this.visible = false
this.getListColumns(this.id)
} else {
this.$message.error(res.msg)
}
})
} else {
return false
}
})
}
},
openModal (ids, enpName) {
this.relationInfoVisible = true
this.selectedId = ids
this.selectedEnpName = enpName
},
handleCancel () {
this.relationInfoVisible = false
},
handleRelationOk () {
const enpRelationList = []
const childData = this.$refs.childRelationModal.data
childData.forEach((el) => {
const params = {
id: '',
datatableName: this.tablename,
datatableId: el.ids,
marked: this.keyWord
}
el.baseInfoList.forEach((element) => {
params.enpcode = element.enpCode
params.credit_code = element.creditCode
})
enpRelationList.push(params)
})
saveRelateEnterprise(enpRelationList).then((res) => {
if (res.code === 200) {
this.$message.success('智能关联成功！')
this.relationVisible = false
} else {
this.$message.error(res.msg)
}
})
},
handleRelationInfoOk (status) {
const _that = this
const enpRelationList = []
if (_that.$refs.childRelationInfoModal.selectedRowsArr.length === 1) {
this.$confirm({
title: status === 1 ? '确定要关联吗？' : '确定要取消关联吗？',
onOk () {
const childData = _that.$refs.childRelationInfoModal.selectedRowsArr[0]
const params = {
id: '',
datatableName: _that.tablename,
datatableId: _that.selectedId,
marked: _that.keyWord,
enpCode: childData.enpCode,
creditCode: childData.creditCode
}
enpRelationList.push(params)
if (status === 1) {
saveRelateEnterprise(enpRelationList).then((res) => {
if (res.code === 200) {
_that.$message.success('关联成功！')
_that.getListColumns(_that.id)
_that.relationInfoVisible = false
} else {
_that.$message.error(res.msg)
}
})
} else if (status === 0) {
deleteRelateEnterprise({ ids: _that.selectedId, datatableName: _that.tablename }).then((res) => {
if (res.code === 200) {
_that.$message.success('取消关联成功！')
_that.getListColumns(_that.id)
_that.relationInfoVisible = false
} else {
_that.$message.error(res.msg)
}
})
}
}
})
} else {
this.$message.warning('请选择一条记录' + (status === 1 ? '关联' : '取消关联'))
return false
}
},
// 新增
handleAdd () {
this.showFooter = false
this.form = {
ids: '',
keyWord: '',
uniCode: '',
enpName: '',
regionCode: this.$store.getters.getLngAndLat.regionCode,
regionName: this.$store.getters.getLngAndLat.regionName,
remark: null,
status: 1,
oldIds: null
}
if (!this.hasChild) {
this.modalTitle = '新增'
this.visible = true
} else {
this.tableModalTitle = '新增'
this.tableVisible = true
}
},
OpenDetailInfo (ids) {
this.showFooter = true
if (!this.hasChild) {
this.modalTitle = '查看'
this.visible = true
} else {
this.tableModalTitle = '查看'
this.tableVisible = true
}
queryCommonDataById(ids, { keyWord: this.keyWord })
.then((res) => {
for (const item in res.result) {
this.$set(this.form, item, res.result[item])
}
})
.catch((err) => console.log(err))
this.form.ids = ids
this.selectedId = ids
},
// 编辑
handleEdit () {
if (this.selectedRowsArr.length === 1) {
if (!this.hasChild) {
this.modalTitle = '编辑'
this.visible = true
} else {
this.tableModalTitle = '编辑'
this.tableVisible = true
}
this.selectedId = this.selectedRowsArr[0].ids
this.form.ids = this.selectedRowsArr[0].ids
queryCommonDataById(this.selectedRowsArr[0].ids, { keyWord: this.keyWord }).then((res) => {
for (const item in res.result) {
this.$set(this.form, item, res.result[item])
}
this.showFooter = false
})
} else {
this.$message.warning('请选择一条数据！')
return false
}
},
// 删除
handleDel () {
if (this.selectedRowsArr.length >= 1) {
const _that = this
this.$confirm({
title: '确定要删除吗？',
onOk () {
let ids = ''
_that.selectedRowsArr.forEach((item) => {
ids += item.ids + ','
})
ids = ids.substring(0, ids.length - 1)
deleteData({ enpDataIds: ids, keyWord: _that.keyWord }).then((res) => {
if (res.code === 200) {
_that.$message.success('删除成功！')
_that.getListColumns(_that.id)
} else {
_that.$message.error(res.msg)
}
})
}
})
} else {
this.$message.warning('请至少选择一条数据！')
}
},
handleRelation () {
this.relationVisible = true
},
saveRelateEnterprise () {
if (this.selectedRowsArr.length >= 1) {
const _that = this
this.$confirm({
title: '确定要关联吗？',
onOk () {
const enpRelationList = []
_that.enpselectedRowsArr.forEach((item) => {
enpRelationList.push({
id: item.id,
datatableName: item.datatableName,
datatableId: item.datatableId,
marked: _that.keyWord,
enpCode: item.enpCode,
credit_code: item.credit_code
})
})
saveRelateEnterprise({ enpRelationList: enpRelationList }).then((res) => {
if (res.code === 200) {
_that.$message.success('关联成功！')
} else {
_that.$message.error(res.msg)
}
})
}
})
} else {
this.$message.warning('请至少选择一条数据！')
}
},
handleBack () {
if (this.selectedRowsArr.length >= 1) {
const _that = this
this.$confirm({
title: '确定要批量置回吗？',
onOk () {
let ids = ''
_that.selectedRowsArr.forEach((item) => {
ids += item.ids + ','
})
ids = ids.substring(0, ids.length - 1)
batchPutBackCommonData({ enpDataIds: ids, keyWord: _that.keyWord }).then((res) => {
if (res.code === 200) {
_that.$message.success('置回成功！')
} else {
_that.$message.error(res.msg)
}
})
}
})
} else {
this.$message.warning('请至少选择一条数据！')
}
},
handleExport () {
let columnNames = exportTableHead('apptable')
if (this.postParams.isExistsenp === 1) {
columnNames = [...columnNames[1].slice(2), ...columnNames[0].slice(4, columnNames[0].length - 1)]
} else if (this.postParams.isExistsenp === 0) {
columnNames = columnNames[0].slice(2)
}
console.log(columnNames)
exportData({
keyWord: this.keyWord,
columnCodes: columnNames.map((el) => el.value).join(','),
columnNames: columnNames.map((el) => el.name).join(',')
})
.then((response) => {
if (response) {
const dateStr = moment(new Date()).format('YYYYMMDDHHmmss')
const aLink = document.createElement('a')
const blob = new Blob([response], { type: 'application/vnd.ms-excel' })
aLink.href = window.URL.createObjectURL(blob)
aLink.setAttribute('download', `资源信息管理_${dateStr}.xlsx`)
aLink.click()
window.URL.revokeObjectURL(blob)
} else {
this.$message.error('导出失败！')
}
})
.catch((error) => {
console.log(error)
this.$message.error('导出失败！')
})
},
handleImport () {
if (this.selectedRowsArr.length >= 1) {
const _that = this
this.$confirm({
title: '确定要批量录入吗？',
onOk () {
let ids = ''
_that.selectedRowsArr.forEach((item) => {
ids += item.ids + ','
})
ids = ids.substring(0, ids.length - 1)
batchEnterCommonData({ enpDataIds: ids, keyWord: _that.keyWord }).then((res) => {
if (res.code === 200) {
_that.$message.success('录入成功！')
} else {
_that.$message.error(res.msg)
}
})
}
})
} else {
this.$message.warning('请至少选择一条数据！')
}
}
}
}
</script>CSS部分
<style lang="less" scoped>
.layout {
height: 100%;
padding: 0;
::v-deep .ant-row {
height: 100%;
.gutter-row {
height: 100%;
}
}
.bgwhite {
height: 100%;
background: #fff;
overflow: hidden;
.treeBox {
padding: 15px;
height: calc(100% - 46px);
overflow-y: auto;
}
.headerText {
line-height: 46px;
padding: 0 20px;
font-weight: 600;
font-size: 15px;
}
::v-deep .ant-divider-horizontal {
margin: 0;
}
::v-deep .ant-select {
width: 100%;
}
}
.top {
padding: 15px 20px 5px;
margin-bottom: -5px;
}
.mid {
padding: 10px 20px 20px;
.mid_header {
::v-deep .ant-btn {
margin-right: 0;
}
.ant-btn {
margin-right: 8px;
}
}
}
// 树
::v-deep .ant-tree {
li {
padding: 1px 0;
}
.ant-tree-node-content-wrapper {
width: calc(100% - 24px);
height: 32px;
line-height: 32px;
}
span.ant-tree-switcher,
span.ant-tree-iconEle {
height: 32px;
line-height: 32px;
}
}
}
::v-deep .ant-modal-body {
max-height: 520px;
overflow-y: auto;
}
</style>