|
|
@ -1,28 +1,24 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div v-if="list.length > 0" class="diy-container"> |
|
|
<div v-if="list.length > 0" |
|
|
|
|
|
class="diy-container"> |
|
|
<el-tabs v-model="activeName"> |
|
|
<el-tabs v-model="activeName"> |
|
|
<el-tab-pane label="自定义模板" name="first"> |
|
|
<el-tab-pane label="自定义模板" |
|
|
|
|
|
name="first"> |
|
|
<div class="diy-wr"> |
|
|
<div class="diy-wr"> |
|
|
<div class="left"> |
|
|
<div class="left"> |
|
|
<el-tabs |
|
|
<el-tabs v-model="leftActive" |
|
|
v-model="leftActive" |
|
|
|
|
|
tab-position="left" |
|
|
tab-position="left" |
|
|
class="left-h" |
|
|
class="left-h" |
|
|
@tab-click="handleTabsClick" |
|
|
@tab-click="handleTabsClick"> |
|
|
> |
|
|
<el-tab-pane v-for="item in leftList" |
|
|
<el-tab-pane |
|
|
|
|
|
v-for="item in leftList" |
|
|
|
|
|
:key="item.id" |
|
|
:key="item.id" |
|
|
:label="item.label" |
|
|
:label="item.label" |
|
|
:name="item.id" |
|
|
:name="item.id"> |
|
|
> |
|
|
|
|
|
<div class="pd10 check-boxwr scroll-h"> |
|
|
<div class="pd10 check-boxwr scroll-h"> |
|
|
<checkBox |
|
|
<checkBox v-if="item.queryItemList.length > 0" |
|
|
v-if="item.queryItemList.length > 0" |
|
|
|
|
|
:ref="'checkbox' + item.id" |
|
|
:ref="'checkbox' + item.id" |
|
|
:list="item.queryItemList" |
|
|
:list="item.queryItemList" |
|
|
@change="handleChangeBox" |
|
|
@change="handleChangeBox" /> |
|
|
/> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</el-tab-pane> |
|
|
</el-tab-pane> |
|
|
</el-tabs> |
|
|
</el-tabs> |
|
|
@ -30,155 +26,116 @@ |
|
|
<div class="right"> |
|
|
<div class="right"> |
|
|
<div class="right-header"> |
|
|
<div class="right-header"> |
|
|
<div class="title">导出信息</div> |
|
|
<div class="title">导出信息</div> |
|
|
<el-button plain @click="handlePreview('')" |
|
|
<el-button plain |
|
|
>预览</el-button |
|
|
@click="handlePreview('')">预览</el-button> |
|
|
> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<div class="h80 scroll-h"> |
|
|
<div class="h80 scroll-h"> |
|
|
<el-collapse |
|
|
<el-collapse v-model="activeCollapse" |
|
|
v-model="activeCollapse" |
|
|
id="collapsWr"> |
|
|
id="collapsWr" |
|
|
<el-collapse-item v-for="item in rightList" |
|
|
> |
|
|
|
|
|
<el-collapse-item |
|
|
|
|
|
v-for="item in rightList" |
|
|
|
|
|
:key="item.id" |
|
|
:key="item.id" |
|
|
:title="item.label" |
|
|
:title="item.label" |
|
|
:name="item.id" |
|
|
:name="item.id" |
|
|
class="col-h" |
|
|
class="col-h"> |
|
|
> |
|
|
<dragItem :ref="'drag' + item.id" |
|
|
<dragItem |
|
|
|
|
|
:ref="'drag' + item.id" |
|
|
|
|
|
:list="item.queryItemList" |
|
|
:list="item.queryItemList" |
|
|
:id="item.id" |
|
|
:id="item.id" |
|
|
@del="handleDelItem" |
|
|
@del="handleDelItem" |
|
|
@drag="handleDrag($event, item)" |
|
|
@drag="handleDrag($event, item)"></dragItem> |
|
|
></dragItem> |
|
|
|
|
|
</el-collapse-item> |
|
|
</el-collapse-item> |
|
|
</el-collapse> |
|
|
</el-collapse> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</el-tab-pane> |
|
|
</el-tab-pane> |
|
|
<el-tab-pane label="模板列表" name="second"> |
|
|
<el-tab-pane label="模板列表" |
|
|
<el-table |
|
|
name="second"> |
|
|
:data="tableData" |
|
|
<el-table :data="tableData" |
|
|
height="calc(80vh - 140px)" |
|
|
height="calc(80vh - 140px)" |
|
|
style="width: 100%" |
|
|
style="width: 100%"> |
|
|
> |
|
|
<el-table-column type="index" |
|
|
<el-table-column |
|
|
|
|
|
type="index" |
|
|
|
|
|
label="序号" |
|
|
label="序号" |
|
|
align="center" |
|
|
align="center" |
|
|
width="50" |
|
|
width="50"> |
|
|
> |
|
|
|
|
|
</el-table-column> |
|
|
</el-table-column> |
|
|
<el-table-column |
|
|
<el-table-column prop="name" |
|
|
prop="name" |
|
|
|
|
|
label="模板名称" |
|
|
label="模板名称" |
|
|
align="center" |
|
|
align="center" |
|
|
min-width="180" |
|
|
min-width="180"> |
|
|
> |
|
|
|
|
|
</el-table-column> |
|
|
</el-table-column> |
|
|
<el-table-column |
|
|
<el-table-column prop="createdBy" |
|
|
prop="createdBy" |
|
|
|
|
|
align="center" |
|
|
align="center" |
|
|
label="创建者" |
|
|
label="创建者" |
|
|
width="180" |
|
|
width="180"> |
|
|
> |
|
|
|
|
|
</el-table-column> |
|
|
</el-table-column> |
|
|
<el-table-column |
|
|
<el-table-column align="center" |
|
|
align="center" |
|
|
|
|
|
prop="createdTime" |
|
|
prop="createdTime" |
|
|
label="创建时间" |
|
|
label="创建时间" |
|
|
width="180" |
|
|
width="180"> |
|
|
> |
|
|
|
|
|
</el-table-column> |
|
|
</el-table-column> |
|
|
<el-table-column align="center" label="操作" width="160"> |
|
|
<el-table-column align="center" |
|
|
|
|
|
label="操作" |
|
|
|
|
|
width="160"> |
|
|
<template slot-scope="scope"> |
|
|
<template slot-scope="scope"> |
|
|
<el-button |
|
|
<el-button v-if="scope.row.isSelf" |
|
|
v-if="scope.row.isSelf" |
|
|
|
|
|
type="text" |
|
|
type="text" |
|
|
size="small" |
|
|
size="small" |
|
|
class="div-table-button--delete" |
|
|
class="div-table-button--delete" |
|
|
@click="handleDeltemplate(scope.row.id)" |
|
|
@click="handleDeltemplate(scope.row.id)">删除</el-button> |
|
|
>删除</el-button |
|
|
<el-button type="text" |
|
|
> |
|
|
|
|
|
<el-button |
|
|
|
|
|
type="text" |
|
|
|
|
|
size="small" |
|
|
size="small" |
|
|
class="div-table-button--detail" |
|
|
class="div-table-button--detail" |
|
|
@click="handlePreview(scope.row.id)" |
|
|
@click="handlePreview(scope.row.id)">预览</el-button> |
|
|
>预览</el-button |
|
|
<el-button type="text" |
|
|
> |
|
|
|
|
|
<el-button |
|
|
|
|
|
type="text" |
|
|
|
|
|
size="small" |
|
|
size="small" |
|
|
class="div-table-button--edit" |
|
|
class="div-table-button--edit" |
|
|
@click="handleExportTemplate(scope.row.id)" |
|
|
@click="handleExportTemplate(scope.row.id)">导出</el-button> |
|
|
>导出</el-button |
|
|
|
|
|
> |
|
|
|
|
|
</template> |
|
|
</template> |
|
|
</el-table-column> |
|
|
</el-table-column> |
|
|
</el-table> |
|
|
</el-table> |
|
|
</el-tab-pane> |
|
|
</el-tab-pane> |
|
|
</el-tabs> |
|
|
</el-tabs> |
|
|
<div v-if="activeName == 'first'" class="diy-footer"> |
|
|
<div v-if="activeName == 'first'" |
|
|
|
|
|
class="diy-footer"> |
|
|
<div class="left"> |
|
|
<div class="left"> |
|
|
<div class="flex-div"> |
|
|
<div class="flex-div"> |
|
|
<div>模板名称:</div> |
|
|
<div>模板名称:</div> |
|
|
<el-input |
|
|
<el-input v-model="form.name" |
|
|
v-model="form.name" |
|
|
|
|
|
maxlength="20" |
|
|
maxlength="20" |
|
|
class="wd200 mr10" |
|
|
class="wd200 mr10" /> |
|
|
/> |
|
|
|
|
|
<div>自定义表头:</div> |
|
|
<div>自定义表头:</div> |
|
|
<el-input |
|
|
<el-input v-model="form.title" |
|
|
v-model="form.title" |
|
|
|
|
|
maxlength="20" |
|
|
maxlength="20" |
|
|
class="wd200 mr10" |
|
|
class="wd200 mr10" /> |
|
|
/> |
|
|
<el-checkbox v-model="form.isSaveTemp">保存为常用模板</el-checkbox> |
|
|
<el-checkbox v-model="form.isSaveTemp" |
|
|
|
|
|
>保存为常用模板</el-checkbox |
|
|
|
|
|
> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<el-button |
|
|
<el-button class="diy-button--delete" |
|
|
class="diy-button--delete" |
|
|
|
|
|
:loading="exportLoading" |
|
|
:loading="exportLoading" |
|
|
@click="handleExport" |
|
|
@click="handleExport">导出</el-button> |
|
|
>导出</el-button |
|
|
|
|
|
> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<el-dialog |
|
|
<el-dialog :visible.sync="diyDialog" |
|
|
:visible.sync="diyDialog" |
|
|
|
|
|
:close-on-click-modal="false" |
|
|
:close-on-click-modal="false" |
|
|
:close-on-press-escape="false" |
|
|
:close-on-press-escape="false" |
|
|
width="1150px" |
|
|
width="1150px" |
|
|
append-to-body |
|
|
append-to-body |
|
|
top="5vh" |
|
|
top="5vh" |
|
|
class="dialog-h" |
|
|
class="dialog-h" |
|
|
@close="handleClose" |
|
|
@close="handleClose"> |
|
|
> |
|
|
|
|
|
<div style="padding: 20px"> |
|
|
<div style="padding: 20px"> |
|
|
<el-table |
|
|
<el-table :data="tableData" |
|
|
:data="tableData" |
|
|
|
|
|
height="calc(80vh - 140px)" |
|
|
height="calc(80vh - 140px)" |
|
|
style="width: 100%" |
|
|
style="width: 100%"> |
|
|
> |
|
|
<el-table-column v-for="(item, index) in previewList" |
|
|
<el-table-column |
|
|
|
|
|
v-for="(item, index) in previewList" |
|
|
|
|
|
:label="item.label" |
|
|
:label="item.label" |
|
|
:key="index" |
|
|
:key="index" |
|
|
align="center" |
|
|
align="center" |
|
|
min-width="120" |
|
|
min-width="120"> |
|
|
> |
|
|
<el-table-column v-for="(n, i) in item.children" |
|
|
<el-table-column |
|
|
|
|
|
v-for="(n, i) in item.children" |
|
|
|
|
|
:label="n.label" |
|
|
:label="n.label" |
|
|
:key="i" |
|
|
:key="i" |
|
|
align="center" |
|
|
align="center" |
|
|
min-width="120" |
|
|
min-width="120"> |
|
|
> |
|
|
|
|
|
</el-table-column> |
|
|
</el-table-column> |
|
|
</el-table-column> |
|
|
</el-table-column> |
|
|
</el-table> |
|
|
</el-table> |
|
|
@ -854,7 +811,8 @@ export default { |
|
|
display: flex; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
justify-content: space-between; |
|
|
margin-top: 10px; |
|
|
margin-top: 20px; |
|
|
|
|
|
padding-bottom: 20px; |
|
|
} |
|
|
} |
|
|
.left-h { |
|
|
.left-h { |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
|