Merge branch 'master' of https://osredm.com/p71924506/file_sharing_ms_fe
This commit is contained in:
commit
ed68db3b42
111
README-zh.md
111
README-zh.md
|
@ -1,111 +0,0 @@
|
|||
# vue-admin-template
|
||||
|
||||
> 这是一个极简的 vue admin 管理后台。它只包含了 Element UI & axios & iconfont & permission control & lint,这些搭建后台必要的东西。
|
||||
|
||||
[线上地址](http://panjiachen.github.io/vue-admin-template)
|
||||
|
||||
[国内访问](https://panjiachen.gitee.io/vue-admin-template)
|
||||
|
||||
目前版本为 `v4.0+` 基于 `vue-cli` 进行构建,若你想使用旧版本,可以切换分支到[tag/3.11.0](https://github.com/PanJiaChen/vue-admin-template/tree/tag/3.11.0),它不依赖 `vue-cli`。
|
||||
|
||||
<p align="center">
|
||||
<b>SPONSORED BY</b>
|
||||
</p>
|
||||
<p align="center">
|
||||
<a href="https://finclip.com?from=vue_element" title="FinClip" target="_blank">
|
||||
<img height="200px" src="https://gitee.com/panjiachen/gitee-cdn/raw/master/vue%E8%B5%9E%E5%8A%A9.png" title="FinClip">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
## Extra
|
||||
|
||||
如果你想要根据用户角色来动态生成侧边栏和 router,你可以使用该分支[permission-control](https://github.com/PanJiaChen/vue-admin-template/tree/permission-control)
|
||||
|
||||
## 相关项目
|
||||
|
||||
- [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
|
||||
|
||||
- [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
|
||||
|
||||
- [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template)
|
||||
|
||||
- [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312)
|
||||
|
||||
写了一个系列的教程配套文章,如何从零构建后一个完整的后台项目:
|
||||
|
||||
- [手摸手,带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
|
||||
- [手摸手,带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)
|
||||
- [手摸手,带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)
|
||||
- [手摸手,带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板,专门针对本项目的文章,算作是一篇文档)](https://juejin.im/post/595b4d776fb9a06bbe7dba56)
|
||||
- [手摸手,带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
|
||||
|
||||
## Build Setup
|
||||
|
||||
```bash
|
||||
# 克隆项目
|
||||
git clone https://github.com/PanJiaChen/vue-admin-template.git
|
||||
|
||||
# 进入项目目录
|
||||
cd vue-admin-template
|
||||
|
||||
# 安装依赖
|
||||
npm install
|
||||
|
||||
# 建议不要直接使用 cnpm 安装以来,会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
|
||||
npm install --registry=https://registry.npm.taobao.org
|
||||
|
||||
# 启动服务
|
||||
npm run dev
|
||||
```
|
||||
|
||||
浏览器访问 [http://localhost:9528](http://localhost:9528)
|
||||
|
||||
## 发布
|
||||
|
||||
```bash
|
||||
# 构建测试环境
|
||||
npm run build:stage
|
||||
|
||||
# 构建生产环境
|
||||
npm run build:prod
|
||||
```
|
||||
|
||||
## 其它
|
||||
|
||||
```bash
|
||||
# 预览发布环境效果
|
||||
npm run preview
|
||||
|
||||
# 预览发布环境效果 + 静态资源分析
|
||||
npm run preview -- --report
|
||||
|
||||
# 代码格式检查
|
||||
npm run lint
|
||||
|
||||
# 代码格式检查并自动修复
|
||||
npm run lint -- --fix
|
||||
```
|
||||
|
||||
更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/)
|
||||
|
||||
## 购买贴纸
|
||||
|
||||
你也可以通过 购买[官方授权的贴纸](https://smallsticker.com/product/vue-element-admin) 的方式来支持 vue-element-admin - 每售出一张贴纸,我们将获得 2 元的捐赠。
|
||||
|
||||
## Demo
|
||||
|
||||
![demo](https://github.com/PanJiaChen/PanJiaChen.github.io/blob/master/images/demo.gif)
|
||||
|
||||
## Browsers support
|
||||
|
||||
Modern browsers and Internet Explorer 10+.
|
||||
|
||||
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
|
||||
| --------- | --------- | --------- | --------- |
|
||||
| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
|
||||
|
||||
## License
|
||||
|
||||
[MIT](https://github.com/PanJiaChen/vue-admin-template/blob/master/LICENSE) license.
|
||||
|
||||
Copyright (c) 2017-present PanJiaChen
|
29
README.md
29
README.md
|
@ -4,6 +4,7 @@
|
|||
|
||||
> 针对于日常办公时需要对相关文件进行共享、记录、查询、学习而开发的文件管理系统,整体服务采用VUE+SPRINGBOOT技术框架开发。此为前端仓库,后端仓库暂不开源
|
||||
|
||||
> The file management system developed for daily office needs to share, record, query and learn related files, and the overall service is developed using VUE+SPRINGBOOT technology framework. This is the front-end warehouse, the back-end warehouse is not open source
|
||||
|
||||
|
||||
## Build Setup
|
||||
|
@ -22,7 +23,7 @@ npm install
|
|||
npm run dev
|
||||
```
|
||||
|
||||
This will automatically open http://localhost:9528
|
||||
This will automatically open http://localhost:8043
|
||||
|
||||
## Build
|
||||
|
||||
|
@ -50,35 +51,13 @@ npm run lint
|
|||
npm run lint -- --fix
|
||||
```
|
||||
|
||||
Refer to [Documentation](https://panjiachen.github.io/vue-element-admin-site/guide/essentials/deploy.html) for more information
|
||||
|
||||
## Demo
|
||||
待更新
|
||||
|
||||
|
||||
## Extra
|
||||
|
||||
|
||||
## Related Project
|
||||
|
||||
- [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
|
||||
|
||||
- [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
|
||||
|
||||
- [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template)
|
||||
|
||||
- [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312)
|
||||
|
||||
## Browsers support
|
||||
|
||||
Modern browsers and Internet Explorer 10+.
|
||||
|
||||
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
|
||||
| --------- | --------- | --------- | --------- |
|
||||
| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
|
||||
Testing and development was performed under chromium kernel versions 177.0.2045.31 and 116.0.5845.189
|
||||
|
||||
## License
|
||||
|
||||
[MIT](https://github.com/PanJiaChen/vue-admin-template/blob/master/LICENSE) license.
|
||||
|
||||
Copyright (c) 2022 WeiHao
|
||||
Copyright (c) 2022-2023 OSREDM WeiHao
|
||||
|
|
|
@ -35,6 +35,7 @@
|
|||
"path-to-regexp": "2.4.0",
|
||||
"sweetalert": "^2.1.2",
|
||||
"vue": "2.6.10",
|
||||
"vue-demi": "^0.14.6",
|
||||
"vue-router": "3.0.6",
|
||||
"vuex": "3.1.0"
|
||||
},
|
||||
|
|
|
@ -7,12 +7,15 @@
|
|||
<el-input v-model="searchInfo.keyWords" suffix-icon="el-icon-edit" clearable placeholder="请输入专家姓名">
|
||||
<el-button slot="append" icon="el-icon-search" @click="nameSearch"></el-button>
|
||||
</el-input>
|
||||
<el-button type="primary" @click="dialogVisible = true" style="margin-left: 10px" >一键导入专家信息</el-button>
|
||||
<el-button type="primary" style="margin-left: 10px" @click="exportFile">生成专家咨询费发放表</el-button>
|
||||
|
||||
<el-button type="primary" @click="dialogVisible = true" style="margin-left: 10px" plain>一键导入专家信息</el-button>
|
||||
<el-button type="primary" style="margin-left: 10px" @click="exportFile" plain>生成专家咨询费发放表</el-button>
|
||||
<el-button type="danger" @click="clearList" plain>清除导出列表</el-button>
|
||||
|
||||
</div>
|
||||
|
||||
<div style="display: flex; justify-content: space-between; width: 100%;">
|
||||
<div style="width: 49%;">
|
||||
<h2>专家列表</h2>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
@selection-change="handleSelectionChange"
|
||||
|
@ -61,6 +64,58 @@
|
|||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<div style="width: 49%;">
|
||||
<h2>待导出列表</h2>
|
||||
<el-table
|
||||
:data="exportList"
|
||||
ref="exportTable"
|
||||
stripe
|
||||
style="width: 100%">
|
||||
|
||||
<el-table-column
|
||||
prop="expertId"
|
||||
label="ID"
|
||||
width="100">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="expertName"
|
||||
label="专家姓名"
|
||||
width="100">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="expertRankName"
|
||||
label="专家职称"
|
||||
width="130">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="expertUnit"
|
||||
label="专家单位">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="expertCardNum"
|
||||
label="银行卡号">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="expertBankName"
|
||||
label="开户行">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="expertIdCard"
|
||||
label="身份证">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="expertStandard"
|
||||
label="开支标准">
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<el-dialog
|
||||
|
@ -127,6 +182,13 @@ export default {
|
|||
},
|
||||
methods:{
|
||||
|
||||
//清除导出列表
|
||||
clearList(){
|
||||
this.exportList = []
|
||||
|
||||
//选择器的状态也需要清空
|
||||
this.$refs.table.clearSelection();
|
||||
},
|
||||
|
||||
//下载导入模板
|
||||
downloadImportTemplate(){
|
||||
|
@ -144,13 +206,13 @@ export default {
|
|||
|
||||
//导入专家调用接口返回
|
||||
uploadSuccess(response){
|
||||
if (response.status == 0) {
|
||||
if (response.status == 1) {
|
||||
Message.success(response.msg)
|
||||
this.dialogVisible = false
|
||||
this.$refs.fileUpload.clearFiles()
|
||||
this.highlightedExpertIds = []
|
||||
this.getAllExpertInfo()
|
||||
}else if (response.status == 10){
|
||||
}else if (response.status == 0){
|
||||
//有重复信息
|
||||
Message.warning(response.msg)
|
||||
this.dialogVisible = false
|
||||
|
@ -179,23 +241,31 @@ export default {
|
|||
if (val.length > maxSelect) {
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: `最多只能选择 ${maxSelect} 项`
|
||||
message: `您选择的专家数量超过 ${maxSelect} 个,将生成多个表格`
|
||||
})
|
||||
|
||||
// 由于 selection 是一个数组,我们需要创建一个新的数组,这样 Vue 才能检测到数组的变化。
|
||||
// 我们取前 maxSelect 项作为新的选择
|
||||
const newSelections = val.slice(0, maxSelect)
|
||||
|
||||
// 使用 nextTick 确保在 DOM 更新后再更改选择,防止出现无法预期的行为
|
||||
this.$nextTick(() => {
|
||||
this.$refs.table.clearSelection()
|
||||
newSelections.forEach(row => {
|
||||
this.$refs.table.toggleRowSelection(row, true)
|
||||
})
|
||||
})
|
||||
// const newSelections = val.slice(0, maxSelect)
|
||||
//
|
||||
// // 使用 nextTick 确保在 DOM 更新后再更改选择,防止出现无法预期的行为
|
||||
// this.$nextTick(() => {
|
||||
// this.$refs.table.clearSelection()
|
||||
// newSelections.forEach(row => {
|
||||
// this.$refs.table.toggleRowSelection(row, true)
|
||||
// })
|
||||
// })
|
||||
}
|
||||
|
||||
this.exportList = val
|
||||
|
||||
val.forEach(item => {
|
||||
// 如果exportList中还没有这个项,就添加它
|
||||
if (!this.exportList.find(i => i.expertId === item.expertId)) {
|
||||
this.exportList.push(item);
|
||||
}
|
||||
});
|
||||
|
||||
// this.exportList = val
|
||||
|
||||
|
||||
},
|
||||
|
|
|
@ -127,6 +127,7 @@
|
|||
|
||||
<div class="floating-div" >
|
||||
|
||||
<div class="box-card" style="width: 80px;height: 30px;border-radius: 10px 10px 0 0;display: flex; justify-content: center; align-items: center; cursor: pointer">关闭</div>
|
||||
<el-card class="box-card" shadow="hover">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>留言信息版</span>
|
||||
|
@ -824,7 +825,7 @@ export default {
|
|||
|
||||
|
||||
background: rgba(240, 240, 240, 0.52);
|
||||
border-radius: 10px;
|
||||
border-radius: 0 10px 10px 10px;
|
||||
backdrop-filter: saturate(50%) blur(8px);
|
||||
}
|
||||
.clearfix:before,
|
||||
|
|
Loading…
Reference in New Issue