mirror of
https://github.com/flipped-aurora/gin-vue-admin.git
synced 2026-10-03 16:53:28 +00:00
修改新版样式
This commit is contained in:
蒋吉兆
@@ -1,29 +1,32 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<el-divider content-position="left">大文件上传</el-divider>
|
||||
<form id="fromCont" method="post">
|
||||
<div class="fileUpload" @click="inputChange">
|
||||
选择文件
|
||||
<input v-show="false" id="file" ref="Input" multiple="multiple" type="file" @change="choseFile">
|
||||
</div>
|
||||
</form>
|
||||
<el-button :disabled="limitFileSize" type="primary" size="mini" class="uploadBtn" @click="getFile">上传文件</el-button>
|
||||
<div class="el-upload__tip">请上传不超过5MB的文件</div>
|
||||
<div class="list">
|
||||
<transition name="list" tag="p">
|
||||
<div v-if="file" class="list-item">
|
||||
<i class="el-icon-document" />
|
||||
<span>{{ file.name }}</span>
|
||||
<span class="percentage">{{ percentage }}%</span>
|
||||
<el-progress :show-text="false" :text-inside="false" :stroke-width="2" :percentage="percentage" />
|
||||
<div class="break-point">
|
||||
<div class="gva-table-box">
|
||||
<el-divider content-position="left">大文件上传</el-divider>
|
||||
<form id="fromCont" method="post">
|
||||
<div class="fileUpload" @click="inputChange">
|
||||
选择文件
|
||||
<input v-show="false" id="file" ref="Input" multiple="multiple" type="file" @change="choseFile">
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<!-- <span
|
||||
</form>
|
||||
<el-button :disabled="limitFileSize" type="primary" size="mini" class="uploadBtn" @click="getFile">上传文件</el-button>
|
||||
<div class="el-upload__tip">请上传不超过5MB的文件</div>
|
||||
<div class="list">
|
||||
<transition name="list" tag="p">
|
||||
<div v-if="file" class="list-item">
|
||||
<i class="el-icon-document" />
|
||||
<span>{{ file.name }}</span>
|
||||
<span class="percentage">{{ percentage }}%</span>
|
||||
<el-progress :show-text="false" :text-inside="false" :stroke-width="2" :percentage="percentage" />
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<!-- <span
|
||||
v-if="this.file"
|
||||
>{{Math.floor(((this.formDataList.length-this.waitNum)/this.formDataList.length)*100)}}%</span> -->
|
||||
<div class="tips">此版本为先行体验功能测试版，样式美化和性能优化正在进行中，上传切片文件和合成的完整文件分别再QMPlusserver目录的breakpointDir文件夹和fileDir文件夹</div>
|
||||
<div class="tips">此版本为先行体验功能测试版，样式美化和性能优化正在进行中，上传切片文件和合成的完整文件分别再QMPlusserver目录的breakpointDir文件夹和fileDir文件夹</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -35,7 +38,7 @@ import {
|
||||
removeChunk
|
||||
} from '@/api/breakpoint'
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
name: 'BreakPoint',
|
||||
data() {
|
||||
return {
|
||||
file: null,
|
||||
|
||||
@@ -1,55 +1,53 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="search-term">
|
||||
<div class="gva-table-box">
|
||||
<div class="gva-btn-list">
|
||||
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openDialog">新增</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
tooltip-effect="dark"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column label="接入日期" width="180">
|
||||
<template #default="scope">
|
||||
<span>{{ formatDate(scope.row.CreatedAt) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="姓名" prop="customerName" width="120" />
|
||||
<el-table-column label="电话" prop="customerPhoneData" width="120" />
|
||||
<el-table-column label="接入人ID" prop="sysUserId" width="120" />
|
||||
<el-table-column label="按钮组" min-width="160">
|
||||
<template #default="scope">
|
||||
<el-button size="small" type="text" @click="updateCustomer(scope.row)">变更</el-button>
|
||||
<el-popover v-model:visible="scope.row.visible" placement="top" width="160">
|
||||
<p>确定要删除吗？</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
|
||||
<el-button type="primary" size="mini" @click="deleteCustomer(scope.row)">确定</el-button>
|
||||
</div>
|
||||
<template #reference>
|
||||
<el-button type="text" icon="el-icon-delete" size="mini">删除</el-button>
|
||||
</template>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="gva-pagination">
|
||||
<el-pagination
|
||||
:current-page="page"
|
||||
:page-size="pageSize"
|
||||
:page-sizes="[10, 30, 50, 100]"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
:data="tableData"
|
||||
border
|
||||
stripe
|
||||
style="width: 100%"
|
||||
tooltip-effect="dark"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column label="接入日期" width="180">
|
||||
<template #default="scope">
|
||||
<span>{{ formatDate(scope.row.CreatedAt) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="姓名" prop="customerName" width="120" />
|
||||
<el-table-column label="电话" prop="customerPhoneData" width="120" />
|
||||
<el-table-column label="接入人ID" prop="sysUserId" width="120" />
|
||||
<el-table-column label="按钮组" min-width="160">
|
||||
<template #default="scope">
|
||||
<el-button size="small" type="text" @click="updateCustomer(scope.row)">变更</el-button>
|
||||
<el-popover v-model:visible="scope.row.visible" placement="top" width="160">
|
||||
<p>确定要删除吗？</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
|
||||
<el-button type="primary" size="mini" @click="deleteCustomer(scope.row)">确定</el-button>
|
||||
</div>
|
||||
<template #reference>
|
||||
<el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
|
||||
</template>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-pagination
|
||||
:current-page="page"
|
||||
:page-size="pageSize"
|
||||
:page-sizes="[10, 30, 50, 100]"
|
||||
:style="{float:'right',padding:'20px'}"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
/>
|
||||
|
||||
<div class="tips">在资源权限中将此角色的资源权限清空 或者不包含创建者的角色 即可屏蔽此客户资源的显示</div>
|
||||
<el-dialog v-model="dialogFormVisible" :before-close="closeDialog" title="客户">
|
||||
<el-form :inline="true" :model="form" label-width="80px">
|
||||
<el-form-item label="客户名">
|
||||
@@ -66,7 +64,6 @@
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<div class="tips">在资源权限中将此角色的资源权限清空 或者不包含创建者的角色 即可屏蔽此客户资源的显示</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,32 +1,35 @@
|
||||
<template>
|
||||
<div class="upload">
|
||||
<div class="btn-list">
|
||||
<el-upload
|
||||
class="excel-btn"
|
||||
:action="`${path}/excel/importExcel`"
|
||||
:headers="{'x-token':token}"
|
||||
:on-success="loadExcel"
|
||||
:show-file-list="false"
|
||||
>
|
||||
<el-button size="mini" type="primary" icon="el-icon-upload2">导入</el-button>
|
||||
</el-upload>
|
||||
<el-button class="excel-btn" size="mini" type="primary" icon="el-icon-download" @click="handleExcelExport('ExcelExport.xlsx')">导出</el-button>
|
||||
<el-button class="excel-btn" size="mini" type="success" icon="el-icon-download" @click="downloadExcelTemplate()">下载模板</el-button>
|
||||
</div>
|
||||
<el-table :data="tableData" border row-key="ID" stripe>
|
||||
<el-table-column label="ID" min-width="100" prop="ID" />
|
||||
<el-table-column label="路由Name" min-width="160" prop="name" />
|
||||
<el-table-column label="路由Path" min-width="160" prop="path" />
|
||||
<el-table-column label="是否隐藏" min-width="100" prop="hidden">
|
||||
<div class="gva-table-box">
|
||||
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.hidden?"隐藏":"显示" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="父节点" min-width="90" prop="parentId" />
|
||||
<el-table-column label="排序" min-width="70" prop="sort" />
|
||||
<el-table-column label="文件路径" min-width="360" prop="component" />
|
||||
</el-table>
|
||||
<div class="gva-btn-list">
|
||||
<el-upload
|
||||
class="excel-btn"
|
||||
:action="`${path}/excel/importExcel`"
|
||||
:headers="{'x-token':token}"
|
||||
:on-success="loadExcel"
|
||||
:show-file-list="false"
|
||||
>
|
||||
<el-button size="mini" type="primary" icon="el-icon-upload2">导入</el-button>
|
||||
</el-upload>
|
||||
<el-button class="excel-btn" size="mini" type="primary" icon="el-icon-download" @click="handleExcelExport('ExcelExport.xlsx')">导出</el-button>
|
||||
<el-button class="excel-btn" size="mini" type="success" icon="el-icon-download" @click="downloadExcelTemplate()">下载模板</el-button>
|
||||
</div>
|
||||
<el-table :data="tableData" row-key="ID">
|
||||
<el-table-column label="ID" min-width="100" prop="ID" />
|
||||
<el-table-column label="路由Name" min-width="160" prop="name" />
|
||||
<el-table-column label="路由Path" min-width="160" prop="path" />
|
||||
<el-table-column label="是否隐藏" min-width="100" prop="hidden">
|
||||
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.hidden?"隐藏":"显示" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="父节点" min-width="90" prop="parentId" />
|
||||
<el-table-column label="排序" min-width="70" prop="sort" />
|
||||
<el-table-column label="文件路径" min-width="360" prop="component" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -75,8 +78,9 @@ export default {
|
||||
display: flex;
|
||||
margin-bottom: 12px;
|
||||
justify-content: flex-end;
|
||||
.excel-btn+.excel-btn{
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
}
|
||||
.excel-btn+.excel-btn{
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div v-loading.fullscreen.lock="fullscreenLoading">
|
||||
<div class="upload">
|
||||
<div class="upload-box">
|
||||
<div class="gva-table-box">
|
||||
<div class="gva-btn-list">
|
||||
<el-upload
|
||||
:action="`${path}/fileUploadAndDownload/upload`"
|
||||
:before-upload="checkFile"
|
||||
@@ -22,7 +22,7 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-table :data="tableData" border stripe>
|
||||
<el-table :data="tableData">
|
||||
<el-table-column label="预览" width="100">
|
||||
<template #default="scope">
|
||||
<CustomPic pic-type="file" :pic-src="scope.row.url" />
|
||||
@@ -50,16 +50,18 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
:current-page="page"
|
||||
:page-size="pageSize"
|
||||
:page-sizes="[10, 30, 50, 100]"
|
||||
:style="{ float: 'right', padding: '20px' }"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
/>
|
||||
<div class="gva-pagination">
|
||||
<el-pagination
|
||||
:current-page="page"
|
||||
:page-size="pageSize"
|
||||
:page-sizes="[10, 30, 50, 100]"
|
||||
:style="{ float: 'right', padding: '20px' }"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -170,3 +172,8 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.upload-btn+.upload-btn {
|
||||
margin-left: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user