commit
172a2176b3
124 changed files with 27361 additions and 0 deletions
@ -0,0 +1,3 @@ |
|||||
|
> 1% |
||||
|
last 2 versions |
||||
|
not ie <= 8 |
||||
@ -0,0 +1,22 @@ |
|||||
|
.DS_Store |
||||
|
node_modules |
||||
|
/dist |
||||
|
example.html |
||||
|
favicon.ico |
||||
|
# local env files |
||||
|
.env.local |
||||
|
.env.*.local |
||||
|
|
||||
|
# Log files |
||||
|
npm-debug.log* |
||||
|
yarn-debug.log* |
||||
|
yarn-error.log* |
||||
|
|
||||
|
# Editor directories and files |
||||
|
.idea |
||||
|
.vscode |
||||
|
*.suo |
||||
|
*.ntvs* |
||||
|
*.njsproj |
||||
|
*.sln |
||||
|
*.sw* |
||||
@ -0,0 +1,6 @@ |
|||||
|
{ |
||||
|
"tabWidth": 4, |
||||
|
"singleQuote": true, |
||||
|
"trailingComma": "none", |
||||
|
"printWidth": 140 |
||||
|
} |
||||
@ -0,0 +1,21 @@ |
|||||
|
MIT License |
||||
|
|
||||
|
Copyright (c) 2016-2019 vue-manage-system |
||||
|
|
||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy |
||||
|
of this software and associated documentation files (the "Software"), to deal |
||||
|
in the Software without restriction, including without limitation the rights |
||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||
|
copies of the Software, and to permit persons to whom the Software is |
||||
|
furnished to do so, subject to the following conditions: |
||||
|
|
||||
|
The above copyright notice and this permission notice shall be included in all |
||||
|
copies or substantial portions of the Software. |
||||
|
|
||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
||||
|
SOFTWARE. |
||||
@ -0,0 +1,197 @@ |
|||||
|
# vue-manage-system |
||||
|
|
||||
|
<a href="https://github.com/vuejs/vue"> |
||||
|
<img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue"> |
||||
|
</a> |
||||
|
<a href="https://github.com/ElemeFE/element"> |
||||
|
<img src="https://img.shields.io/badge/element--ui-2.8.2-brightgreen.svg" alt="element-ui"> |
||||
|
</a> |
||||
|
<a href="https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE"> |
||||
|
<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license"> |
||||
|
</a> |
||||
|
<a href="https://github.com/lin-xin/vue-manage-system/releases"> |
||||
|
<img src="https://img.shields.io/github/release/lin-xin/vue-manage-system.svg" alt="GitHub release"> |
||||
|
</a> |
||||
|
<a href="https://lin-xin.gitee.io/example/work/#/donate"> |
||||
|
<img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate"> |
||||
|
</a> |
||||
|
|
||||
|
基于 Vue + Element UI 的后台管理系统解决方案。[线上地址](https://lin-xin.gitee.io/example/work/) |
||||
|
|
||||
|
> React + Ant Design 的版本正在开发中，仓库地址：[react-manage-system](https://github.com/lin-xin/react-manage-system) |
||||
|
|
||||
|
[English document](https://github.com/lin-xin/manage-system/blob/master/README_EN.md) |
||||
|
|
||||
|
## 项目截图 |
||||
|
|
||||
|
### 登录 |
||||
|
|
||||
|
 |
||||
|
|
||||
|
### 默认皮肤 |
||||
|
|
||||
|
 |
||||
|
|
||||
|
### 浅绿色皮肤 |
||||
|
|
||||
|
 |
||||
|
|
||||
|
## 赞赏 |
||||
|
|
||||
|
请作者喝杯咖啡吧！(微信号：linxin_20) |
||||
|
|
||||
|
 |
||||
|
|
||||
|
## 特别鸣谢 |
||||
|
|
||||
|
- [实验楼](https://www.shiyanlou.com?source=vue-manage-system) |
||||
|
|
||||
|
## 前言 |
||||
|
|
||||
|
该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于 vue.js，使用 vue-cli3 脚手架，引用 Element UI 组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。 |
||||
|
|
||||
|
## 功能 |
||||
|
|
||||
|
- [x] Element UI |
||||
|
- [x] 登录/注销 |
||||
|
- [x] Dashboard |
||||
|
- [x] 表格 |
||||
|
- [x] Tab 选项卡 |
||||
|
- [x] 表单 |
||||
|
- [x] 图表 :bar_chart: |
||||
|
- [x] 富文本编辑器 |
||||
|
- [x] markdown 编辑器 |
||||
|
- [x] 图片拖拽/裁剪上传 |
||||
|
- [x] 支持切换主题色 :sparkles: |
||||
|
- [x] 列表拖拽排序 |
||||
|
- [x] 权限测试 |
||||
|
- [x] 404 / 403 |
||||
|
- [x] 三级菜单 |
||||
|
- [x] 自定义图标 |
||||
|
- [x] 可拖拽弹窗 |
||||
|
- [x] 国际化 |
||||
|
|
||||
|
## 安装步骤 |
||||
|
|
||||
|
``` |
||||
|
git clone https://github.com/lin-xin/vue-manage-system.git // 把模板下载到本地 |
||||
|
cd vue-manage-system // 进入模板目录 |
||||
|
npm install // 安装项目依赖，等待安装完成之后，安装失败可用 cnpm 或 yarn |
||||
|
|
||||
|
// 开启服务器，浏览器访问 http://localhost:8080 |
||||
|
npm run serve |
||||
|
|
||||
|
// 执行构建命令，生成的dist文件夹放在服务器下即可访问 |
||||
|
npm run build |
||||
|
``` |
||||
|
|
||||
|
## 组件使用说明与演示 |
||||
|
|
||||
|
### vue-schart |
||||
|
|
||||
|
vue.js 封装 sChart.js 的图表组件。访问地址：[vue-schart](https://github.com/linxin/vue-schart) |
||||
|
|
||||
|
<p><a href="https://www.npmjs.com/package/vue-schart"><img src="https://img.shields.io/npm/dm/vue-schart.svg" alt="Downloads"></a></p> |
||||
|
|
||||
|
```html |
||||
|
<template> |
||||
|
<div> |
||||
|
<schart class="wrapper" canvasId="myCanvas" :options="options"></schart> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Schart from 'vue-schart'; // 导入Schart组件 |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
options: { |
||||
|
type: 'bar', |
||||
|
title: { |
||||
|
text: '最近一周各品类销售图' |
||||
|
}, |
||||
|
labels: ['周一', '周二', '周三', '周四', '周五'], |
||||
|
datasets: [ |
||||
|
{ |
||||
|
label: '家电', |
||||
|
data: [234, 278, 270, 190, 230] |
||||
|
}, |
||||
|
{ |
||||
|
label: '百货', |
||||
|
data: [164, 178, 190, 135, 160] |
||||
|
}, |
||||
|
{ |
||||
|
label: '食品', |
||||
|
data: [144, 198, 150, 235, 120] |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}; |
||||
|
}, |
||||
|
components: { |
||||
|
Schart |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
<style> |
||||
|
.wrapper { |
||||
|
width: 7rem; |
||||
|
height: 5rem; |
||||
|
} |
||||
|
</style> |
||||
|
``` |
||||
|
|
||||
|
## 其他注意事项 |
||||
|
|
||||
|
### 一、如果我不想用到上面的某些组件呢，那我怎么在模板中删除掉不影响到其他功能呢？ |
||||
|
|
||||
|
举个栗子，我不想用 Vue-Quill-Editor 这个组件，那我需要分四步走。 |
||||
|
|
||||
|
第一步：删除该组件的路由，在目录 src/router/index.js 中，找到引入改组件的路由，删除下面这段代码。 |
||||
|
|
||||
|
```JavaScript |
||||
|
{ |
||||
|
// 富文本编辑器组件 |
||||
|
path: '/editor', |
||||
|
component: resolve => require(['../components/page/VueEditor.vue'], resolve) |
||||
|
}, |
||||
|
``` |
||||
|
|
||||
|
第二步：删除引入该组件的文件。在目录 src/components/page/ 删除 VueEditor.vue 文件。 |
||||
|
|
||||
|
第三步：删除该页面的入口。在目录 src/components/common/Sidebar.vue 中，找到该入口，删除下面这段代码。 |
||||
|
|
||||
|
```js |
||||
|
{ |
||||
|
index: 'editor', |
||||
|
title: '富文本编辑器' |
||||
|
}, |
||||
|
``` |
||||
|
|
||||
|
第四步：卸载该组件。执行以下命令： |
||||
|
npm un vue-quill-editor -S |
||||
|
|
||||
|
完成。 |
||||
|
|
||||
|
### 二、如何切换主题色呢？ |
||||
|
|
||||
|
第一步：打开 src/main.js 文件，找到引入 element 样式的地方，换成浅绿色主题。 |
||||
|
|
||||
|
```javascript |
||||
|
import 'element-ui/lib/theme-default/index.css'; // 默认主题 |
||||
|
// import './assets/css/theme-green/index.css'; // 浅绿色主题 |
||||
|
``` |
||||
|
|
||||
|
第二步：打开 src/App.vue 文件，找到 style 标签引入样式的地方，切换成浅绿色主题。 |
||||
|
|
||||
|
```javascript |
||||
|
@import "./assets/css/main.css"; |
||||
|
@import "./assets/css/color-dark.css"; /*深色主题*/ |
||||
|
/*@import "./assets/css/theme-green/color-green.css"; !*浅绿色主题*!*/ |
||||
|
``` |
||||
|
|
||||
|
第三步：打开 src/components/common/Sidebar.vue 文件，找到 el-menu 标签，把 background-color/text-color/active-text-color 属性去掉即可。 |
||||
|
|
||||
|
## License |
||||
|
|
||||
|
[MIT](https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE) |
||||
@ -0,0 +1,196 @@ |
|||||
|
# vue-manage-system |
||||
|
|
||||
|
<a href="https://github.com/vuejs/vue"> |
||||
|
<img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue"> |
||||
|
</a> |
||||
|
<a href="https://github.com/ElemeFE/element"> |
||||
|
<img src="https://img.shields.io/badge/element--ui-2.8.2-brightgreen.svg" alt="element-ui"> |
||||
|
</a> |
||||
|
<a href="https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE"> |
||||
|
<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license"> |
||||
|
</a> |
||||
|
<a href="https://github.com/lin-xin/vue-manage-system/releases"> |
||||
|
<img src="https://img.shields.io/github/release/lin-xin/vue-manage-system.svg" alt="GitHub release"> |
||||
|
</a> |
||||
|
<a href="https://lin-xin.gitee.io/example/work/#/donate"> |
||||
|
<img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate"> |
||||
|
</a> |
||||
|
|
||||
|
The web management system solution based on Vue2 and Element-UI。[live demo](https://lin-xin.gitee.io/example/work/) |
||||
|
|
||||
|
## Donation |
||||
|
|
||||
|
 |
||||
|
|
||||
|
## Preface |
||||
|
|
||||
|
The scheme as a set of multi-function background frame templates, suitable for most of the WEB management system development. Convenient development fast simple good components based on Vue2 and Element-UI. Color separation of color style, support manual switch themes, and it is convenient to use a custom theme color. |
||||
|
|
||||
|
## Function |
||||
|
|
||||
|
- [x] Element-UI |
||||
|
- [x] Login/Logout |
||||
|
- [x] Dashboard |
||||
|
- [x] Table |
||||
|
- [x] Tabs |
||||
|
- [x] From |
||||
|
- [x] Chart :bar_chart: |
||||
|
- [x] Editor |
||||
|
- [x] Markdown |
||||
|
- [x] Upload pictures by clipping or dragging |
||||
|
- [x] Support manual switch themes :sparkles: |
||||
|
- [x] List drag sort |
||||
|
- [x] Permission |
||||
|
- [x] 404 / 403 |
||||
|
- [x] Three level menu |
||||
|
- [x] Custom icon |
||||
|
|
||||
|
## Installation steps |
||||
|
|
||||
|
git clone https://github.com/lin-xin/vue-manage-system.git // Clone templates |
||||
|
cd vue-manage-system // Enter template directory |
||||
|
npm install // Installation dependency |
||||
|
|
||||
|
## Local development |
||||
|
|
||||
|
// Open server and access http://localhost:8080 in browser |
||||
|
npm run serve |
||||
|
|
||||
|
## Constructing production |
||||
|
|
||||
|
// Constructing project |
||||
|
npm run build |
||||
|
|
||||
|
## Component description and presentation |
||||
|
|
||||
|
### vue-schart |
||||
|
|
||||
|
Vue.js wrapper for sChart.js. Github : [vue-schart](https://github.com/linxin/vue-schart) |
||||
|
|
||||
|
```html |
||||
|
<template> |
||||
|
<div> |
||||
|
<schart class="wrapper" canvasId="myCanvas" :options="options"></schart> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Schart from 'vue-schart'; // 导入Schart组件 |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
options: { |
||||
|
type: 'bar', |
||||
|
title: { |
||||
|
text: '最近一周各品类销售图' |
||||
|
}, |
||||
|
labels: ['周一', '周二', '周三', '周四', '周五'], |
||||
|
datasets: [ |
||||
|
{ |
||||
|
label: '家电', |
||||
|
data: [234, 278, 270, 190, 230] |
||||
|
}, |
||||
|
{ |
||||
|
label: '百货', |
||||
|
data: [164, 178, 190, 135, 160] |
||||
|
}, |
||||
|
{ |
||||
|
label: '食品', |
||||
|
data: [144, 198, 150, 235, 120] |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}; |
||||
|
}, |
||||
|
components: { |
||||
|
Schart |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
<style> |
||||
|
.wrapper { |
||||
|
width: 7rem; |
||||
|
height: 5rem; |
||||
|
} |
||||
|
</style> |
||||
|
``` |
||||
|
|
||||
|
### element-ui |
||||
|
|
||||
|
A desktop component library based on vue.js2.0 . Github : [element](http://element.eleme.io/#/zh-CN/component/layout) |
||||
|
|
||||
|
### Vue-Quill-Editor |
||||
|
|
||||
|
Quill editor component for Vue2. Github : [vue-quill-editor](https://github.com/surmon-china/vue-quill-editor) |
||||
|
|
||||
|
### mavonEditor |
||||
|
|
||||
|
A markdown editor based on Vue that supports a variety of personalized features. Github: [mavonEditor](https://github.com/hinesboy/mavonEditor) |
||||
|
|
||||
|
### vue-cropperjs |
||||
|
|
||||
|
A Vue wrapper component for cropperjs. Github: [vue-cropperjs](https://github.com/Agontuk/vue-cropperjs) |
||||
|
|
||||
|
## Notice |
||||
|
|
||||
|
### 一、If I don't want to use some components, how can I delete it? |
||||
|
|
||||
|
For example, I don't want to use the Vue-Quill-Editor component, I need to take four steps. |
||||
|
|
||||
|
The first step to remove the component of the routing. Enter 'src/router/index.js' and delete the code below. |
||||
|
|
||||
|
```JavaScript |
||||
|
{ |
||||
|
path: '/editor', |
||||
|
component: resolve => require(['../components/page/VueEditor.vue'], resolve) |
||||
|
}, |
||||
|
``` |
||||
|
|
||||
|
Second,delete the component files. Enter 'src/components/page/' and delete 'VueEditor.vue' file. |
||||
|
|
||||
|
The third step is to delete the entry. Enter 'src/components/common/Sidebar.vue' and delete the code below. |
||||
|
|
||||
|
```js |
||||
|
{ |
||||
|
index: 'editor', |
||||
|
title: '富文本编辑器' |
||||
|
}, |
||||
|
``` |
||||
|
|
||||
|
Finally, uninstall this component. |
||||
|
npm un vue-quill-editor -S |
||||
|
|
||||
|
Complete! |
||||
|
|
||||
|
### 二、How to switch themes? |
||||
|
|
||||
|
The first step to enter 'src/main.js' and change into green theme. |
||||
|
|
||||
|
```javascript |
||||
|
import 'element-ui/lib/theme-default/index.css'; // default theme |
||||
|
// import '../static/css/theme-green/index.css'; // green theme |
||||
|
``` |
||||
|
|
||||
|
The second step to enter 'src/App.vue' and change into green theme. |
||||
|
|
||||
|
```javascript |
||||
|
@import "../static/css/main.css"; |
||||
|
@import "../static/css/color-dark.css"; /*深色主题*/ |
||||
|
/*@import "../static/css/theme-green/color-green.css"; !*浅绿色主题*!*/ |
||||
|
``` |
||||
|
|
||||
|
Finally,enter 'src/components/common/Sidebar.vue' and find el-menu Tags,delete 'background-color/text-color/active-text-color'。 |
||||
|
|
||||
|
## Screenshot |
||||
|
|
||||
|
### Default theme |
||||
|
|
||||
|
 |
||||
|
|
||||
|
### Green theme |
||||
|
|
||||
|
 |
||||
|
|
||||
|
## License |
||||
|
|
||||
|
[MIT](https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE) |
||||
@ -0,0 +1,5 @@ |
|||||
|
module.exports = { |
||||
|
presets: [ |
||||
|
'@vue/app' |
||||
|
] |
||||
|
} |
||||
File diff suppressed because it is too large
@ -0,0 +1,29 @@ |
|||||
|
{ |
||||
|
"name": "vue-manage-system", |
||||
|
"version": "4.2.0", |
||||
|
"private": true, |
||||
|
"scripts": { |
||||
|
"dev": "npm run serve", |
||||
|
"serve": "vue-cli-service serve", |
||||
|
"build": "vue-cli-service build" |
||||
|
}, |
||||
|
"dependencies": { |
||||
|
"axios": "^0.18.0", |
||||
|
"babel-polyfill": "^6.26.0", |
||||
|
"element-ui": "^2.11.0", |
||||
|
"mavon-editor": "^2.6.17", |
||||
|
"moment": "^2.29.1", |
||||
|
"vue": "^2.6.10", |
||||
|
"vue-cropperjs": "^3.0.0", |
||||
|
"vue-i18n": "^8.10.0", |
||||
|
"vue-quill-editor": "^3.0.6", |
||||
|
"vue-router": "^3.0.3", |
||||
|
"vue-schart": "^2.0.0", |
||||
|
"vuedraggable": "^2.17.0" |
||||
|
}, |
||||
|
"devDependencies": { |
||||
|
"@vue/cli-plugin-babel": "^3.9.0", |
||||
|
"@vue/cli-service": "^3.9.0", |
||||
|
"vue-template-compiler": "^2.6.10" |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,5 @@ |
|||||
|
module.exports = { |
||||
|
plugins: { |
||||
|
autoprefixer: {} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,17 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="utf-8"> |
||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> |
||||
|
<link rel="stylesheet" href="//at.alicdn.com/t/font_830376_qzecyukz0s.css"> |
||||
|
<title>vue-manage-system</title> |
||||
|
</head> |
||||
|
<body> |
||||
|
<noscript> |
||||
|
<strong>We're sorry but vms doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
||||
|
</noscript> |
||||
|
<div id="app"></div> |
||||
|
<!-- built files will be auto injected --> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,40 @@ |
|||||
|
{ |
||||
|
"list": [{ |
||||
|
"id": 1, |
||||
|
"name": "张三", |
||||
|
"money": 123, |
||||
|
"address": "广东省东莞市长安镇", |
||||
|
"state": "成功", |
||||
|
"date": "2019-11-1", |
||||
|
"thumb": "https://lin-xin.gitee.io/images/post/wms.png" |
||||
|
}, |
||||
|
{ |
||||
|
"id": 2, |
||||
|
"name": "李四", |
||||
|
"money": 456, |
||||
|
"address": "广东省广州市白云区", |
||||
|
"state": "成功", |
||||
|
"date": "2019-10-11", |
||||
|
"thumb": "https://lin-xin.gitee.io/images/post/node3.png" |
||||
|
}, |
||||
|
{ |
||||
|
"id": 3, |
||||
|
"name": "王五", |
||||
|
"money": 789, |
||||
|
"address": "湖南省长沙市", |
||||
|
"state": "失败", |
||||
|
"date": "2019-11-11", |
||||
|
"thumb": "https://lin-xin.gitee.io/images/post/parcel.png" |
||||
|
}, |
||||
|
{ |
||||
|
"id": 4, |
||||
|
"name": "赵六", |
||||
|
"money": 1011, |
||||
|
"address": "福建省厦门市鼓浪屿", |
||||
|
"state": "成功", |
||||
|
"date": "2019-10-20", |
||||
|
"thumb": "https://lin-xin.gitee.io/images/post/notice.png" |
||||
|
} |
||||
|
], |
||||
|
"pageTotal": 4 |
||||
|
} |
||||
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 81 KiB |
|
After Width: | Height: | Size: 112 KiB |
@ -0,0 +1,10 @@ |
|||||
|
<template> |
||||
|
<div id="app"> |
||||
|
<router-view></router-view> |
||||
|
</div> |
||||
|
</template> |
||||
|
<style> |
||||
|
@import "./assets/css/main.css"; |
||||
|
@import "./assets/css/color-dark.css"; /*深色主题*/ |
||||
|
/*@import "./assets/css/theme-green/color-green.css"; 浅绿色主题*/ |
||||
|
</style> |
||||
@ -0,0 +1,491 @@ |
|||||
|
import request from '../utils/request'; |
||||
|
|
||||
|
|
||||
|
// 登录
|
||||
|
export const login = query => { |
||||
|
return request({ |
||||
|
url: 'api/Passport/login', |
||||
|
method: 'get', |
||||
|
params: query |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
// 账户管理--交易平台账户查询
|
||||
|
// 平台账号列表查询
|
||||
|
export const platformAccountList = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Account/platform_account_list', |
||||
|
method: 'get', |
||||
|
params: query |
||||
|
}); |
||||
|
}; |
||||
|
// 平台账号列表查询
|
||||
|
export const operationRecord = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Account/get_user_operation_log', |
||||
|
method: 'get', |
||||
|
params: query |
||||
|
}); |
||||
|
}; |
||||
|
// 查询账号黑名单
|
||||
|
export const getBlack = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Account/getBlack', |
||||
|
method: 'get', |
||||
|
params: query |
||||
|
}); |
||||
|
}; |
||||
|
// 审核人员下拉数据
|
||||
|
export const auditList = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Config/auditList', |
||||
|
method: 'get', |
||||
|
params: query |
||||
|
}); |
||||
|
}; |
||||
|
// 资料审核（改）（可看平台的资料查询）
|
||||
|
export const getAccountData = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Account/getAccountData', |
||||
|
method: 'get', |
||||
|
params: query |
||||
|
}); |
||||
|
}; |
||||
|
// 修改黑名单
|
||||
|
export const updateBlackList = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Account/updateBlackList', |
||||
|
method: 'post', |
||||
|
data: query |
||||
|
}); |
||||
|
}; |
||||
|
// 审核（改）
|
||||
|
export const accountCheck = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Account/accountCheck', |
||||
|
method: 'post', |
||||
|
data: query |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
// 账户管理--买方开户审核
|
||||
|
// 审核列表
|
||||
|
export const applyList = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Account/applyList', |
||||
|
method: 'get', |
||||
|
params: query |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
// 账户管理--黑名单管理
|
||||
|
// 黑名单列表
|
||||
|
export const blackList = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Account/blackList', |
||||
|
method: 'get', |
||||
|
params: query |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
/* 资产管理 */ |
||||
|
|
||||
|
|
||||
|
//查看资料
|
||||
|
export const getAssetInfo = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Asset/getAssetInfo', |
||||
|
method: 'get', |
||||
|
params: query |
||||
|
}); |
||||
|
}; |
||||
|
/* 资产管理 --资产信息查询*/ |
||||
|
|
||||
|
//资产信息查询列表
|
||||
|
export const getAccountList = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Asset/assetList', |
||||
|
method: 'get', |
||||
|
params: query |
||||
|
}); |
||||
|
}; |
||||
|
//资产上架
|
||||
|
export const addedAsset = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Asset/addedAsset', |
||||
|
method: 'post', |
||||
|
data: query |
||||
|
}); |
||||
|
}; |
||||
|
//资产下架
|
||||
|
export const coerceRemove = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Asset/coerceRemove', |
||||
|
method: 'post', |
||||
|
data: query |
||||
|
}); |
||||
|
}; |
||||
|
//上传资产评估报告
|
||||
|
export const assetAssessReport = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Asset/assetAssessReport', |
||||
|
method: 'post', |
||||
|
data: query |
||||
|
}); |
||||
|
}; |
||||
|
//资产生成编号
|
||||
|
export const createAssetNumber = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Asset/create_asset_number', |
||||
|
method: 'post', |
||||
|
data: query |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
/* 资产管理 --资产挂牌审核*/ |
||||
|
|
||||
|
//资产审核列表 废弃
|
||||
|
export const accountApplyList = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Asset/cartellinoList', |
||||
|
method: 'get', |
||||
|
params: query |
||||
|
}); |
||||
|
}; |
||||
|
/* 资产管理 --资产挂牌审核*/ |
||||
|
|
||||
|
//资产审核列表
|
||||
|
export const assetCheckList = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Asset/assetCheckList', |
||||
|
method: 'get', |
||||
|
params: query |
||||
|
}); |
||||
|
}; |
||||
|
//支付列表
|
||||
|
export const payList = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Asset/payList', |
||||
|
method: 'get', |
||||
|
params: query |
||||
|
}); |
||||
|
}; |
||||
|
// 支付审核
|
||||
|
export const payCheck = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Asset/payCheck', |
||||
|
method: 'post', |
||||
|
data: query |
||||
|
}); |
||||
|
}; |
||||
|
// 资产挂牌审核 废弃
|
||||
|
export const cartellinoCheck = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Asset/cartellinoCheck', |
||||
|
method: 'post', |
||||
|
data: query |
||||
|
}); |
||||
|
}; |
||||
|
// 资产审核
|
||||
|
export const assertCheck = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Asset/assertCheck', |
||||
|
method: 'post', |
||||
|
data: query |
||||
|
}); |
||||
|
}; |
||||
|
/* 资产管理 --资产发布审核*/ |
||||
|
|
||||
|
//资产审核列表
|
||||
|
export const sendList = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Asset/sendList', |
||||
|
method: 'get', |
||||
|
params: query |
||||
|
}); |
||||
|
}; |
||||
|
// 资产发布审核
|
||||
|
export const sendCheck = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Asset/sendCheck', |
||||
|
method: 'post', |
||||
|
data: query |
||||
|
}); |
||||
|
}; |
||||
|
// 摘牌申请审核
|
||||
|
export const checkAssetOut = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Asset/checkAssetOut', |
||||
|
method: 'post', |
||||
|
data: query |
||||
|
}); |
||||
|
}; |
||||
|
//摘牌申请审核列表
|
||||
|
export const outCheckList = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Asset/outCheckList', |
||||
|
method: 'get', |
||||
|
params: query |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
/* 交易管理 */ |
||||
|
|
||||
|
/* 交易管理 --交易订单查询*/ |
||||
|
|
||||
|
//交易订单查询列表
|
||||
|
export const orderList = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Order/list', |
||||
|
method: 'get', |
||||
|
params: query |
||||
|
}); |
||||
|
}; |
||||
|
//订单详情
|
||||
|
export const orderInfo = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Order/orderInfo', |
||||
|
method: 'get', |
||||
|
params: query |
||||
|
}); |
||||
|
}; |
||||
|
// 订单审核付款
|
||||
|
export const orderCheckPay = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Order/orderCheckPay', |
||||
|
method: 'post', |
||||
|
data: query |
||||
|
}); |
||||
|
}; |
||||
|
// 确认签约合同
|
||||
|
export const orderConfirmContract = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Order/orderConfirmContract', |
||||
|
method: 'post', |
||||
|
data: query |
||||
|
}); |
||||
|
}; |
||||
|
// 结算订单
|
||||
|
export const settlement = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Order/settlement', |
||||
|
method: 'post', |
||||
|
data: query |
||||
|
}); |
||||
|
}; |
||||
|
// 关闭订单
|
||||
|
export const close = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Order/close', |
||||
|
method: 'post', |
||||
|
data: query |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
/* 交易管理 --待支付订单*/ |
||||
|
|
||||
|
//订单列表
|
||||
|
|
||||
|
/* 运营管理 */ |
||||
|
/* 运营管理 --通知公告配置*/ |
||||
|
|
||||
|
//获取通知公告配置
|
||||
|
export const getNoticeList = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Operation/getNoticeList', |
||||
|
method: 'get', |
||||
|
params: query |
||||
|
}); |
||||
|
}; |
||||
|
//获取单个通知公告
|
||||
|
export const getNoticeFind = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Operation/getNoticeFind', |
||||
|
method: 'get', |
||||
|
params: query |
||||
|
}); |
||||
|
}; |
||||
|
//设置通知公告配置
|
||||
|
export const setNotice = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Operation/setNotice', |
||||
|
method: 'post', |
||||
|
data: query |
||||
|
}); |
||||
|
}; |
||||
|
//修改通知公告配置
|
||||
|
export const updateNotice = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Operation/updateNotice', |
||||
|
method: 'post', |
||||
|
data: query |
||||
|
}); |
||||
|
}; |
||||
|
//删除通知公告
|
||||
|
export const deleteNotice = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Operation/deleteNotice', |
||||
|
method: 'post', |
||||
|
data: query |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
/* 运营管理 --banner配置*/ |
||||
|
//获取banner配置
|
||||
|
export const getBanner = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Operation/getBanner', |
||||
|
method: 'get', |
||||
|
params: query |
||||
|
}); |
||||
|
}; |
||||
|
//banner配置
|
||||
|
export const setBanner = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Operation/setBanner', |
||||
|
method: 'post', |
||||
|
data: query |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
/* 运营管理 --feed配置*/ |
||||
|
//获取feed配置
|
||||
|
export const getFeed = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Operation/getFeed', |
||||
|
method: 'get', |
||||
|
params: query |
||||
|
}); |
||||
|
}; |
||||
|
//feed配置
|
||||
|
export const setFeed = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Operation/setFeed', |
||||
|
method: 'post', |
||||
|
data: query |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
/* 运营管理 --资产推荐配置*/ |
||||
|
//获取资产推荐配置
|
||||
|
export const getRecommend = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Operation/getRecommend', |
||||
|
method: 'get', |
||||
|
params: query |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
/* 运营管理 --客户意见处理*/ |
||||
|
//客户意见列表
|
||||
|
export const opinionList = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.Operation/opinionList', |
||||
|
method: 'get', |
||||
|
params: query |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
/* 平台管理 */ |
||||
|
/* 平台管理 --运营账号管理*/ |
||||
|
|
||||
|
/* 平台管理 --运营账号管理--账号列表*/ |
||||
|
|
||||
|
//账号列表
|
||||
|
export const getAdminlist = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.User/getAdminlist', |
||||
|
method: 'get', |
||||
|
params: query |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
/* 平台管理 --运营账号管理--运营角色*/ |
||||
|
|
||||
|
//部门名称列表
|
||||
|
export const departmentList = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.User/departmentList', |
||||
|
method: 'get', |
||||
|
params: query |
||||
|
}); |
||||
|
}; |
||||
|
//部门职位列表
|
||||
|
export const positionList = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.User/positionList', |
||||
|
method: 'get', |
||||
|
params: query |
||||
|
}); |
||||
|
}; |
||||
|
//获取部门以及职位
|
||||
|
export const getDepartment = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.User/getDepartment', |
||||
|
method: 'get', |
||||
|
params: query |
||||
|
}); |
||||
|
}; |
||||
|
//获取角色
|
||||
|
export const grouplist = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.User/grouplist', |
||||
|
method: 'get', |
||||
|
params: query |
||||
|
}); |
||||
|
}; |
||||
|
//修改部门
|
||||
|
export const updateDepartment = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.User/updateDepartment', |
||||
|
method: 'post', |
||||
|
data: query |
||||
|
}); |
||||
|
}; |
||||
|
//添加管理员
|
||||
|
export const addAdmin = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.User/addAdmin', |
||||
|
method: 'post', |
||||
|
data: query |
||||
|
}); |
||||
|
}; |
||||
|
//修改管理员
|
||||
|
export const editAdmin = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.User/editAdmin', |
||||
|
method: 'post', |
||||
|
data: query |
||||
|
}); |
||||
|
}; |
||||
|
//修改管理员密码
|
||||
|
export const editAdminPass = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.User/editAdminPass', |
||||
|
method: 'post', |
||||
|
data: query |
||||
|
}); |
||||
|
}; |
||||
|
//获取角色
|
||||
|
export const editAdminChange = query => { |
||||
|
return request({ |
||||
|
url: 'api/admin.User/editAdminChange', |
||||
|
method: 'get', |
||||
|
params: query |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
|
||||
|
// 获取文件类型
|
||||
|
export const getFileType = query => { |
||||
|
return request({ |
||||
|
url: '/api/Index/getFileType', |
||||
|
method: 'get', |
||||
|
params: query |
||||
|
}); |
||||
|
}; |
||||
@ -0,0 +1,28 @@ |
|||||
|
.header{ |
||||
|
background-color: #242f42; |
||||
|
} |
||||
|
.login-wrap{ |
||||
|
background: #324157; |
||||
|
} |
||||
|
.plugins-tips{ |
||||
|
background: #eef1f6; |
||||
|
} |
||||
|
.plugins-tips a{ |
||||
|
color: #20a0ff; |
||||
|
} |
||||
|
.el-upload--text em { |
||||
|
color: #20a0ff; |
||||
|
} |
||||
|
.pure-button{ |
||||
|
background: #20a0ff; |
||||
|
} |
||||
|
.tags-li.active { |
||||
|
border: 1px solid #409EFF; |
||||
|
background-color: #409EFF; |
||||
|
} |
||||
|
.message-title{ |
||||
|
color: #20a0ff; |
||||
|
} |
||||
|
.collapse-btn:hover{ |
||||
|
background: rgb(40,52,70); |
||||
|
} |
||||
@ -0,0 +1,4 @@ |
|||||
|
|
||||
|
[class*=" el-icon-lx"], [class^=el-icon-lx] { |
||||
|
font-family: lx-iconfont!important; |
||||
|
} |
||||
@ -0,0 +1,178 @@ |
|||||
|
* { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
html, |
||||
|
body, |
||||
|
#app, |
||||
|
.wrapper { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif; |
||||
|
} |
||||
|
|
||||
|
a { |
||||
|
text-decoration: none |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.content-box { |
||||
|
position: absolute; |
||||
|
left: 250px; |
||||
|
right: 0; |
||||
|
top: 70px; |
||||
|
bottom: 0; |
||||
|
padding-bottom: 30px; |
||||
|
-webkit-transition: left .3s ease-in-out; |
||||
|
transition: left .3s ease-in-out; |
||||
|
background: #f0f0f0; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
width: auto; |
||||
|
height: 100%; |
||||
|
padding: 10px; |
||||
|
overflow-y: scroll; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.content-collapse { |
||||
|
left: 65px; |
||||
|
} |
||||
|
|
||||
|
.container { |
||||
|
padding: 30px; |
||||
|
background: #fff; |
||||
|
border: 1px solid #ddd; |
||||
|
border-radius: 5px; |
||||
|
} |
||||
|
|
||||
|
.crumbs { |
||||
|
margin: 10px 0; |
||||
|
} |
||||
|
|
||||
|
.el-table th { |
||||
|
background-color: #f5f7fa !important; |
||||
|
} |
||||
|
|
||||
|
.pagination { |
||||
|
margin: 20px 0; |
||||
|
text-align: right; |
||||
|
} |
||||
|
|
||||
|
.plugins-tips { |
||||
|
padding: 20px 10px; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.el-button+.el-tooltip { |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
|
||||
|
.el-table tr:hover { |
||||
|
background: #f6faff; |
||||
|
} |
||||
|
|
||||
|
.mgb20 { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.move-enter-active, |
||||
|
.move-leave-active { |
||||
|
transition: opacity .5s; |
||||
|
} |
||||
|
|
||||
|
.move-enter, |
||||
|
.move-leave { |
||||
|
opacity: 0; |
||||
|
} |
||||
|
|
||||
|
/*BaseForm*/ |
||||
|
|
||||
|
.form-box { |
||||
|
width: 600px; |
||||
|
} |
||||
|
|
||||
|
.form-box .line { |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.el-time-panel__content::after, |
||||
|
.el-time-panel__content::before { |
||||
|
margin-top: -7px; |
||||
|
} |
||||
|
|
||||
|
.el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) { |
||||
|
padding-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
/*Upload*/ |
||||
|
|
||||
|
.pure-button { |
||||
|
width: 150px; |
||||
|
height: 40px; |
||||
|
line-height: 40px; |
||||
|
text-align: center; |
||||
|
color: #fff; |
||||
|
border-radius: 3px; |
||||
|
} |
||||
|
|
||||
|
.g-core-image-corp-container .info-aside { |
||||
|
height: 45px; |
||||
|
} |
||||
|
|
||||
|
.el-upload--text { |
||||
|
background-color: #fff; |
||||
|
border: 1px dashed #d9d9d9; |
||||
|
border-radius: 6px; |
||||
|
box-sizing: border-box; |
||||
|
width: 360px; |
||||
|
height: 180px; |
||||
|
text-align: center; |
||||
|
cursor: pointer; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.el-upload--text .el-icon-upload { |
||||
|
font-size: 67px; |
||||
|
color: #97a8be; |
||||
|
margin: 40px 0 16px; |
||||
|
line-height: 50px; |
||||
|
} |
||||
|
|
||||
|
.el-upload--text { |
||||
|
color: #97a8be; |
||||
|
font-size: 14px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.el-upload--text em { |
||||
|
font-style: normal; |
||||
|
} |
||||
|
|
||||
|
/*VueEditor*/ |
||||
|
|
||||
|
.ql-container { |
||||
|
min-height: 400px; |
||||
|
} |
||||
|
|
||||
|
.ql-snow .ql-tooltip { |
||||
|
transform: translateX(117.5px) translateY(10px) !important; |
||||
|
} |
||||
|
|
||||
|
.editor-btn { |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
|
||||
|
/*markdown*/ |
||||
|
|
||||
|
.v-note-wrapper .v-note-panel { |
||||
|
min-height: 500px; |
||||
|
} |
||||
@ -0,0 +1,129 @@ |
|||||
|
.body1{ |
||||
|
margin-left: 20px; |
||||
|
width: 1050px; |
||||
|
height: 500px; |
||||
|
} |
||||
|
.body2{ |
||||
|
display: flex; |
||||
|
width: 1050px; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
.title{ |
||||
|
font-size: 16px; |
||||
|
margin-bottom: 15px; |
||||
|
} |
||||
|
.img_span{ |
||||
|
margin-top: 15px; |
||||
|
font-size: 14px; |
||||
|
color: #4E73E4; |
||||
|
text-decoration: underline; |
||||
|
width: 130px; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.img_span1{ |
||||
|
font-size: 14px; |
||||
|
color: #4E73E4; |
||||
|
cursor: pointer; |
||||
|
width: 100%; |
||||
|
} |
||||
|
.img_span1>span{ |
||||
|
display: inline-block; |
||||
|
margin-right: 15px; |
||||
|
margin-bottom: 15px; |
||||
|
text-decoration: underline; |
||||
|
} |
||||
|
.span_blue{ |
||||
|
font-size: 14px; |
||||
|
color: #4E73E4; |
||||
|
cursor: pointer; |
||||
|
text-decoration: underline; |
||||
|
} |
||||
|
.span_left{ |
||||
|
display: inline-block; |
||||
|
margin-left: 15px; |
||||
|
} |
||||
|
.upload_span{ |
||||
|
color: #4E73E4; |
||||
|
text-decoration: underline; |
||||
|
} |
||||
|
.download{ |
||||
|
font-size: 14px; |
||||
|
color: #4E73E4; |
||||
|
text-decoration: underline; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
.file_img{ |
||||
|
width: 600px; |
||||
|
height: 340px; |
||||
|
} |
||||
|
.file_img1{ |
||||
|
width: 500px; |
||||
|
height: 283px; |
||||
|
} |
||||
|
.input_item{ |
||||
|
font-size: 14px; |
||||
|
color: #555555; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
.input_item>span{ |
||||
|
display: inline-block; |
||||
|
width: 130px; |
||||
|
} |
||||
|
.input_item >.el-input{ |
||||
|
width: 300px; |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
.p_info{ |
||||
|
font-size: 14px; |
||||
|
color: #555555; |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
.else_file{ |
||||
|
display: flex; |
||||
|
} |
||||
|
.else_file_right{ |
||||
|
margin-left: 50px; |
||||
|
height: 400px; |
||||
|
width: 350px; |
||||
|
overflow-x: hidden; |
||||
|
overflow-y: scroll; |
||||
|
} |
||||
|
.else_files{ |
||||
|
display: flex; |
||||
|
width: 300px; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: 15px; |
||||
|
} |
||||
|
.else_files .img_span{ |
||||
|
margin-top: 0; |
||||
|
} |
||||
|
.dataNumber{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.dataNumber_input{ |
||||
|
width: 160px; |
||||
|
margin-left: 15px; |
||||
|
} |
||||
|
.dataNumber_input1{ |
||||
|
width: 30px; |
||||
|
margin-left: 15px; |
||||
|
} |
||||
|
.dataNumber_input1 .el-input__inner{ |
||||
|
padding-left: 10px; |
||||
|
} |
||||
|
.margin_right{ |
||||
|
margin-right: 15px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
.el-image-viewer__wrapper{ |
||||
|
z-index: 2018; |
||||
|
} |
||||
@ -0,0 +1,29 @@ |
|||||
|
.header{ |
||||
|
background-color: #07c4a8; |
||||
|
} |
||||
|
.login-wrap{ |
||||
|
background: rgba(56, 157, 170, 0.82);; |
||||
|
} |
||||
|
.plugins-tips{ |
||||
|
background: #f2f2f2; |
||||
|
} |
||||
|
.plugins-tips a{ |
||||
|
color: #00d1b2; |
||||
|
} |
||||
|
.el-upload--text em { |
||||
|
color: #00d1b2; |
||||
|
} |
||||
|
.pure-button{ |
||||
|
background: #00d1b2; |
||||
|
} |
||||
|
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus { |
||||
|
background-color: #00d1b2 !important; |
||||
|
border-color: #00d1b2 !important; |
||||
|
} |
||||
|
.tags-li.active { |
||||
|
border: 1px solid #00d1b2; |
||||
|
background-color: #00d1b2; |
||||
|
} |
||||
|
.collapse-btn:hover{ |
||||
|
background: #00d1b2; |
||||
|
} |
||||
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 8.8 KiB |
|
After Width: | Height: | Size: 6.2 KiB |
|
After Width: | Height: | Size: 7.0 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 7.3 KiB |
|
After Width: | Height: | Size: 69 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 6.3 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 8.6 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,191 @@ |
|||||
|
<template> |
||||
|
<div class="header"> |
||||
|
<!-- 折叠按钮 --> |
||||
|
<div class="collapse-btn" @click="collapseChage"> |
||||
|
<i v-if="!collapse" class="el-icon-s-fold"></i> |
||||
|
<i v-else class="el-icon-s-unfold"></i> |
||||
|
</div> |
||||
|
<div class="logo">后台管理系统</div> |
||||
|
<div class="header-right"> |
||||
|
<div class="header-user-con"> |
||||
|
<!-- 全屏显示 --> |
||||
|
<div class="btn-fullscreen" @click="handleFullScreen"> |
||||
|
<el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom"> |
||||
|
<i class="el-icon-rank"></i> |
||||
|
</el-tooltip> |
||||
|
</div> |
||||
|
<!-- 消息中心 --> |
||||
|
<!-- <div class="btn-bell"> |
||||
|
<el-tooltip |
||||
|
effect="dark" |
||||
|
:content="message?`有${message}条未读消息`:`消息中心`" |
||||
|
placement="bottom" |
||||
|
> |
||||
|
<router-link to="/tabs"> |
||||
|
<i class="el-icon-bell"></i> |
||||
|
</router-link> |
||||
|
</el-tooltip> |
||||
|
<span class="btn-bell-badge" v-if="message"></span> |
||||
|
</div> --> |
||||
|
<!-- 用户头像 --> |
||||
|
<div class="user-avator"> |
||||
|
<img src="../../assets/img/img.jpg" /> |
||||
|
</div> |
||||
|
<!-- 用户名下拉菜单 --> |
||||
|
<el-dropdown class="user-name" trigger="click" @command="handleCommand"> |
||||
|
<span class="el-dropdown-link"> |
||||
|
{{username}} |
||||
|
<i class="el-icon-caret-bottom"></i> |
||||
|
</span> |
||||
|
<el-dropdown-menu slot="dropdown"> |
||||
|
<!-- <a href="https://github.com/lin-xin/vue-manage-system" target="_blank"> |
||||
|
<el-dropdown-item>项目仓库</el-dropdown-item> |
||||
|
</a> --> |
||||
|
<el-dropdown-item divided command="loginout">退出登录</el-dropdown-item> |
||||
|
</el-dropdown-menu> |
||||
|
</el-dropdown> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import bus from '../common/bus'; |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
collapse: false, |
||||
|
fullscreen: false, |
||||
|
name: 'linxin', |
||||
|
message: 2 |
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
username() { |
||||
|
let username = localStorage.getItem('ms_username'); |
||||
|
return username ? username : this.name; |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
// 用户名下拉菜单选择事件 |
||||
|
handleCommand(command) { |
||||
|
if (command == 'loginout') { |
||||
|
localStorage.removeItem('ms_username'); |
||||
|
this.$router.push('/login'); |
||||
|
} |
||||
|
}, |
||||
|
// 侧边栏折叠 |
||||
|
collapseChage() { |
||||
|
this.collapse = !this.collapse; |
||||
|
bus.$emit('collapse', this.collapse); |
||||
|
}, |
||||
|
// 全屏事件 |
||||
|
handleFullScreen() { |
||||
|
let element = document.documentElement; |
||||
|
if (this.fullscreen) { |
||||
|
if (document.exitFullscreen) { |
||||
|
document.exitFullscreen(); |
||||
|
} else if (document.webkitCancelFullScreen) { |
||||
|
document.webkitCancelFullScreen(); |
||||
|
} else if (document.mozCancelFullScreen) { |
||||
|
document.mozCancelFullScreen(); |
||||
|
} else if (document.msExitFullscreen) { |
||||
|
document.msExitFullscreen(); |
||||
|
} |
||||
|
} else { |
||||
|
if (element.requestFullscreen) { |
||||
|
element.requestFullscreen(); |
||||
|
} else if (element.webkitRequestFullScreen) { |
||||
|
element.webkitRequestFullScreen(); |
||||
|
} else if (element.mozRequestFullScreen) { |
||||
|
element.mozRequestFullScreen(); |
||||
|
} else if (element.msRequestFullscreen) { |
||||
|
// IE11 |
||||
|
element.msRequestFullscreen(); |
||||
|
} |
||||
|
} |
||||
|
this.fullscreen = !this.fullscreen; |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
if (document.body.clientWidth < 1500) { |
||||
|
this.collapseChage(); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.header { |
||||
|
position: relative; |
||||
|
box-sizing: border-box; |
||||
|
width: 100%; |
||||
|
height: 70px; |
||||
|
font-size: 22px; |
||||
|
color: #fff; |
||||
|
} |
||||
|
.collapse-btn { |
||||
|
float: left; |
||||
|
padding: 0 21px; |
||||
|
cursor: pointer; |
||||
|
line-height: 70px; |
||||
|
} |
||||
|
.header .logo { |
||||
|
float: left; |
||||
|
width: 250px; |
||||
|
line-height: 70px; |
||||
|
} |
||||
|
.header-right { |
||||
|
float: right; |
||||
|
padding-right: 50px; |
||||
|
} |
||||
|
.header-user-con { |
||||
|
display: flex; |
||||
|
height: 70px; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.btn-fullscreen { |
||||
|
transform: rotate(45deg); |
||||
|
margin-right: 5px; |
||||
|
font-size: 24px; |
||||
|
} |
||||
|
.btn-bell, |
||||
|
.btn-fullscreen { |
||||
|
position: relative; |
||||
|
width: 30px; |
||||
|
height: 30px; |
||||
|
text-align: center; |
||||
|
border-radius: 15px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.btn-bell-badge { |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
top: -2px; |
||||
|
width: 8px; |
||||
|
height: 8px; |
||||
|
border-radius: 4px; |
||||
|
background: #f56c6c; |
||||
|
color: #fff; |
||||
|
} |
||||
|
.btn-bell .el-icon-bell { |
||||
|
color: #fff; |
||||
|
} |
||||
|
.user-name { |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
.user-avator { |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
.user-avator img { |
||||
|
display: block; |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
.el-dropdown-link { |
||||
|
color: #fff; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.el-dropdown-menu__item { |
||||
|
text-align: center; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,51 @@ |
|||||
|
<template> |
||||
|
<div class="wrapper"> |
||||
|
<v-head></v-head> |
||||
|
<v-sidebar></v-sidebar> |
||||
|
<div class="content-box" :class="{'content-collapse':collapse}"> |
||||
|
<v-tags></v-tags> |
||||
|
<div class="content"> |
||||
|
<transition name="move" mode="out-in"> |
||||
|
<keep-alive :include="tagsList"> |
||||
|
<router-view></router-view> |
||||
|
</keep-alive> |
||||
|
</transition> |
||||
|
<el-backtop target=".content"></el-backtop> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import vHead from './Header.vue'; |
||||
|
import vSidebar from './Sidebar.vue'; |
||||
|
import vTags from './Tags.vue'; |
||||
|
import bus from './bus'; |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
tagsList: [], |
||||
|
collapse: false |
||||
|
}; |
||||
|
}, |
||||
|
components: { |
||||
|
vHead, |
||||
|
vSidebar, |
||||
|
vTags |
||||
|
}, |
||||
|
created() { |
||||
|
bus.$on('collapse-content', msg => { |
||||
|
this.collapse = msg; |
||||
|
}); |
||||
|
|
||||
|
// 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。 |
||||
|
bus.$on('tags', msg => { |
||||
|
let arr = []; |
||||
|
for (let i = 0, len = msg.length; i < len; i++) { |
||||
|
msg[i].name && arr.push(msg[i].name); |
||||
|
} |
||||
|
this.tagsList = arr; |
||||
|
}); |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
@ -0,0 +1,354 @@ |
|||||
|
<template> |
||||
|
<div class="sidebar"> |
||||
|
<el-menu |
||||
|
class="sidebar-el-menu" |
||||
|
:default-active="onRoutes" |
||||
|
:collapse="collapse" |
||||
|
background-color="#324157" |
||||
|
text-color="#bfcbd9" |
||||
|
active-text-color="#20a0ff" |
||||
|
unique-opened |
||||
|
router |
||||
|
> |
||||
|
<template v-for="item in items"> |
||||
|
<template v-if="item.subs"> |
||||
|
<el-submenu :index="item.index" :key="item.index"> |
||||
|
<template slot="title"> |
||||
|
<i :class="item.icon"></i> |
||||
|
<span slot="title">{{ item.title }}</span> |
||||
|
</template> |
||||
|
<template v-for="subItem in item.subs"> |
||||
|
<el-submenu |
||||
|
v-if="subItem.subs" |
||||
|
:index="subItem.index" |
||||
|
:key="subItem.index" |
||||
|
> |
||||
|
<template slot="title">{{ subItem.title }}</template> |
||||
|
<el-menu-item |
||||
|
v-for="(threeItem,i) in subItem.subs" |
||||
|
:key="i" |
||||
|
:index="threeItem.index" |
||||
|
>{{ threeItem.title }}</el-menu-item> |
||||
|
</el-submenu> |
||||
|
<el-menu-item |
||||
|
v-else |
||||
|
:index="subItem.index" |
||||
|
:key="subItem.index" |
||||
|
>{{ subItem.title }}</el-menu-item> |
||||
|
</template> |
||||
|
</el-submenu> |
||||
|
</template> |
||||
|
<template v-else> |
||||
|
<el-menu-item :index="item.index" :key="item.index"> |
||||
|
<i :class="item.icon"></i> |
||||
|
<span slot="title">{{ item.title }}</span> |
||||
|
</el-menu-item> |
||||
|
</template> |
||||
|
</template> |
||||
|
</el-menu> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import bus from '../common/bus'; |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
collapse: false, |
||||
|
items: [ |
||||
|
{ |
||||
|
icon: 'el-icon-lx-home', |
||||
|
index: '/dashboard', |
||||
|
title: '系统首页' |
||||
|
}, |
||||
|
{ |
||||
|
icon: 'el-icon-lx-cascades', |
||||
|
index: '1', |
||||
|
title: '账户管理', |
||||
|
subs:[ |
||||
|
{ |
||||
|
index: '/platformSelect', |
||||
|
title: '交易平台账户查询' |
||||
|
}, |
||||
|
{ |
||||
|
index: '/buyerReview', |
||||
|
title: '摘牌方开户审核' |
||||
|
}, |
||||
|
{ |
||||
|
index: '/businessAudit', |
||||
|
title: '挂牌方入驻审核' |
||||
|
}, |
||||
|
{ |
||||
|
index: '/thirdAudit', |
||||
|
title: '第三方服务机构审核' |
||||
|
}, |
||||
|
{ |
||||
|
index: '/blacklistManagement', |
||||
|
title: '黑名单管理' |
||||
|
}, |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
icon: 'el-icon-lx-copy', |
||||
|
index: '2', |
||||
|
title: '资产管理', |
||||
|
subs:[ |
||||
|
{ |
||||
|
index: '/assetQuery', |
||||
|
title: '资产信息查询' |
||||
|
}, |
||||
|
{ |
||||
|
index: '/groundingAudit', |
||||
|
title: '资产审核' |
||||
|
}, |
||||
|
{ |
||||
|
index: '/assessmentOreder', |
||||
|
title: '资产评估订单' |
||||
|
}, |
||||
|
{ |
||||
|
index: '/delistingAudit', |
||||
|
title: '摘牌申请审核' |
||||
|
}, |
||||
|
{ |
||||
|
index: '/payReview', |
||||
|
title: '挂牌费支付审核' |
||||
|
}, |
||||
|
// { |
||||
|
// index: '/releaseAudit', |
||||
|
// title: '资产发布审核' |
||||
|
// }, |
||||
|
] |
||||
|
}, |
||||
|
// { |
||||
|
// icon: 'el-icon-lx-copy', |
||||
|
// index: 'tabs', |
||||
|
// title: 'tab选项卡' |
||||
|
// }, |
||||
|
{ |
||||
|
icon: 'el-icon-lx-calendar', |
||||
|
index: '3', |
||||
|
title: '交易管理', |
||||
|
subs:[ |
||||
|
{ |
||||
|
index: '/transactionQuery', |
||||
|
title: '交易订单查询' |
||||
|
}, |
||||
|
{ |
||||
|
index: '/TobepaidOrder', |
||||
|
title: '待付款订单' |
||||
|
}, |
||||
|
{ |
||||
|
index: '/publicityOrder', |
||||
|
title: '待审核付款订单' |
||||
|
}, |
||||
|
{ |
||||
|
index: '/settlementOrder', |
||||
|
title: '待上传签约合同订单' |
||||
|
}, |
||||
|
{ |
||||
|
index: '/refundOrderExamine', |
||||
|
title: '待确认签约合同订单' |
||||
|
}, |
||||
|
{ |
||||
|
index: '/toBeDelivered', |
||||
|
title: '待交付订单' |
||||
|
}, |
||||
|
{ |
||||
|
index: '/toBeConfirmDelivered', |
||||
|
title: '待确认交付订单' |
||||
|
}, |
||||
|
{ |
||||
|
index: '/toBeSettled', |
||||
|
title: '待结算订单' |
||||
|
}, |
||||
|
{ |
||||
|
index: '/completed', |
||||
|
title: '已完成订单' |
||||
|
}, |
||||
|
{ |
||||
|
index: '/closed', |
||||
|
title: '已关闭订单' |
||||
|
}, |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
icon: 'el-icon-lx-calendar', |
||||
|
index: '4', |
||||
|
title: '运营管理', |
||||
|
subs:[ |
||||
|
{ |
||||
|
index: '/customerOpinion', |
||||
|
title: '客户意见处理' |
||||
|
}, |
||||
|
{ |
||||
|
index: '/bannerConfigure', |
||||
|
title: 'banner配置' |
||||
|
}, |
||||
|
{ |
||||
|
index: '/feedConfigure', |
||||
|
title: 'feed配置' |
||||
|
}, |
||||
|
{ |
||||
|
index: '/announcementConfiguration', |
||||
|
title: '通知公告配置' |
||||
|
}, |
||||
|
{ |
||||
|
index: '/assetsConfigure', |
||||
|
title: '资产推荐配置' |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
icon: 'el-icon-lx-calendar', |
||||
|
index: '5', |
||||
|
title: '数据管理', |
||||
|
subs:[ |
||||
|
{ |
||||
|
index: '/transactionCheck', |
||||
|
title: '交易账单核对' |
||||
|
}, |
||||
|
{ |
||||
|
index: '/transactionAnalysis', |
||||
|
title: '账户交易分析' |
||||
|
}, |
||||
|
// { |
||||
|
// index: '/revenueStatistics', |
||||
|
// title: '平台收益统计' |
||||
|
// } |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
icon: 'el-icon-lx-calendar', |
||||
|
index: '/platform ', |
||||
|
title: '平台管理', |
||||
|
subs:[ |
||||
|
{ |
||||
|
index: '/platform/operationAccountManagement', |
||||
|
title: '运营账号管理' |
||||
|
}, |
||||
|
{ |
||||
|
index: '/platformNotification', |
||||
|
title: '平台通知管理' |
||||
|
}, |
||||
|
// { |
||||
|
// index: '/revenueStatistics', |
||||
|
// title: '平台收益统计' |
||||
|
// } |
||||
|
] |
||||
|
}, |
||||
|
// { |
||||
|
// icon: 'el-icon-lx-calendar', |
||||
|
// index: '3', |
||||
|
// title: '表单相关', |
||||
|
// subs: [ |
||||
|
// { |
||||
|
// index: 'form', |
||||
|
// title: '基本表单' |
||||
|
// }, |
||||
|
// { |
||||
|
// index: '3-2', |
||||
|
// title: '三级菜单', |
||||
|
// subs: [ |
||||
|
// { |
||||
|
// index: 'editor', |
||||
|
// title: '富文本编辑器' |
||||
|
// }, |
||||
|
// { |
||||
|
// index: 'markdown', |
||||
|
// title: 'markdown编辑器' |
||||
|
// } |
||||
|
// ] |
||||
|
// }, |
||||
|
// { |
||||
|
// index: 'upload', |
||||
|
// title: '文件上传' |
||||
|
// } |
||||
|
// ] |
||||
|
// }, |
||||
|
// { |
||||
|
// icon: 'el-icon-lx-emoji', |
||||
|
// index: 'icon', |
||||
|
// title: '自定义图标' |
||||
|
// }, |
||||
|
// { |
||||
|
// icon: 'el-icon-pie-chart', |
||||
|
// index: 'charts', |
||||
|
// title: 'schart图表' |
||||
|
// }, |
||||
|
// { |
||||
|
// icon: 'el-icon-rank', |
||||
|
// index: '6', |
||||
|
// title: '拖拽组件', |
||||
|
// subs: [ |
||||
|
// { |
||||
|
// index: 'drag', |
||||
|
// title: '拖拽列表' |
||||
|
// }, |
||||
|
// { |
||||
|
// index: 'dialog', |
||||
|
// title: '拖拽弹框' |
||||
|
// } |
||||
|
// ] |
||||
|
// }, |
||||
|
// { |
||||
|
// icon: 'el-icon-lx-global', |
||||
|
// index: 'i18n', |
||||
|
// title: '国际化功能' |
||||
|
// }, |
||||
|
// { |
||||
|
// icon: 'el-icon-lx-warn', |
||||
|
// index: '7', |
||||
|
// title: '错误处理', |
||||
|
// subs: [ |
||||
|
// { |
||||
|
// index: 'permission', |
||||
|
// title: '权限测试' |
||||
|
// }, |
||||
|
// { |
||||
|
// index: '404', |
||||
|
// title: '404页面' |
||||
|
// } |
||||
|
// ] |
||||
|
// }, |
||||
|
// { |
||||
|
// icon: 'el-icon-lx-redpacket_fill', |
||||
|
// index: '/donate', |
||||
|
// title: '支持作者' |
||||
|
// } |
||||
|
] |
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
onRoutes() { |
||||
|
return this.$route.path.replace('/', ''); |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
// 通过 Event Bus 进行组件间通信，来折叠侧边栏 |
||||
|
bus.$on('collapse', msg => { |
||||
|
this.collapse = msg; |
||||
|
bus.$emit('collapse-content', msg); |
||||
|
}); |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.sidebar { |
||||
|
display: block; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 70px; |
||||
|
bottom: 0; |
||||
|
overflow-y: scroll; |
||||
|
} |
||||
|
.sidebar::-webkit-scrollbar { |
||||
|
width: 0; |
||||
|
} |
||||
|
.sidebar-el-menu:not(.el-menu--collapse) { |
||||
|
width: 250px; |
||||
|
} |
||||
|
.sidebar > ul { |
||||
|
height: 100%; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,194 @@ |
|||||
|
<template> |
||||
|
<div class="tags" v-if="showTags"> |
||||
|
<ul> |
||||
|
<li class="tags-li" v-for="(item,index) in tagsList" :class="{'active': isActive(item.path)}" :key="index"> |
||||
|
<router-link :to="item.path" class="tags-li-title"> |
||||
|
{{item.title}} |
||||
|
</router-link> |
||||
|
<span class="tags-li-icon" @click="closeTags(index)"><i class="el-icon-close"></i></span> |
||||
|
</li> |
||||
|
</ul> |
||||
|
<div class="tags-close-box"> |
||||
|
<el-dropdown @command="handleTags"> |
||||
|
<el-button size="mini" type="primary"> |
||||
|
标签选项<i class="el-icon-arrow-down el-icon--right"></i> |
||||
|
</el-button> |
||||
|
<el-dropdown-menu size="small" slot="dropdown"> |
||||
|
<el-dropdown-item command="other">关闭其他</el-dropdown-item> |
||||
|
<el-dropdown-item command="all">关闭所有</el-dropdown-item> |
||||
|
</el-dropdown-menu> |
||||
|
</el-dropdown> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import bus from './bus'; |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
tagsList: [] |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
isActive(path) { |
||||
|
let path1=(path.split("/"))[1] |
||||
|
let path2=(this.$route.fullPath.split("/"))[1] |
||||
|
return path1 === path2; |
||||
|
}, |
||||
|
// 关闭单个标签 |
||||
|
closeTags(index) { |
||||
|
const delItem = this.tagsList.splice(index, 1)[0]; |
||||
|
const item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1]; |
||||
|
if (item) { |
||||
|
delItem.path === this.$route.fullPath && this.$router.push(item.path); |
||||
|
}else{ |
||||
|
this.$router.push('/'); |
||||
|
} |
||||
|
}, |
||||
|
// 关闭全部标签 |
||||
|
closeAll(){ |
||||
|
this.tagsList = []; |
||||
|
this.$router.push('/'); |
||||
|
}, |
||||
|
// 关闭其他标签 |
||||
|
closeOther(){ |
||||
|
const curItem = this.tagsList.filter(item => { |
||||
|
return item.path === this.$route.fullPath; |
||||
|
}) |
||||
|
this.tagsList = curItem; |
||||
|
}, |
||||
|
// 设置标签 |
||||
|
setTags(route){ |
||||
|
const isExist = this.tagsList.some(item => { |
||||
|
return item.path === route.fullPath; |
||||
|
}) |
||||
|
let type=true; |
||||
|
if(!isExist){ |
||||
|
if(this.tagsList.length >= 8){ |
||||
|
this.tagsList.shift(); |
||||
|
} |
||||
|
this.tagsList.map(res=>{ |
||||
|
if(res.title==route.meta.title)type= false |
||||
|
}) |
||||
|
if(type){ |
||||
|
this.tagsList.push({ |
||||
|
title: route.meta.title, |
||||
|
path: route.fullPath, |
||||
|
name: route.matched[1].components.default.name |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
bus.$emit('tags', this.tagsList); |
||||
|
}, |
||||
|
handleTags(command){ |
||||
|
command === 'other' ? this.closeOther() : this.closeAll(); |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
showTags() { |
||||
|
return this.tagsList.length > 0; |
||||
|
} |
||||
|
}, |
||||
|
watch:{ |
||||
|
$route(newValue, oldValue){ |
||||
|
this.setTags(newValue); |
||||
|
} |
||||
|
}, |
||||
|
created(){ |
||||
|
this.setTags(this.$route); |
||||
|
// 监听关闭当前页面的标签页 |
||||
|
bus.$on('close_current_tags', () => { |
||||
|
for (let i = 0, len = this.tagsList.length; i < len; i++) { |
||||
|
const item = this.tagsList[i]; |
||||
|
if(item.path === this.$route.fullPath){ |
||||
|
if(i < len - 1){ |
||||
|
this.$router.push(this.tagsList[i+1].path); |
||||
|
}else if(i > 0){ |
||||
|
this.$router.push(this.tagsList[i-1].path); |
||||
|
}else{ |
||||
|
this.$router.push('/'); |
||||
|
} |
||||
|
this.tagsList.splice(i, 1); |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
|
||||
|
<style> |
||||
|
.tags { |
||||
|
position: relative; |
||||
|
height: 30px; |
||||
|
overflow: hidden; |
||||
|
background: #fff; |
||||
|
padding-right: 120px; |
||||
|
box-shadow: 0 5px 10px #ddd; |
||||
|
} |
||||
|
|
||||
|
.tags ul { |
||||
|
box-sizing: border-box; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.tags-li { |
||||
|
float: left; |
||||
|
margin: 3px 5px 2px 3px; |
||||
|
border-radius: 3px; |
||||
|
font-size: 12px; |
||||
|
overflow: hidden; |
||||
|
cursor: pointer; |
||||
|
height: 23px; |
||||
|
line-height: 23px; |
||||
|
border: 1px solid #e9eaec; |
||||
|
background: #fff; |
||||
|
padding: 0 5px 0 12px; |
||||
|
vertical-align: middle; |
||||
|
color: #666; |
||||
|
-webkit-transition: all .3s ease-in; |
||||
|
-moz-transition: all .3s ease-in; |
||||
|
transition: all .3s ease-in; |
||||
|
} |
||||
|
|
||||
|
.tags-li:not(.active):hover { |
||||
|
background: #f8f8f8; |
||||
|
} |
||||
|
|
||||
|
.tags-li.active { |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.tags-li-title { |
||||
|
float: left; |
||||
|
max-width: 80px; |
||||
|
overflow: hidden; |
||||
|
white-space: nowrap; |
||||
|
text-overflow: ellipsis; |
||||
|
margin-right: 5px; |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
|
.tags-li.active .tags-li-title { |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.tags-close-box { |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
top: 0; |
||||
|
box-sizing: border-box; |
||||
|
padding-top: 1px; |
||||
|
text-align: center; |
||||
|
width: 110px; |
||||
|
height: 30px; |
||||
|
background: #fff; |
||||
|
box-shadow: -3px 0 15px 3px rgba(0, 0, 0, .1); |
||||
|
z-index: 10; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,6 @@ |
|||||
|
import Vue from 'vue'; |
||||
|
|
||||
|
// 使用 Event Bus
|
||||
|
const bus = new Vue(); |
||||
|
|
||||
|
export default bus; |
||||
@ -0,0 +1,143 @@ |
|||||
|
<template> |
||||
|
<div class="body1 body2"> |
||||
|
<div class="idcard"> |
||||
|
<p class="title">{{contentDatas.account_type==1?'法人身份证正面(照片面)' :'身份证正面(照片面)'}}</p> |
||||
|
<img v-if="contentDatas.account_type==2 ? contentDatas.user_card_front.type==0 :contentDatas.legal_card_front.type==0" :src="contentDatas.account_type==2 ? contentDatas.user_card_front.url :contentDatas.legal_card_front.url" class="file_img1"> |
||||
|
<p class="upload_span" v-else> |
||||
|
<a class="table_right_item_a" :href="contentDatas.account_type==2 ? contentDatas.user_card_front.url :contentDatas.legal_card_front.url" target="_blank" rel="nofollow">点击下载</a> |
||||
|
</p> |
||||
|
<div class="img_span"> |
||||
|
<span |
||||
|
v-if="contentDatas.account_type==2 ? contentDatas.user_card_front.type==0 :contentDatas.legal_card_front.type==0" |
||||
|
@click="onPreview(contentDatas.account_type==2 ? [contentDatas.user_card_backfacade.url] :[contentDatas.legal_card_front.url])">查看原图</span> |
||||
|
<el-upload |
||||
|
class="upload-demo" |
||||
|
:action="action" |
||||
|
:on-change="fileChange" |
||||
|
:show-file-list="false" |
||||
|
:on-error="handleAvatarError" |
||||
|
list-type="picture" |
||||
|
:on-success="(res,file)=>{handleAvatarSuccess(res,file,0)}" |
||||
|
> |
||||
|
<span class="upload_span">重新上传</span> |
||||
|
</el-upload> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="idcard"> |
||||
|
<p class="title">{{contentDatas.account_type==1?'法人身份证反面(发证机构面)' :'身份证反面(发证机构面)'}}</p> |
||||
|
<img |
||||
|
v-if="contentDatas.account_type==2 ? contentDatas.user_card_backfacade.type==0 :contentDatas.legal_certificate.type==0" |
||||
|
:src="contentDatas.account_type==2 ? contentDatas.user_card_backfacade.url :contentDatas.legal_certificate.url" class="file_img1"> |
||||
|
<p class="upload_span" v-else> |
||||
|
<a class="table_right_item_a" :href="contentDatas.account_type==2 ? contentDatas.user_card_backfacade.url :contentDatas.legal_certificate.url" target="_blank" rel="nofollow">点击下载</a> |
||||
|
</p> |
||||
|
<div class="img_span"> |
||||
|
<span |
||||
|
v-if="contentDatas.account_type==2 ? contentDatas.user_card_backfacade.type==0 :contentDatas.legal_certificate.type==0" |
||||
|
@click="onPreview(contentDatas.account_type==2 ? [contentDatas.user_card_backfacade.url] :[contentDatas.legal_certificate.url])">查看原图</span> |
||||
|
<el-upload |
||||
|
class="upload-demo" |
||||
|
:action="action" |
||||
|
:on-change="fileChange" |
||||
|
:show-file-list="false" |
||||
|
:on-error="handleAvatarError" |
||||
|
list-type="picture" |
||||
|
:on-success="(res,file)=>{handleAvatarSuccess(res,file,1)}" |
||||
|
> |
||||
|
<span class="upload_span">重新上传</span> |
||||
|
</el-upload> |
||||
|
</div> |
||||
|
</div> |
||||
|
<el-image-viewer |
||||
|
v-if="showViewer" |
||||
|
:on-close="closeViewer" |
||||
|
:url-list="img_url" |
||||
|
:z-index="9999" |
||||
|
/> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import bus from '../../bus' |
||||
|
export default { |
||||
|
props:{ |
||||
|
contentDatas:{ |
||||
|
require: true |
||||
|
} |
||||
|
}, |
||||
|
components: { |
||||
|
ElImageViewer: () => import('element-ui/packages/image/src/image-viewer') |
||||
|
}, |
||||
|
data() { |
||||
|
return{ |
||||
|
host:'http://wenhua.xingtongworld.com', |
||||
|
action:'http://wenhua.xingtongworld.com/api/Index/uploadFile', |
||||
|
showViewer : false, |
||||
|
img_url:[] |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
onPreview(img) { |
||||
|
this.img_url = img |
||||
|
this.showViewer = true |
||||
|
}, |
||||
|
// 关闭查看器 |
||||
|
closeViewer() { |
||||
|
this.showViewer = false |
||||
|
}, |
||||
|
handleAvatarError(){ |
||||
|
this.$message.error('文件上传失败！'); |
||||
|
}, |
||||
|
handleAvatarSuccess(res,file,type){ |
||||
|
console.info(res) |
||||
|
if(res.code==1){ |
||||
|
const typeArr1 = ['application/pdf']; |
||||
|
const isJPG1 = typeArr1.indexOf(file.raw.type) !== -1; |
||||
|
let file_type; |
||||
|
if (isJPG1) { |
||||
|
file_type=1 |
||||
|
}else{ |
||||
|
file_type=0 |
||||
|
} |
||||
|
let upDate={ |
||||
|
url:{url:{url:this.host+res.data.img_url,type:file_type},type:file_type}, |
||||
|
key:'' |
||||
|
} |
||||
|
if (type==0 ) { |
||||
|
if (this.contentDatas.account_type==2) { |
||||
|
upDate.key='user_card_front' |
||||
|
}else{ |
||||
|
upDate.key='legal_card_front' |
||||
|
} |
||||
|
}else{ |
||||
|
if (this.contentDatas.account_type==2) { |
||||
|
upDate.key='user_card_backfacade' |
||||
|
}else{ |
||||
|
upDate.key='legal_certificate' |
||||
|
} |
||||
|
} |
||||
|
bus.$emit('img', upDate); |
||||
|
this.$message.success('文件上传成功！'); |
||||
|
} |
||||
|
}, |
||||
|
fileChange(file){ |
||||
|
const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg','application/pdf']; |
||||
|
const isJPG = typeArr.indexOf(file.raw.type) !== -1; |
||||
|
const isLt3M = file.size / 1024 / 1024 < 10; |
||||
|
if (!isJPG) { |
||||
|
this.$message.error('只能上传图片和PDF文件!'); |
||||
|
this.$refs.upload.clearFiles(); |
||||
|
return; |
||||
|
} |
||||
|
if (!isLt3M) { |
||||
|
this.$message.error('上传图片大小不能超过 10MB!'); |
||||
|
this.$refs.upload.clearFiles(); |
||||
|
// this.$set(this.query, 'goods_img', ''); |
||||
|
return; |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
@import url('../../../../assets/css/sidebar.css'); |
||||
|
</style> |
||||
@ -0,0 +1,104 @@ |
|||||
|
<template> |
||||
|
<div class="body1"> |
||||
|
<p class="title">数字证书申请表</p> |
||||
|
<img v-if="contentDatas.number_certificate.type==0" :src="contentDatas.number_certificate.url" class="file_img"> |
||||
|
<p class="upload_span" v-else> |
||||
|
<a class="table_right_item_a" :href="contentDatas.number_certificate.url" target="_blank" rel="nofollow">点击下载</a> |
||||
|
</p> |
||||
|
<div class="img_span"> |
||||
|
<span @click="onPreview([contentDatas.number_certificate.url])" v-if="contentDatas.number_certificate.type==0">查看原图</span> |
||||
|
<p class="upload_span" v-else> |
||||
|
<a class="table_right_item_a" :href="contentDatas.number_certificate.url" target="_blank" rel="nofollow">点击下载</a> |
||||
|
</p> |
||||
|
<el-upload |
||||
|
class="upload-demo" |
||||
|
:action="action" |
||||
|
:on-change="fileChange" |
||||
|
:show-file-list="false" |
||||
|
:on-error="handleAvatarError" |
||||
|
list-type="picture" |
||||
|
:on-success="(res,file)=>{handleAvatarSuccess(res,file,0)}" |
||||
|
> |
||||
|
<span class="upload_span">重新上传</span> |
||||
|
</el-upload> |
||||
|
</div> |
||||
|
<el-image-viewer |
||||
|
v-if="showViewer" |
||||
|
:on-close="closeViewer" |
||||
|
:url-list="img_url" |
||||
|
:z-index="9999" |
||||
|
/> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import bus from '../../bus' |
||||
|
export default { |
||||
|
props:{ |
||||
|
contentDatas:{ |
||||
|
require: true |
||||
|
} |
||||
|
}, |
||||
|
components: { |
||||
|
ElImageViewer: () => import('element-ui/packages/image/src/image-viewer') |
||||
|
}, |
||||
|
data() { |
||||
|
return{ |
||||
|
host:'http://wenhua.xingtongworld.com', |
||||
|
action:'http://wenhua.xingtongworld.com/api/Index/uploadFile', |
||||
|
showViewer:false, |
||||
|
img_url:[] |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
onPreview(img) { |
||||
|
this.img_url = img |
||||
|
this.showViewer = true |
||||
|
}, |
||||
|
// 关闭查看器 |
||||
|
closeViewer() { |
||||
|
this.showViewer = false |
||||
|
}, |
||||
|
handleAvatarError(){ |
||||
|
this.$message.error('文件上传失败！'); |
||||
|
}, |
||||
|
handleAvatarSuccess(res,file,type){ |
||||
|
console.info(res) |
||||
|
if(res.code==1){ |
||||
|
const typeArr1 = ['application/pdf']; |
||||
|
const isJPG1 = typeArr1.indexOf(file.raw.type) !== -1; |
||||
|
let file_type; |
||||
|
if (isJPG1) { |
||||
|
file_type=1 |
||||
|
}else{ |
||||
|
file_type=0 |
||||
|
} |
||||
|
let upDate={ |
||||
|
url:{url:{url:this.host+res.data.img_url,type:file_type},type:file_type}, |
||||
|
key:'number_certificate' |
||||
|
} |
||||
|
bus.$emit('img', upDate); |
||||
|
this.$message.success('文件上传成功！'); |
||||
|
} |
||||
|
}, |
||||
|
fileChange(file){ |
||||
|
const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg','application/pdf']; |
||||
|
const isJPG = typeArr.indexOf(file.raw.type) !== -1; |
||||
|
const isLt3M = file.size / 1024 / 1024 < 10; |
||||
|
if (!isJPG) { |
||||
|
this.$message.error('只能上传图片和PDF文件!'); |
||||
|
this.$refs.upload.clearFiles(); |
||||
|
return; |
||||
|
} |
||||
|
if (!isLt3M) { |
||||
|
this.$message.error('上传图片大小不能超过 10MB!'); |
||||
|
this.$refs.upload.clearFiles(); |
||||
|
// this.$set(this.query, 'goods_img', ''); |
||||
|
return; |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
@import url('../../../../assets/css/sidebar.css'); |
||||
|
</style> |
||||
@ -0,0 +1,29 @@ |
|||||
|
<template> |
||||
|
<div class="body1"> |
||||
|
<p class="title">{{contentDatas.account_type==2?'个人风险评估':'企业风险评估'}}</p> |
||||
|
<a class="download" :href="contentDatas.risk_doc">下载报告</a> |
||||
|
<!-- <img src="" alt="" class="file_img"> --> |
||||
|
<iframe :src="contentDatas.risk_url" frameborder="0" class="file_img" style="width: 100%;" ref="helpNestedFrame" id="helpNestedFrame"></iframe> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
|
||||
|
export default { |
||||
|
props:{ |
||||
|
contentDatas:{ |
||||
|
require: true |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return{ |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
@import url('../../../../assets/css/sidebar.css'); |
||||
|
.file_img{ |
||||
|
height: 440px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,98 @@ |
|||||
|
<template> |
||||
|
<div class="body1"> |
||||
|
<p class="title">资产评估/资产评价报告</p> |
||||
|
<img :src="host+'/'+contentDatas.asset_data.asset_report_img" class="file_img" v-if="contentDatas.asset_data.asset_report_img"> |
||||
|
<div class="img_span"> |
||||
|
<span @click="onPreview([host+'/'+contentDatas.asset_data.asset_report_img])" v-if="contentDatas.asset_data.asset_report_img">在线预览</span> |
||||
|
<el-upload |
||||
|
class="upload-demo" |
||||
|
:action="action" |
||||
|
:show-file-list="false" |
||||
|
:on-error="handleAvatarError" |
||||
|
list-type="picture" |
||||
|
:on-success="(res)=>{handleAvatarSuccess(res)}" |
||||
|
> |
||||
|
<span class="upload_span">{{contentDatas.asset_data.asset_report==null?'上传文件':'重新上传'}}</span> |
||||
|
</el-upload> |
||||
|
<a :href="contentDatas.asset_data.asset_report" v-if="contentDatas.asset_data.asset_report">下载文件</a> |
||||
|
</div> |
||||
|
<el-image-viewer |
||||
|
v-if="showViewer" |
||||
|
:on-close="closeViewer" |
||||
|
:url-list="img_url" |
||||
|
:z-index="9999" |
||||
|
/> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import bus from '../../bus' |
||||
|
import {assetAssessReport} from '../../../../api/index' |
||||
|
export default { |
||||
|
props:{ |
||||
|
contentDatas:{ |
||||
|
require: true |
||||
|
} |
||||
|
}, |
||||
|
components: { |
||||
|
ElImageViewer: () => import('element-ui/packages/image/src/image-viewer') |
||||
|
}, |
||||
|
data() { |
||||
|
return{ |
||||
|
host:'http://wenhua.xingtongworld.com', |
||||
|
action:'http://wenhua.xingtongworld.com/api/Index/uploadFile', |
||||
|
showViewer:false, |
||||
|
img_url:[], |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
// 上传资产评估报告 |
||||
|
assetAssessReport(url){ |
||||
|
let data={ |
||||
|
id:this.contentDatas.asset_data.id, |
||||
|
report:url |
||||
|
} |
||||
|
assetAssessReport(data).then(res => { |
||||
|
console.log(res); |
||||
|
if (res.code==100) { |
||||
|
this.$message.success('提交成功~'); |
||||
|
bus.$emit('getDate'); |
||||
|
}else{ |
||||
|
this.$message.error(res.msg); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
onPreview(img) { |
||||
|
this.img_url = img |
||||
|
this.showViewer = true |
||||
|
}, |
||||
|
// 关闭查看器 |
||||
|
closeViewer() { |
||||
|
this.showViewer = false |
||||
|
}, |
||||
|
handleAvatarError(){ |
||||
|
this.$message.error('文件上传失败！'); |
||||
|
}, |
||||
|
handleAvatarSuccess(res,file,type){ |
||||
|
console.info(res) |
||||
|
if(res.code==1){ |
||||
|
let contract=this.host+res.data.img_url; |
||||
|
// bus.$emit('file', contract); |
||||
|
this.assetAssessReport(contract) |
||||
|
|
||||
|
}else{ |
||||
|
this.$message.error(res.msg); |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
@import url('../../../../assets/css/sidebar.css'); |
||||
|
.img_span{ |
||||
|
width: 200px; |
||||
|
} |
||||
|
.img_span a{ |
||||
|
font-size: 14px; |
||||
|
color: #4E73E4; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,108 @@ |
|||||
|
<template> |
||||
|
<div class="body1"> |
||||
|
<p class="title">资产证明文件</p> |
||||
|
<img v-if="contentDatas.asset_certificate.type==0" :src="contentDatas.asset_certificate.url" class="file_img" > |
||||
|
<p class="upload_span" v-else> |
||||
|
<a class="table_right_item_a" :href="contentDatas.number_certificate.url" target="_blank" rel="nofollow">点击下载</a> |
||||
|
</p> |
||||
|
<!-- <img :src="contentDatas.asset_certificate" class="file_img" v-if="contentDatas.account_type==1"> |
||||
|
<img :src="contentDatas.asset_trusteeship" class="file_img" v-else-if="contentDatas.account_type==2"> --> |
||||
|
<div class="img_span"> |
||||
|
<span v-if="contentDatas.asset_certificate.type==0" @click="onPreview([contentDatas.asset_certificate.url])" >查看原图</span> |
||||
|
<p class="upload_span" v-else> |
||||
|
<a class="table_right_item_a" :href="contentDatas.number_certificate.url" target="_blank" rel="nofollow">点击下载</a> |
||||
|
</p> |
||||
|
<!-- <span @click="onPreview([contentDatas.asset_certificate])" v-if="contentDatas.account_type==1">查看原图</span> |
||||
|
<span @click="onPreview([contentDatas.asset_trusteeship])" v-else-if="contentDatas.account_type==2">查看原图</span> --> |
||||
|
<el-upload |
||||
|
class="upload-demo" |
||||
|
:action="action" |
||||
|
:on-change="fileChange" |
||||
|
:show-file-list="false" |
||||
|
:on-error="handleAvatarError" |
||||
|
list-type="picture" |
||||
|
:on-success="(res,file)=>{handleAvatarSuccess(res,file,0)}" |
||||
|
> |
||||
|
<span class="upload_span">重新上传</span> |
||||
|
</el-upload> |
||||
|
</div> |
||||
|
<el-image-viewer |
||||
|
v-if="showViewer" |
||||
|
:on-close="closeViewer" |
||||
|
:url-list="img_url" |
||||
|
:z-index="9999" |
||||
|
/> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import bus from '../../bus' |
||||
|
export default { |
||||
|
props:{ |
||||
|
contentDatas:{ |
||||
|
require: true |
||||
|
} |
||||
|
}, |
||||
|
components: { |
||||
|
ElImageViewer: () => import('element-ui/packages/image/src/image-viewer') |
||||
|
}, |
||||
|
data() { |
||||
|
return{ |
||||
|
host:'http://wenhua.xingtongworld.com', |
||||
|
action:'http://wenhua.xingtongworld.com/api/Index/uploadFile', |
||||
|
showViewer:false, |
||||
|
img_url:[] |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
onPreview(img) { |
||||
|
this.img_url = img |
||||
|
this.showViewer = true |
||||
|
}, |
||||
|
// 关闭查看器 |
||||
|
closeViewer() { |
||||
|
this.showViewer = false |
||||
|
}, |
||||
|
handleAvatarError(){ |
||||
|
this.$message.error('文件上传失败！'); |
||||
|
}, |
||||
|
handleAvatarSuccess(res,file,type){ |
||||
|
console.info(res) |
||||
|
if(res.code==1){ |
||||
|
const typeArr1 = ['application/pdf']; |
||||
|
const isJPG1 = typeArr1.indexOf(file.raw.type) !== -1; |
||||
|
let file_type; |
||||
|
if (isJPG1) { |
||||
|
file_type=1 |
||||
|
}else{ |
||||
|
file_type=0 |
||||
|
} |
||||
|
let upDate={ |
||||
|
url:{url:this.host+res.data.img_url,type:file_type}, |
||||
|
key:'asset_certificate' |
||||
|
} |
||||
|
bus.$emit('img', upDate); |
||||
|
this.$message.success('文件上传成功！'); |
||||
|
} |
||||
|
}, |
||||
|
fileChange(file){ |
||||
|
const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg','application/pdf']; |
||||
|
const isJPG = typeArr.indexOf(file.raw.type) !== -1; |
||||
|
const isLt3M = file.size / 1024 / 1024 < 10; |
||||
|
if (!isJPG) { |
||||
|
this.$message.error('只能上传图片和PDF文件!'); |
||||
|
this.$refs.upload.clearFiles(); |
||||
|
return; |
||||
|
} |
||||
|
if (!isLt3M) { |
||||
|
this.$message.error('上传图片大小不能超过 10MB!'); |
||||
|
this.$refs.upload.clearFiles(); |
||||
|
// this.$set(this.query, 'goods_img', ''); |
||||
|
return; |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
@import url('../../../../assets/css/sidebar.css'); |
||||
|
</style> |
||||
@ -0,0 +1,106 @@ |
|||||
|
<template> |
||||
|
<div class="body1"> |
||||
|
<p class="title">资产概况</p> |
||||
|
<div class="img_span1"> |
||||
|
<span v-for="(item,index) in img_data " :key="index" @click="onPreview(img_data.url)">{{item.name}}（{{img_url.length }}）</span> |
||||
|
<el-image-viewer |
||||
|
v-if="showViewer" |
||||
|
:on-close="closeViewer" |
||||
|
:url-list="img_url" |
||||
|
:z-index="9999" |
||||
|
/> |
||||
|
</div> |
||||
|
<p class="p_info">资产名称：{{contentDatas.asset_data.serial_name}}</p> |
||||
|
<p class="p_info">资产类型：{{contentDatas.asset_data.serial_type_name}}</p> |
||||
|
<p class="p_info" v-if="contentDatas.asset_data.serial_type==8">标的其他类型（说明）：{{contentDatas.asset_data.serial_else_type}}</p> |
||||
|
<p class="p_info">转让价格：￥{{contentDatas.asset_data.price}}元/{{contentDatas.asset_data.asset_unit}}</p> |
||||
|
<p class="p_info">涉及数量：{{contentDatas.asset_data.count}}</p> |
||||
|
<p class="p_info">标的描述：{{contentDatas.asset_data.serial_describe}}</p> |
||||
|
<p class="p_info" v-if="contentDatas.asset_data.serial_guaranty">标的抵押情况：{{contentDatas.asset_data.serial_guaranty}}</p> |
||||
|
|
||||
|
|
||||
|
<p class="p_info">信息公告期限：{{contentDatas.asset_data.info_notice_start_time}}-{{contentDatas.asset_data.info_notice_end_time}}</p> |
||||
|
<p class="p_info">支付方式：{{contentDatas.asset_data.payment_way==1?'一次性付款':'分期付款'}}</p> |
||||
|
<p class="p_info">成交价款支付期限：{{contentDatas.asset_data.payment_day}}天</p> |
||||
|
<p class="p_info">摘牌方资格条件：{{contentDatas.asset_data.buy_condition }}</p> |
||||
|
|
||||
|
|
||||
|
<!-- <p class="p_info">是否要保证金：{{contentDatas.asset_data.is_earnest_money==0?'否':'是' }}</p> |
||||
|
<template v-if="contentDatas.asset_data.is_earnest_money==1"> |
||||
|
<p class="p_info">保证金：{{contentDatas.asset_data.earnest_money }}元</p> |
||||
|
<p class="p_info">交保证金方式：{{contentDatas.asset_data.submit_earnestmoney_type==1?'意向摘牌方在提交摘牌申请时交纳保证金':'意向摘牌方经资格确认后'+contentDatas.asset_data.submit_earnestmoney_day+'个工作日内交纳' }}</p> |
||||
|
<p class="p_info">交纳方式：{{contentDatas.asset_data.submit_earnestmoney_way==1?'支票':contentDatas.asset_data.submit_earnestmoney_way==2?'电汇':'网上转账' }}</p> |
||||
|
<p class="p_info">退回方式：{{contentDatas.asset_data.earnestmoney_dispose ==1?'直接退回':'成功摘牌后转为成交价款的一部分'}}</p> |
||||
|
</template> --> |
||||
|
<p class="p_info" v-if="contentDatas.asset_data.announcements">其他披露事项：{{contentDatas.asset_data.announcements }}</p> |
||||
|
<p class="p_info" v-if="contentDatas.asset_data.hotline">咨询电话：{{contentDatas.asset_data.hotline }}</p> |
||||
|
<p class="p_info" v-if="contentDatas.asset_data.delist_file_doc!=null && contentDatas.asset_data.delist_file_doc!=''"> |
||||
|
摘牌申请详情： |
||||
|
<a :href="contentDatas.asset_data.delist_file_doc" class="p_info_a" target="view_window">点击下载</a> |
||||
|
</p> |
||||
|
<p class="p_info" v-if="contentDatas.asset_data.asset_file!=null && contentDatas.asset_data.asset_file!=''"> |
||||
|
资产挂牌申请详情： |
||||
|
<a :href="contentDatas.asset_data.asset_file" class="p_info_a" target="view_window">点击下载</a> |
||||
|
</p> |
||||
|
<p class="p_info" v-if="contentDatas.asset_data.promise_file!=null && contentDatas.asset_data.promise_file!=''"> |
||||
|
申请承诺文件： |
||||
|
<a :href="contentDatas.asset_data.promise_file" class="p_info_a" target="view_window">点击下载</a> |
||||
|
</p> |
||||
|
<p class="p_info" v-if="contentDatas.asset_data.accessory!=null && contentDatas.asset_data.accessory!=''"> |
||||
|
附件： |
||||
|
<a :href="contentDatas.asset_data.accessory" class="p_info_a" target="view_window">点击下载</a> |
||||
|
</p> |
||||
|
<template v-if="contentDatas.asset_data.else_serial_file.length!=0 "> |
||||
|
<p class="p_info" v-for="(item,index) in contentDatas.asset_data.else_serial_file" :key="index"> |
||||
|
其他资产材料详情{{index+1}}： |
||||
|
<a :href="item" class="p_info_a" target="view_window">点击下载</a> |
||||
|
</p> |
||||
|
</template> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
components: { |
||||
|
ElImageViewer: () => import('element-ui/packages/image/src/image-viewer') |
||||
|
}, |
||||
|
props:{ |
||||
|
contentDatas:{ |
||||
|
require: true |
||||
|
}, |
||||
|
|
||||
|
}, |
||||
|
data() { |
||||
|
return{ |
||||
|
img_data:[], |
||||
|
showViewer:false, |
||||
|
img_url:[] |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
onPreview(img) { |
||||
|
// this.img_url = img |
||||
|
this.showViewer = true |
||||
|
}, |
||||
|
// 关闭查看器 |
||||
|
closeViewer() { |
||||
|
this.showViewer = false |
||||
|
}, |
||||
|
}, |
||||
|
created(){ |
||||
|
this.img_url = this.contentDatas.asset_data.serial_img |
||||
|
|
||||
|
this.img_data=[{name:'资产图片',url:[this.contentDatas.asset_data.serial_img]} |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
@import url('../../../../assets/css/sidebar.css'); |
||||
|
.p_info_a{ |
||||
|
text-decoration: underline; |
||||
|
} |
||||
|
.body1{ |
||||
|
overflow-y: scroll; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,101 @@ |
|||||
|
<template> |
||||
|
<div class="body1"> |
||||
|
<p class="title">银行开户证明</p> |
||||
|
<img v-if="contentDatas.bank_account_certificate.type==0" :src="contentDatas.bank_account_certificate.url" class="file_img"> |
||||
|
<p class="upload_span" v-else> |
||||
|
<a class="table_right_item_a" :href="contentDatas.bank_account_certificate.url" target="_blank" rel="nofollow">点击下载</a> |
||||
|
</p> |
||||
|
<div class="img_span"> |
||||
|
<span @click="onPreview([contentDatas.bank_account_certificate.url])" v-if="contentDatas.bank_account_certificate.type==0">查看原图</span> |
||||
|
<el-upload |
||||
|
class="upload-demo" |
||||
|
:action="action" |
||||
|
:on-change="fileChange" |
||||
|
:show-file-list="false" |
||||
|
:on-error="handleAvatarError" |
||||
|
list-type="picture" |
||||
|
:on-success="(res,file)=>{handleAvatarSuccess(res,file,0)}" |
||||
|
> |
||||
|
<span class="upload_span">重新上传</span> |
||||
|
</el-upload> |
||||
|
</div> |
||||
|
<el-image-viewer |
||||
|
v-if="showViewer" |
||||
|
:on-close="closeViewer" |
||||
|
:url-list="img_url" |
||||
|
:z-index="9999" |
||||
|
/> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import bus from '../../bus' |
||||
|
export default { |
||||
|
props:{ |
||||
|
contentDatas:{ |
||||
|
require: true |
||||
|
} |
||||
|
}, |
||||
|
components: { |
||||
|
ElImageViewer: () => import('element-ui/packages/image/src/image-viewer') |
||||
|
}, |
||||
|
data() { |
||||
|
return{ |
||||
|
host:'http://wenhua.xingtongworld.com', |
||||
|
action:'http://wenhua.xingtongworld.com/api/Index/uploadFile', |
||||
|
showViewer:false, |
||||
|
img_url:[] |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
onPreview(img) { |
||||
|
this.img_url = img |
||||
|
this.showViewer = true |
||||
|
}, |
||||
|
// 关闭查看器 |
||||
|
closeViewer() { |
||||
|
this.showViewer = false |
||||
|
}, |
||||
|
handleAvatarError(){ |
||||
|
this.$message.error('文件上传失败！'); |
||||
|
}, |
||||
|
handleAvatarSuccess(res,file,type){ |
||||
|
console.info(res) |
||||
|
if(res.code==1){ |
||||
|
const typeArr1 = ['application/pdf']; |
||||
|
const isJPG1 = typeArr1.indexOf(file.raw.type) !== -1; |
||||
|
let file_type; |
||||
|
if (isJPG1) { |
||||
|
file_type=1 |
||||
|
}else{ |
||||
|
file_type=0 |
||||
|
} |
||||
|
let upDate={ |
||||
|
url:{url:this.host+res.data.img_url,type:file_type}, |
||||
|
key:'bank_account_certificate' |
||||
|
} |
||||
|
bus.$emit('img', upDate); |
||||
|
this.$message.success('文件上传成功！'); |
||||
|
} |
||||
|
}, |
||||
|
fileChange(file){ |
||||
|
const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg','application/pdf']; |
||||
|
const isJPG = typeArr.indexOf(file.raw.type) !== -1; |
||||
|
const isLt3M = file.size / 1024 / 1024 < 10; |
||||
|
if (!isJPG) { |
||||
|
this.$message.error('只能上传图片和PDF文件!'); |
||||
|
this.$refs.upload.clearFiles(); |
||||
|
return; |
||||
|
} |
||||
|
if (!isLt3M) { |
||||
|
this.$message.error('上传图片大小不能超过 10MB!'); |
||||
|
this.$refs.upload.clearFiles(); |
||||
|
// this.$set(this.query, 'goods_img', ''); |
||||
|
return; |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
@import url('../../../../assets/css/sidebar.css'); |
||||
|
</style> |
||||
@ -0,0 +1,124 @@ |
|||||
|
<template> |
||||
|
<div class="body1"> |
||||
|
<p class="title">基础信息</p> |
||||
|
<template v-if="oldDates.account_type==1"> |
||||
|
<div class="input_item"> |
||||
|
<span>机构名称：</span> |
||||
|
<el-input v-model="oldDates.firm_name" placeholder="请输入内容"></el-input> |
||||
|
</div> |
||||
|
<div class="input_item"> |
||||
|
<span>统一社会信用代码：</span> |
||||
|
<el-input v-model="oldDates.credit_code" placeholder="请输入内容"></el-input> |
||||
|
</div> |
||||
|
<!-- <div class="input_item"> |
||||
|
<span>主体类型：</span> |
||||
|
<el-input v-model="oldDates.main_type" placeholder="请输入内容"></el-input> |
||||
|
</div> --> |
||||
|
<div class="input_item"> |
||||
|
<span>注册资本：</span> |
||||
|
<el-input v-model="oldDates.reg_money" placeholder="请输入内容"></el-input> |
||||
|
</div> |
||||
|
<div class="input_item"> |
||||
|
<span>法定代表人：</span> |
||||
|
<el-input v-model="oldDates.legal_name" placeholder="请输入内容"></el-input> |
||||
|
</div> |
||||
|
<div class="input_item"> |
||||
|
<span>住所：</span> |
||||
|
<el-input v-model="oldDates.domicile" placeholder="请输入内容"></el-input> |
||||
|
</div> |
||||
|
<div class="input_item"> |
||||
|
<span>成立日期：</span> |
||||
|
<el-date-picker |
||||
|
v-model="oldDates.establish_time" |
||||
|
type="date" |
||||
|
value-format="timestamp" |
||||
|
placeholder="选择成立日期"> |
||||
|
</el-date-picker> |
||||
|
</div> |
||||
|
<div class="input_item"> |
||||
|
<span>收货地址：</span> |
||||
|
<el-input v-model="oldDates.address" placeholder="请输入内容"></el-input> |
||||
|
</div> |
||||
|
<div class="input_item"> |
||||
|
<span>收货联系人：</span> |
||||
|
<el-input v-model="oldDates.uname" placeholder="请输入内容"></el-input> |
||||
|
</div> |
||||
|
<div class="input_item"> |
||||
|
<span>收货联系电话：</span> |
||||
|
<el-input v-model="oldDates.phone" placeholder="请输入内容"></el-input> |
||||
|
</div> |
||||
|
</template> |
||||
|
<template v-else> |
||||
|
<div class="input_item"> |
||||
|
<span>姓名：</span> |
||||
|
<el-input v-model="oldDates.username" placeholder="请输入内容"></el-input> |
||||
|
</div> |
||||
|
<div class="input_item"> |
||||
|
<span>身份证号码：</span> |
||||
|
<el-input v-model="oldDates.id_card" placeholder="请输入内容"></el-input> |
||||
|
</div> |
||||
|
<div class="input_item"> |
||||
|
<span>手机号码：</span> |
||||
|
<el-input v-model="oldDates.userphone" placeholder="请输入内容"></el-input> |
||||
|
</div> |
||||
|
<div class="input_item"> |
||||
|
<span>开户行名称：</span> |
||||
|
<el-input v-model="oldDates.bank_name" placeholder="请输入内容"></el-input> |
||||
|
</div> |
||||
|
<div class="input_item"> |
||||
|
<span>银行卡号：</span> |
||||
|
<el-input v-model="oldDates.id_bank" placeholder="请输入内容"></el-input> |
||||
|
</div> |
||||
|
<div class="input_item"> |
||||
|
<span>收货地址：</span> |
||||
|
<el-input v-model="oldDates.address" placeholder="请输入内容"></el-input> |
||||
|
</div> |
||||
|
<div class="input_item"> |
||||
|
<span>收货联系人：</span> |
||||
|
<el-input v-model="oldDates.uname" placeholder="请输入内容"></el-input> |
||||
|
</div> |
||||
|
<div class="input_item"> |
||||
|
<span>收货联系电话：</span> |
||||
|
<el-input v-model="oldDates.phone" placeholder="请输入内容"></el-input> |
||||
|
</div> |
||||
|
</template> |
||||
|
<div class="input_button"> |
||||
|
<el-button type="primary" plain @click="preservation">保存</el-button> |
||||
|
<el-button plain @click="Reset">重置</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import bus from '../../bus' |
||||
|
export default { |
||||
|
props:{ |
||||
|
contentDatas1:{ |
||||
|
require: true |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return{ |
||||
|
oldDates:{}, |
||||
|
} |
||||
|
}, |
||||
|
created(){ |
||||
|
this.oldDates=JSON.parse(JSON.stringify(this.contentDatas1)) |
||||
|
}, |
||||
|
methods:{ |
||||
|
preservation(){ |
||||
|
bus.$emit('basics', this.oldDates); |
||||
|
}, |
||||
|
Reset(){ |
||||
|
this.oldDates=JSON.parse(JSON.stringify(this.contentDatas1)) |
||||
|
} |
||||
|
}, |
||||
|
watch:{ |
||||
|
contentDatas1(val,oldVal){ |
||||
|
this.oldDates=JSON.parse(JSON.stringify(val)) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
@import url('../../../../assets/css/sidebar.css'); |
||||
|
</style> |
||||
@ -0,0 +1,87 @@ |
|||||
|
<template> |
||||
|
<div class="body1"> |
||||
|
<p class="title">挂牌方概况</p> |
||||
|
<div class="img_span1"> |
||||
|
<span v-for="(item,index) in img_data " :key="index" > |
||||
|
<template v-if="item.url.length!=0 "> |
||||
|
<span v-for="(item1,index1) in item.url " :key="index1"> |
||||
|
<span v-if="item1.type==0" @click="onPreview(item1.url)">{{item.name}}（{{item.url.length}}）</span> |
||||
|
</span> |
||||
|
</template> |
||||
|
</span> |
||||
|
<el-image-viewer |
||||
|
v-if="showViewer" |
||||
|
:on-close="closeViewer" |
||||
|
:url-list="img_url" |
||||
|
:z-index="9999" |
||||
|
/> |
||||
|
</div> |
||||
|
<p class="p_info">挂牌方类型：机构托管</p> |
||||
|
<p class="p_info">机构名称：{{contentDatas.shop_data.firm_name}}</p> |
||||
|
<p class="p_info">统一社会信用代码：{{contentDatas.shop_data.credit_code}}</p> |
||||
|
<!-- <p class="p_info">主体类型：{{contentDatas.shop_data.main_type}}</p> --> |
||||
|
<p class="p_info">注册资本：{{contentDatas.shop_data.reg_money}}</p> |
||||
|
<p class="p_info">法定代表人：{{contentDatas.shop_data.legal_name}}</p> |
||||
|
<p class="p_info">住所：{{contentDatas.shop_data.domicile}}</p> |
||||
|
<p class="p_info">成立日期：{{contentDatas.shop_data.establish_time | formatDate}}</p> |
||||
|
<!-- <p class="p_info"> |
||||
|
内部决策情况： |
||||
|
<el-radio v-model="contentDatas.asset_data.decision" :label="1">个人同意</el-radio> |
||||
|
<el-radio v-model="contentDatas.asset_data.decision" :label="2">股东会决议</el-radio> |
||||
|
<el-radio v-model="contentDatas.asset_data.decision" :label="3">董事会决议</el-radio> |
||||
|
<el-radio v-model="contentDatas.asset_data.decision" :label="4">总经理办公会决议</el-radio> |
||||
|
<el-radio v-model="contentDatas.asset_data.decision" :label="5">其他</el-radio> |
||||
|
<el-input v-model="contentDatas.asset_data.decision_case" v-if="contentDatas.shop_data.decision==5" placeholder="请输入其他情况" class="listing_input"></el-input> |
||||
|
</p> --> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
components: { |
||||
|
ElImageViewer: () => import('element-ui/packages/image/src/image-viewer') |
||||
|
}, |
||||
|
props:{ |
||||
|
contentDatas:{ |
||||
|
require: true |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return{ |
||||
|
img_data:[], |
||||
|
showViewer:false, |
||||
|
img_url:[] |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
onPreview(img) { |
||||
|
this.img_url = img |
||||
|
this.showViewer = true |
||||
|
}, |
||||
|
// 关闭查看器 |
||||
|
closeViewer() { |
||||
|
this.showViewer = false |
||||
|
}, |
||||
|
//时间戳转换时间 |
||||
|
formatDate(row,colnum){ |
||||
|
return moment(row[colnum.create_time]).format('YYYY-MM-DD HH:mm:ss') |
||||
|
}, |
||||
|
}, |
||||
|
created(){ |
||||
|
console.info(this.contentDatas) |
||||
|
// this.img_data=[{name:'营业执照',url:[this.contentDatas.shop_data.business_license]},{name:'法人代表证明书',url:[this.contentDatas.shop_data.legal_certificate]}, |
||||
|
// {name:'法人身份证件',url:[this.contentDatas.shop_data.legal_card_front,this.contentDatas.shop_data.legal_card_backfacade]}, |
||||
|
// {name:'法人授权委托书',url:[this.contentDatas.shop_data.legal_authorization]}, |
||||
|
// {name:'经办人身份证',url:[this.contentDatas.shop_data.operator_card]},{name:'银行开户证明',url:[this.contentDatas.shop_data.bank_account_certificate]}, |
||||
|
// {name:'资产托管权属承诺函',url:[this.contentDatas.shop_data.asset_trusteeship]},{name:'其他要求文件',url:[this.contentDatas.shop_data.else_file]}, |
||||
|
// ] |
||||
|
}, |
||||
|
watch:{ |
||||
|
contentDatas(newVale,old){ |
||||
|
console.info(newVale) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
@import url('../../../../assets/css/sidebar.css'); |
||||
|
</style> |
||||
@ -0,0 +1,101 @@ |
|||||
|
<template> |
||||
|
<div class="body1"> |
||||
|
<p class="title">法人代表证明书</p> |
||||
|
<img v-if="contentDatas.legal_certificate.type==0" :src="contentDatas.legal_certificate.url" class="file_img"> |
||||
|
<p class="upload_span" v-else> |
||||
|
<a class="table_right_item_a" :href="contentDatas.legal_certificate.url" target="_blank" rel="nofollow">点击下载</a> |
||||
|
</p> |
||||
|
<div class="img_span"> |
||||
|
<span @click="onPreview([contentDatas.legal_certificate.url])" v-if="contentDatas.legal_certificate.type==0">查看原图</span> |
||||
|
<el-upload |
||||
|
class="upload-demo" |
||||
|
:action="action" |
||||
|
:on-change="fileChange" |
||||
|
:show-file-list="false" |
||||
|
:on-error="handleAvatarError" |
||||
|
list-type="picture" |
||||
|
:on-success="(res,file)=>{handleAvatarSuccess(res,file,0)}" |
||||
|
> |
||||
|
<span class="upload_span">重新上传</span> |
||||
|
</el-upload> |
||||
|
</div> |
||||
|
<el-image-viewer |
||||
|
v-if="showViewer" |
||||
|
:on-close="closeViewer" |
||||
|
:url-list="img_url" |
||||
|
:z-index="9999" |
||||
|
/> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import bus from '../../bus' |
||||
|
export default { |
||||
|
props:{ |
||||
|
contentDatas:{ |
||||
|
require: true |
||||
|
} |
||||
|
}, |
||||
|
components: { |
||||
|
ElImageViewer: () => import('element-ui/packages/image/src/image-viewer') |
||||
|
}, |
||||
|
data() { |
||||
|
return{ |
||||
|
host:'http://wenhua.xingtongworld.com', |
||||
|
action:'http://wenhua.xingtongworld.com/api/Index/uploadFile', |
||||
|
showViewer:false, |
||||
|
img_url:[] |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
onPreview(img) { |
||||
|
this.img_url = img |
||||
|
this.showViewer = true |
||||
|
}, |
||||
|
// 关闭查看器 |
||||
|
closeViewer() { |
||||
|
this.showViewer = false |
||||
|
}, |
||||
|
handleAvatarError(){ |
||||
|
this.$message.error('文件上传失败！'); |
||||
|
}, |
||||
|
handleAvatarSuccess(res,file,type){ |
||||
|
console.info(res) |
||||
|
if(res.code==1){ |
||||
|
const typeArr1 = ['application/pdf']; |
||||
|
const isJPG1 = typeArr1.indexOf(file.raw.type) !== -1; |
||||
|
let file_type; |
||||
|
if (isJPG1) { |
||||
|
file_type=1 |
||||
|
}else{ |
||||
|
file_type=0 |
||||
|
} |
||||
|
let upDate={ |
||||
|
url:{url:this.host+res.data.img_url,type:file_type}, |
||||
|
key:'legal_certificate' |
||||
|
} |
||||
|
bus.$emit('img', upDate); |
||||
|
this.$message.success('文件上传成功！'); |
||||
|
} |
||||
|
}, |
||||
|
fileChange(file){ |
||||
|
const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg','application/pdf']; |
||||
|
const isJPG = typeArr.indexOf(file.raw.type) !== -1; |
||||
|
const isLt3M = file.size / 1024 / 1024 < 10; |
||||
|
if (!isJPG) { |
||||
|
this.$message.error('只能上传图片和PDF文件!'); |
||||
|
this.$refs.upload.clearFiles(); |
||||
|
return; |
||||
|
} |
||||
|
if (!isLt3M) { |
||||
|
this.$message.error('上传图片大小不能超过 10MB!'); |
||||
|
this.$refs.upload.clearFiles(); |
||||
|
// this.$set(this.query, 'goods_img', ''); |
||||
|
return; |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
@import url('../../../../assets/css/sidebar.css'); |
||||
|
</style> |
||||
@ -0,0 +1,50 @@ |
|||||
|
<template> |
||||
|
<div class="body1"> |
||||
|
<p class="title">文化资产要素交易平台标的代码</p> |
||||
|
<p class="p_info dataNumber"> |
||||
|
<span v-if="dataNumber!=''">资产编号：{{dataNumber}} </span> |
||||
|
<!-- <el-input v-model="input" placeholder="字标准体系代码缩写" class="dataNumber_input"></el-input> |
||||
|
<el-input v-model="input" placeholder="标准分配序号" class="dataNumber_input"></el-input> |
||||
|
<el-input v-model="input" placeholder="." class="dataNumber_input1"></el-input> |
||||
|
<el-input v-model="input" placeholder="部分编号" class="dataNumber_input margin_right"></el-input> |
||||
|
<span>建议编号：T/CPRA3100.01</span> --> |
||||
|
<span class="span_blue span_left" @click="createAssetNumber" v-if="dataNumber==''">生成资产编号</span> |
||||
|
</p> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import {createAssetNumber} from '../../../../api/index' |
||||
|
export default { |
||||
|
props:{ |
||||
|
contentDatas:{ |
||||
|
require: true |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return{ |
||||
|
input:'', |
||||
|
dataNumber:'' |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
createAssetNumber(){ |
||||
|
let data={ |
||||
|
id:this.contentDatas.asset_data.id, |
||||
|
} |
||||
|
createAssetNumber(data).then(res=>{ |
||||
|
console.info(res); |
||||
|
if (res.code==100) { |
||||
|
this.dataNumber=res.data |
||||
|
this.$message.success('生成资产编号成功~'); |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
created(){ |
||||
|
this.dataNumber=this.contentDatas.asset_data.serial_number |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
@import url('../../../../assets/css/sidebar.css'); |
||||
|
</style> |
||||
@ -0,0 +1,135 @@ |
|||||
|
<template> |
||||
|
<div class="body1"> |
||||
|
<p class="title">其他要求文件</p> |
||||
|
<div class="else_file" v-if="contentDatas.else_file!=null"> |
||||
|
<div> |
||||
|
<img :src="contentDatas.else_file[0].url" class="file_img" v-if="contentDatas.else_file[0].type==0"> |
||||
|
<p class="upload_span" v-else> |
||||
|
<a class="table_right_item_a" :href="contentDatas.else_file[0].url" target="_blank" rel="nofollow">点击下载</a> |
||||
|
</p> |
||||
|
<div class="img_span"> |
||||
|
<span @click="onPreview([contentDatas.else_file[0].url])" v-if="contentDatas.else_file[0].type==0">查看原图</span> |
||||
|
<el-upload |
||||
|
class="upload-demo" |
||||
|
:action="action" |
||||
|
:on-change="fileChange" |
||||
|
:show-file-list="false" |
||||
|
:on-error="handleAvatarError" |
||||
|
list-type="picture" |
||||
|
:on-success="(res,file)=>{handleAvatarSuccess(res,file,0,0)}" |
||||
|
> |
||||
|
<span class="upload_span">重新上传</span> |
||||
|
</el-upload> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="else_file_right" v-if="contentDatas.else_file.length>1"> |
||||
|
<!-- <div class="else_file_right" v-if="contentDatas.else_file!=null"> --> |
||||
|
<div class="img_span else_files" v-for="(item,index) in contentDatas.else_file" :key="index"> |
||||
|
<template v-if="index!=0"> |
||||
|
<span>资质证明文件{{index}}</span> |
||||
|
<div class="img_span"> |
||||
|
<span @click="onPreview([item.url])" v-if="item.type==0">查看原图</span> |
||||
|
<a class="upload_span" v-else :href="item.url" target="_blank" rel="nofollow">点击下载</a> |
||||
|
<el-upload |
||||
|
class="upload-demo" |
||||
|
:action="action" |
||||
|
:on-change="fileChange" |
||||
|
:show-file-list="false" |
||||
|
:on-error="handleAvatarError" |
||||
|
list-type="picture" |
||||
|
:on-success="(res,file)=>{handleAvatarSuccess(res,file,0,index)}" |
||||
|
> |
||||
|
<span class="upload_span">重新上传</span> |
||||
|
</el-upload> |
||||
|
</div> |
||||
|
</template> |
||||
|
</div> |
||||
|
<div class="img_span"> |
||||
|
<el-upload |
||||
|
class="upload-demo" |
||||
|
:action="action" |
||||
|
:on-change="fileChange" |
||||
|
:show-file-list="false" |
||||
|
:on-error="handleAvatarError" |
||||
|
list-type="picture" |
||||
|
:on-success="(res,file)=>{handleAvatarSuccess(res,file,1)}" |
||||
|
> |
||||
|
<span class="upload_span">+上传更多文件</span> |
||||
|
</el-upload> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<el-image-viewer |
||||
|
v-if="showViewer" |
||||
|
:on-close="closeViewer" |
||||
|
:url-list="img_url" |
||||
|
:z-index="9999" |
||||
|
/> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import bus from '../../bus' |
||||
|
export default { |
||||
|
props:{ |
||||
|
contentDatas:{ |
||||
|
require: true, |
||||
|
} |
||||
|
}, |
||||
|
components: { |
||||
|
ElImageViewer: () => import('element-ui/packages/image/src/image-viewer') |
||||
|
}, |
||||
|
data() { |
||||
|
return{ |
||||
|
host:'http://wenhua.xingtongworld.com', |
||||
|
action:'http://wenhua.xingtongworld.com/api/Index/uploadFile', |
||||
|
showViewer:false, |
||||
|
img_url:[] |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
onPreview(img) { |
||||
|
this.img_url = img |
||||
|
this.showViewer = true |
||||
|
}, |
||||
|
// 关闭查看器 |
||||
|
closeViewer() { |
||||
|
this.showViewer = false |
||||
|
}, |
||||
|
handleAvatarError(){ |
||||
|
this.$message.error('文件上传失败！'); |
||||
|
}, |
||||
|
handleAvatarSuccess(res,file,type,index){ |
||||
|
console.info(res) |
||||
|
if(res.code==1){ |
||||
|
let upDate={ |
||||
|
url:{url:this.host+res.data.img_url,type:file_type}, |
||||
|
key:'else_file', |
||||
|
index:index, |
||||
|
type:type |
||||
|
} |
||||
|
bus.$emit('img', upDate); |
||||
|
this.$message.success('文件上传成功！'); |
||||
|
} |
||||
|
}, |
||||
|
fileChange(file){ |
||||
|
const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg','application/pdf']; |
||||
|
const isJPG = typeArr.indexOf(file.raw.type) !== -1; |
||||
|
const isLt3M = file.size / 1024 / 1024 < 10; |
||||
|
if (!isJPG) { |
||||
|
this.$message.error('只能上传图片和PDF文件!'); |
||||
|
this.$refs.upload.clearFiles(); |
||||
|
return; |
||||
|
} |
||||
|
if (!isLt3M) { |
||||
|
this.$message.error('上传图片大小不能超过 10MB!'); |
||||
|
this.$refs.upload.clearFiles(); |
||||
|
// this.$set(this.query, 'goods_img', ''); |
||||
|
return; |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
@import url('../../../../assets/css/sidebar.css'); |
||||
|
</style> |
||||
@ -0,0 +1,101 @@ |
|||||
|
<template> |
||||
|
<div class="body1"> |
||||
|
<p class="title">法人授权委托书</p> |
||||
|
<img v-if="contentDatas.legal_authorization.type==0" :src="contentDatas.legal_authorization.url" class="file_img"> |
||||
|
<p class="upload_span" v-else-if="contentDatas.legal_authorization"> |
||||
|
<a class="table_right_item_a" :href="contentDatas.legal_authorization.url" target="_blank" rel="nofollow">点击下载</a> |
||||
|
</p> |
||||
|
<div class="img_span"> |
||||
|
<span @click="onPreview([contentDatas.legal_authorization.url])" v-if="contentDatas.legal_authorization.type==0">查看原图</span> |
||||
|
<el-upload |
||||
|
class="upload-demo" |
||||
|
:action="action" |
||||
|
:on-change="fileChange" |
||||
|
:show-file-list="false" |
||||
|
:on-error="handleAvatarError" |
||||
|
list-type="picture" |
||||
|
:on-success="(res,file)=>{handleAvatarSuccess(res,file,0)}" |
||||
|
> |
||||
|
<span class="upload_span">{{contentDatas.legal_authorization?'重新上传':'上传文件'}}</span> |
||||
|
</el-upload> |
||||
|
</div> |
||||
|
<el-image-viewer |
||||
|
v-if="showViewer" |
||||
|
:on-close="closeViewer" |
||||
|
:url-list="img_url" |
||||
|
:z-index="9999" |
||||
|
/> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import bus from '../../bus' |
||||
|
export default { |
||||
|
props:{ |
||||
|
contentDatas:{ |
||||
|
require: true |
||||
|
} |
||||
|
}, |
||||
|
components: { |
||||
|
ElImageViewer: () => import('element-ui/packages/image/src/image-viewer') |
||||
|
}, |
||||
|
data() { |
||||
|
return{ |
||||
|
host:'http://wenhua.xingtongworld.com', |
||||
|
action:'http://wenhua.xingtongworld.com/api/Index/uploadFile', |
||||
|
showViewer:false, |
||||
|
img_url:[] |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
onPreview(img) { |
||||
|
this.img_url = img |
||||
|
this.showViewer = true |
||||
|
}, |
||||
|
// 关闭查看器 |
||||
|
closeViewer() { |
||||
|
this.showViewer = false |
||||
|
}, |
||||
|
handleAvatarError(){ |
||||
|
this.$message.error('文件上传失败！'); |
||||
|
}, |
||||
|
handleAvatarSuccess(res,file,type){ |
||||
|
console.info(res) |
||||
|
if(res.code==1){ |
||||
|
const typeArr1 = ['application/pdf']; |
||||
|
const isJPG1 = typeArr1.indexOf(file.raw.type) !== -1; |
||||
|
let file_type; |
||||
|
if (isJPG1) { |
||||
|
file_type=1 |
||||
|
}else{ |
||||
|
file_type=0 |
||||
|
} |
||||
|
let upDate={ |
||||
|
url:{url:this.host+res.data.img_url,type:file_type}, |
||||
|
key:'legal_authorization' |
||||
|
} |
||||
|
bus.$emit('img', upDate); |
||||
|
this.$message.success('文件上传成功！'); |
||||
|
} |
||||
|
}, |
||||
|
fileChange(file){ |
||||
|
const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg','application/pdf']; |
||||
|
const isJPG = typeArr.indexOf(file.raw.type) !== -1; |
||||
|
const isLt3M = file.size / 1024 / 1024 < 10; |
||||
|
if (!isJPG) { |
||||
|
this.$message.error('只能上传图片和PDF文件!'); |
||||
|
this.$refs.upload.clearFiles(); |
||||
|
return; |
||||
|
} |
||||
|
if (!isLt3M) { |
||||
|
this.$message.error('上传图片大小不能超过 10MB!'); |
||||
|
this.$refs.upload.clearFiles(); |
||||
|
// this.$set(this.query, 'goods_img', ''); |
||||
|
return; |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
@import url('../../../../assets/css/sidebar.css'); |
||||
|
</style> |
||||
@ -0,0 +1,101 @@ |
|||||
|
<template> |
||||
|
<div class="body1"> |
||||
|
<p class="title">营业执照（复印件）</p> |
||||
|
<img v-if="contentDatas.business_license.type==0" :src="contentDatas.business_license.url" class="file_img"> |
||||
|
<p class="upload_span" v-else> |
||||
|
<a class="table_right_item_a" :href="contentDatas.business_license.url" target="_blank" rel="nofollow">点击下载</a> |
||||
|
</p> |
||||
|
<div class="img_span"> |
||||
|
<span @click="onPreview([contentDatas.business_license.url])" v-if="contentDatas.business_license.type==0">查看原图</span> |
||||
|
<el-upload |
||||
|
class="upload-demo" |
||||
|
:action="action" |
||||
|
:on-change="fileChange" |
||||
|
:show-file-list="false" |
||||
|
:on-error="handleAvatarError" |
||||
|
list-type="picture" |
||||
|
:on-success="(res,file)=>{handleAvatarSuccess(res,file,0)}" |
||||
|
> |
||||
|
<span class="upload_span">重新上传</span> |
||||
|
</el-upload> |
||||
|
</div> |
||||
|
<el-image-viewer |
||||
|
v-if="showViewer" |
||||
|
:on-close="closeViewer" |
||||
|
:url-list="img_url" |
||||
|
:z-index="9999" |
||||
|
/> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import bus from '../../bus' |
||||
|
export default { |
||||
|
props:{ |
||||
|
contentDatas:{ |
||||
|
require: true |
||||
|
} |
||||
|
}, |
||||
|
components: { |
||||
|
ElImageViewer: () => import('element-ui/packages/image/src/image-viewer') |
||||
|
}, |
||||
|
data() { |
||||
|
return{ |
||||
|
host:'http://wenhua.xingtongworld.com', |
||||
|
action:'http://wenhua.xingtongworld.com/api/Index/uploadFile', |
||||
|
showViewer:false, |
||||
|
img_url:[] |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
onPreview(img) { |
||||
|
this.img_url = img |
||||
|
this.showViewer = true |
||||
|
}, |
||||
|
// 关闭查看器 |
||||
|
closeViewer() { |
||||
|
this.showViewer = false |
||||
|
}, |
||||
|
handleAvatarError(){ |
||||
|
this.$message.error('文件上传失败！'); |
||||
|
}, |
||||
|
handleAvatarSuccess(res,file,type){ |
||||
|
console.info(res) |
||||
|
if(res.code==1){ |
||||
|
const typeArr1 = ['application/pdf']; |
||||
|
const isJPG1 = typeArr1.indexOf(file.raw.type) !== -1; |
||||
|
let file_type; |
||||
|
if (isJPG1) { |
||||
|
file_type=1 |
||||
|
}else{ |
||||
|
file_type=0 |
||||
|
} |
||||
|
let upDate={ |
||||
|
url:{url:this.host+res.data.img_url,type:file_type}, |
||||
|
key:'business_license' |
||||
|
} |
||||
|
bus.$emit('img', upDate); |
||||
|
this.$message.success('文件上传成功！'); |
||||
|
} |
||||
|
}, |
||||
|
fileChange(file){ |
||||
|
const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg','application/pdf']; |
||||
|
const isJPG = typeArr.indexOf(file.raw.type) !== -1; |
||||
|
const isLt3M = file.size / 1024 / 1024 < 10; |
||||
|
if (!isJPG) { |
||||
|
this.$message.error('只能上传图片和PDF文件!'); |
||||
|
this.$refs.upload.clearFiles(); |
||||
|
return; |
||||
|
} |
||||
|
if (!isLt3M) { |
||||
|
this.$message.error('上传图片大小不能超过 10MB!'); |
||||
|
this.$refs.upload.clearFiles(); |
||||
|
// this.$set(this.query, 'goods_img', ''); |
||||
|
return; |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
@import url('../../../../assets/css/sidebar.css'); |
||||
|
</style> |
||||
@ -0,0 +1,129 @@ |
|||||
|
<template> |
||||
|
<div class="body1 body2"> |
||||
|
<div class="idcard"> |
||||
|
<p class="title">经办人身份证正面(照片面)</p> |
||||
|
<img v-if="contentDatas.operator_card_front.type==0" :src="contentDatas.operator_card_front.url" class="file_img1"> |
||||
|
<p class="upload_span" v-else-if="contentDatas.operator_card_front"> |
||||
|
<a class="table_right_item_a" :href="contentDatas.operator_card_front.url" target="_blank" rel="nofollow">点击下载</a> |
||||
|
</p> |
||||
|
<div class="img_span"> |
||||
|
<span @click="onPreview([contentDatas.operator_card_front.url] )" v-if="contentDatas.operator_card_front.type==0">查看原图</span> |
||||
|
<el-upload |
||||
|
class="upload-demo" |
||||
|
:action="action" |
||||
|
:on-change="fileChange" |
||||
|
:show-file-list="false" |
||||
|
:on-error="handleAvatarError" |
||||
|
list-type="picture" |
||||
|
:on-success="(res,file)=>{handleAvatarSuccess(res,file,0)}" |
||||
|
> |
||||
|
<span class="upload_span">{{contentDatas.operator_card_front?'重新上传':'上传图片'}}</span> |
||||
|
</el-upload> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="idcard"> |
||||
|
<p class="title">经办人身份证反面(发证机构面)</p> |
||||
|
<img :src=" contentDatas.operator_card_backfacade.url " v-if="contentDatas.operator_card_backfacade.type==0" class="file_img1"> |
||||
|
<p class="upload_span" v-else-if="contentDatas.operator_card_backfacade"> |
||||
|
<a class="table_right_item_a" :href="contentDatas.operator_card_backfacade.url" target="_blank" rel="nofollow">点击下载</a> |
||||
|
</p> |
||||
|
<div class="img_span"> |
||||
|
<span @click="onPreview([contentDatas.operator_card_backfacade.url] )" v-if="contentDatas.operator_card_backfacade.type==0">查看原图</span> |
||||
|
<el-upload |
||||
|
class="upload-demo" |
||||
|
:action="action" |
||||
|
:on-change="fileChange" |
||||
|
:show-file-list="false" |
||||
|
:on-error="handleAvatarError" |
||||
|
list-type="picture" |
||||
|
:on-success="(res,file)=>{handleAvatarSuccess(res,file,1)}" |
||||
|
> |
||||
|
<span class="upload_span">{{contentDatas.operator_card_backfacade?'重新上传':'上传图片'}}</span> |
||||
|
</el-upload> |
||||
|
</div> |
||||
|
</div> |
||||
|
<el-image-viewer |
||||
|
v-if="showViewer" |
||||
|
:on-close="closeViewer" |
||||
|
:url-list="img_url" |
||||
|
:z-index="9999" |
||||
|
/> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import bus from '../../bus' |
||||
|
export default { |
||||
|
props:{ |
||||
|
contentDatas:{ |
||||
|
require: true |
||||
|
} |
||||
|
}, |
||||
|
components: { |
||||
|
ElImageViewer: () => import('element-ui/packages/image/src/image-viewer') |
||||
|
}, |
||||
|
data() { |
||||
|
return{ |
||||
|
host:'http://wenhua.xingtongworld.com', |
||||
|
action:'http://wenhua.xingtongworld.com/api/Index/uploadFile', |
||||
|
showViewer : false, |
||||
|
img_url:[] |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
onPreview(img) { |
||||
|
this.img_url = img |
||||
|
this.showViewer = true |
||||
|
}, |
||||
|
// 关闭查看器 |
||||
|
closeViewer() { |
||||
|
this.showViewer = false |
||||
|
}, |
||||
|
handleAvatarError(){ |
||||
|
this.$message.error('文件上传失败！'); |
||||
|
}, |
||||
|
handleAvatarSuccess(res,file,type){ |
||||
|
console.info(res) |
||||
|
if(res.code==1){ |
||||
|
const typeArr1 = ['application/pdf']; |
||||
|
const isJPG1 = typeArr1.indexOf(file.raw.type) !== -1; |
||||
|
let file_type; |
||||
|
if (isJPG1) { |
||||
|
file_type=1 |
||||
|
}else{ |
||||
|
file_type=0 |
||||
|
} |
||||
|
let upDate={ |
||||
|
url:{url:this.host+res.data.img_url,type:file_type}, |
||||
|
key:'' |
||||
|
} |
||||
|
if (type==0) { |
||||
|
upDate.key='operator_card_front' |
||||
|
}else{ |
||||
|
upDate.key='operator_card_backfacade' |
||||
|
} |
||||
|
bus.$emit('img', upDate); |
||||
|
this.$message.success('文件上传成功！'); |
||||
|
} |
||||
|
}, |
||||
|
fileChange(file){ |
||||
|
const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg','application/pdf']; |
||||
|
const isJPG = typeArr.indexOf(file.raw.type) !== -1; |
||||
|
const isLt3M = file.size / 1024 / 1024 < 10; |
||||
|
if (!isJPG) { |
||||
|
this.$message.error('只能上传图片和PDF文件!'); |
||||
|
this.$refs.upload.clearFiles(); |
||||
|
return; |
||||
|
} |
||||
|
if (!isLt3M) { |
||||
|
this.$message.error('上传图片大小不能超过 10MB!'); |
||||
|
this.$refs.upload.clearFiles(); |
||||
|
// this.$set(this.query, 'goods_img', ''); |
||||
|
return; |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
@import url('../../../../assets/css/sidebar.css'); |
||||
|
</style> |
||||
@ -0,0 +1,101 @@ |
|||||
|
<template> |
||||
|
<div class="body1"> |
||||
|
<p class="title">开户申请书与承诺书</p> |
||||
|
<img v-if="contentDatas.asset_certificate.type==0" :src="contentDatas.asset_certificate.url" class="file_img"> |
||||
|
<p class="upload_span" v-else> |
||||
|
<a class="table_right_item_a" :href="contentDatas.asset_certificate.url" target="_blank" rel="nofollow">点击下载</a> |
||||
|
</p> |
||||
|
<div class="img_span"> |
||||
|
<span @click="onPreview([contentDatas.asset_certificate.url])" v-if="contentDatas.asset_certificate.type==0">查看原图</span> |
||||
|
<el-upload |
||||
|
class="upload-demo" |
||||
|
:action="action" |
||||
|
:on-change="fileChange" |
||||
|
:show-file-list="false" |
||||
|
:on-error="handleAvatarError" |
||||
|
list-type="picture" |
||||
|
:on-success="(res,file)=>{handleAvatarSuccess(res,file,0)}" |
||||
|
> |
||||
|
<span class="upload_span">重新上传</span> |
||||
|
</el-upload> |
||||
|
</div> |
||||
|
<el-image-viewer |
||||
|
v-if="showViewer" |
||||
|
:on-close="closeViewer" |
||||
|
:url-list="img_url" |
||||
|
:z-index="9999" |
||||
|
/> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import bus from '../../bus' |
||||
|
export default { |
||||
|
props:{ |
||||
|
contentDatas:{ |
||||
|
require: true |
||||
|
} |
||||
|
}, |
||||
|
components: { |
||||
|
ElImageViewer: () => import('element-ui/packages/image/src/image-viewer') |
||||
|
}, |
||||
|
data() { |
||||
|
return{ |
||||
|
host:'http://wenhua.xingtongworld.com', |
||||
|
action:'http://wenhua.xingtongworld.com/api/Index/uploadFile', |
||||
|
showViewer:false, |
||||
|
img_url:[] |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
onPreview(img) { |
||||
|
this.img_url = img |
||||
|
this.showViewer = true |
||||
|
}, |
||||
|
// 关闭查看器 |
||||
|
closeViewer() { |
||||
|
this.showViewer = false |
||||
|
}, |
||||
|
handleAvatarError(){ |
||||
|
this.$message.error('文件上传失败！'); |
||||
|
}, |
||||
|
handleAvatarSuccess(res,file,type){ |
||||
|
console.info(res) |
||||
|
if(res.code==1){ |
||||
|
const typeArr1 = ['application/pdf']; |
||||
|
const isJPG1 = typeArr1.indexOf(file.raw.type) !== -1; |
||||
|
let file_type; |
||||
|
if (isJPG1) { |
||||
|
file_type=1 |
||||
|
}else{ |
||||
|
file_type=0 |
||||
|
} |
||||
|
let upDate={ |
||||
|
url:{url:this.host+res.data.img_url,type:file_type}, |
||||
|
key:'asset_certificate' |
||||
|
} |
||||
|
bus.$emit('img', upDate); |
||||
|
this.$message.success('文件上传成功！'); |
||||
|
} |
||||
|
}, |
||||
|
fileChange(file){ |
||||
|
const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg','application/pdf']; |
||||
|
const isJPG = typeArr.indexOf(file.raw.type) !== -1; |
||||
|
const isLt3M = file.size / 1024 / 1024 < 10; |
||||
|
if (!isJPG) { |
||||
|
this.$message.error('只能上传图片和PDF文件!'); |
||||
|
this.$refs.upload.clearFiles(); |
||||
|
return; |
||||
|
} |
||||
|
if (!isLt3M) { |
||||
|
this.$message.error('上传图片大小不能超过 10MB!'); |
||||
|
this.$refs.upload.clearFiles(); |
||||
|
// this.$set(this.query, 'goods_img', ''); |
||||
|
return; |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
@import url('../../../../assets/css/sidebar.css'); |
||||
|
</style> |
||||
@ -0,0 +1,70 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<template v-if="dialogType==1"> |
||||
|
<assessment v-if="sidebarId== 'assessment'" :contentDatas="contentDatas"></assessment> |
||||
|
<basics v-if="sidebarId== 'basics'" :contentDatas1="contentDatas1"></basics> |
||||
|
<license v-if="sidebarId== 'license'" :contentDatas="contentDatas"></license> |
||||
|
<IDCard v-if="sidebarId== 'IDCard'" :contentDatas="contentDatas"></IDCard> |
||||
|
<application v-if="sidebarId== 'application'" :contentDatas="contentDatas"></application> |
||||
|
<assets v-if="sidebarId== 'assets'" :contentDatas="contentDatas"></assets> |
||||
|
<certificate v-if="sidebarId== 'certificate'" :contentDatas="contentDatas"></certificate> |
||||
|
<bankProve v-if="sidebarId== 'bankProve'" :contentDatas="contentDatas"></bankProve> |
||||
|
<entrust v-if="sidebarId== 'entrust'" :contentDatas="contentDatas"></entrust> |
||||
|
<promise v-if="sidebarId== 'promise'" :contentDatas="contentDatas"></promise> |
||||
|
<operatorIDCard v-if="sidebarId== 'operatorIDCard'" :contentDatas="contentDatas"></operatorIDCard> |
||||
|
<elseFile v-if="sidebarId== 'elseFile'" :contentDatas="contentDatas"></elseFile> |
||||
|
</template> |
||||
|
<template v-else-if="dialogType==2 ||dialogType==3"> |
||||
|
<assessment v-if="sidebarId== 'assessment'" :contentDatas="contentDatas"></assessment> |
||||
|
<businessInfo v-if="sidebarId== 'businessInfo'" :contentDatas="contentDatas"></businessInfo> |
||||
|
<assetsInfo v-if="sidebarId== 'assetsInfo'" :contentDatas="contentDatas"></assetsInfo> |
||||
|
<dataNumber v-if="sidebarId== 'dataNumber'" :contentDatas="contentDatas"></dataNumber> |
||||
|
<assetValuation v-if="sidebarId== 'assetValuation'" :contentDatas="contentDatas"></assetValuation> |
||||
|
</template> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import assets from '../dialog/DataReview/assets.vue' |
||||
|
import assetValuation from '../dialog/DataReview/assetValuation.vue' |
||||
|
import certificate from '../dialog/DataReview/certificate.vue' |
||||
|
import bankProve from '../dialog/DataReview/bankProve.vue' |
||||
|
import entrust from '../dialog/DataReview/entrust.vue' |
||||
|
import promise from '../dialog/DataReview/promise.vue' |
||||
|
import operatorIDCard from '../dialog/DataReview/operatorIDCard.vue' |
||||
|
import elseFile from '../dialog/DataReview/elseFile.vue' |
||||
|
import dataNumber from '../dialog/DataReview/dataNumber.vue' |
||||
|
import assetsInfo from '../dialog/DataReview/assetsInfo.vue' |
||||
|
import businessInfo from '../dialog/DataReview/businessInfo.vue' |
||||
|
import assessment from '../dialog/DataReview/assessment.vue' |
||||
|
import application from '../dialog/DataReview/application.vue' |
||||
|
import IDCard from '../dialog/DataReview/IDCard.vue' |
||||
|
import license from '../dialog/DataReview/license.vue' |
||||
|
import basics from '../dialog/DataReview/basics.vue' |
||||
|
export default ({ |
||||
|
props:{ |
||||
|
sidebarId:{ |
||||
|
require: true |
||||
|
}, |
||||
|
dialogType:{ |
||||
|
require: true |
||||
|
}, |
||||
|
contentDatas:{ |
||||
|
require: true |
||||
|
}, |
||||
|
contentDatas1:{ |
||||
|
require: true |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return{ |
||||
|
} |
||||
|
}, |
||||
|
created(){ |
||||
|
}, |
||||
|
components:{ |
||||
|
assessment,basics,license,IDCard,application,assets, |
||||
|
businessInfo,assetsInfo,dataNumber,elseFile,certificate, |
||||
|
bankProve,entrust,promise,operatorIDCard,assetValuation |
||||
|
}, |
||||
|
}) |
||||
|
</script> |
||||
@ -0,0 +1,397 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<el-dialog :title="dialogData.title" :visible.sync="isshow" width="70%" :before-close="MisShow"> |
||||
|
<div class="select" v-if="!isexamine &&dialogType==1"> |
||||
|
<el-radio v-model="query.account_type" label="buyer" border @change="getAccountData" v-if="listDate.buyer_data==1">摘牌方</el-radio> |
||||
|
<el-radio v-model="query.account_type" label="enter_shop" border @change="getAccountData" v-if="listDate.enter_shop_data==1">挂牌方</el-radio> |
||||
|
<el-radio v-model="query.account_type" label="third_party" border @change="getAccountData" v-if="listDate.third_party_data==1">第三方</el-radio> |
||||
|
</div> |
||||
|
<p class="tips"> |
||||
|
{{dialogData.tips}} |
||||
|
<span style="color:red">{{dialogData.tips1}}</span> |
||||
|
</p> |
||||
|
<div class="body"> |
||||
|
<el-tabs tab-position="left" v-model="tabID"> |
||||
|
<el-tab-pane v-for="(item) in dialogData.sidebar" :key="item.id" @tab-click="handleClick" :name="item.id"> |
||||
|
<span slot="label"> |
||||
|
<i class="el-icon-question" v-if="item.type==2" style="color:#4E73E4"></i> |
||||
|
<span v-else-if="item.type==1" style="color:red">*</span> |
||||
|
{{item.title}} |
||||
|
</span> |
||||
|
<sidebarContent :sidebarId="item.id" :dialogType="dialogType" :contentDatas="contentDatas" :contentDatas1="contentDatas1" /> |
||||
|
</el-tab-pane> |
||||
|
</el-tabs> |
||||
|
</div> |
||||
|
<div class="feedback feedback1" v-if="isexamine "> |
||||
|
<el-radio v-model="query.status" :label="1" border>审核通过</el-radio> |
||||
|
<el-radio v-model="query.status" :label="2" border>审核不通过</el-radio> |
||||
|
</div> |
||||
|
<div class="feedback" > |
||||
|
<span>{{isexamine==true?'审核反馈：':'账户备注：'}}</span> |
||||
|
<el-input |
||||
|
type="textarea" |
||||
|
:rows="2" |
||||
|
placeholder="请输入内容" |
||||
|
v-model="query.message"> |
||||
|
</el-input> |
||||
|
</div> |
||||
|
<span slot="footer" class="dialog-footer"> |
||||
|
<template v-if="dialogType==1 || dialogType==2"> |
||||
|
<el-button @click="MisShow">取 消</el-button> |
||||
|
<el-button type="primary" @click="saveEdit">确 定</el-button> |
||||
|
</template> |
||||
|
<template v-else-if="dialogType==3"> |
||||
|
<el-button @click="MisShow">返 回</el-button> |
||||
|
</template> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
// import {whySidebar} from './sidebar.vue' |
||||
|
import sidebarContent from '../dialog/content.vue' |
||||
|
import {getAccountData,getAssetInfo,accountCheck,assertCheck,sendCheck,checkAssetOut,getFileType} from '../../../api/index' |
||||
|
import bus from '../bus' |
||||
|
export default { |
||||
|
name:'whyDialog', |
||||
|
props:{ |
||||
|
//1为账户管理信息查看，2为资产管理信息查看,3为交易管理资产查看 |
||||
|
dialogType:{ |
||||
|
type:Number, |
||||
|
require: true |
||||
|
}, |
||||
|
dialogID:{ |
||||
|
type:Number, |
||||
|
require: true |
||||
|
}, |
||||
|
isshow:{ |
||||
|
type:Boolean, |
||||
|
default:false, |
||||
|
require: true |
||||
|
}, |
||||
|
// 判断是个人还是机构，1位机构，2位个人 |
||||
|
account_type:{ |
||||
|
type:String, |
||||
|
default:'buyer', |
||||
|
}, |
||||
|
// 是否显示审核 |
||||
|
isexamine:{ |
||||
|
type:Boolean, |
||||
|
default:false, |
||||
|
}, |
||||
|
//dialogType为2时使用，1为资产信息查询，2为资产挂牌审核，3为资产发布审核，4为摘牌申请审核 |
||||
|
assets_type:{ |
||||
|
type:Number |
||||
|
}, |
||||
|
listDate:{ |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
data(){ |
||||
|
return { |
||||
|
dialogData:{ |
||||
|
title:'', |
||||
|
tips:'', |
||||
|
tips1:'', |
||||
|
sidebar:[] |
||||
|
}, |
||||
|
query:{ |
||||
|
message:'', |
||||
|
status:'', |
||||
|
account_type:'', |
||||
|
uid:'', |
||||
|
account_data:'', |
||||
|
id:'', |
||||
|
serial:'', |
||||
|
report:'' |
||||
|
}, |
||||
|
tabID:'', |
||||
|
contentDatas:'', |
||||
|
contentDatas1:'' |
||||
|
} |
||||
|
}, |
||||
|
components:{ |
||||
|
// whySidebar, |
||||
|
sidebarContent |
||||
|
}, |
||||
|
created(){ |
||||
|
if (this.dialogType==1) { |
||||
|
this.query.uid=this.dialogID; |
||||
|
this.query.account_type=this.account_type; |
||||
|
this.getAccountData() |
||||
|
}else if(this.dialogType==2 ||this.dialogType==3){ |
||||
|
this.query.id=this.dialogID; |
||||
|
console.info(this.query.id) |
||||
|
this.getAssetInfo() |
||||
|
} |
||||
|
bus.$on('getDate', () => { |
||||
|
this.getAssetInfo() |
||||
|
}) |
||||
|
bus.$on('basics', (e) => { |
||||
|
console.log(e) |
||||
|
this.contentDatas1=e; |
||||
|
// this.$message.success('保存成功，请点击右下角确定按钮进行提交！') |
||||
|
this.$message.success('保存成功！') |
||||
|
}) |
||||
|
bus.$on('file', (e) => { |
||||
|
console.log(e) |
||||
|
this.query.report=e; |
||||
|
// this.$message.success('保存成功，请点击右下角确定按钮进行提交！') |
||||
|
this.$message.success('保存成功！') |
||||
|
}) |
||||
|
bus.$on('img',(e)=>{ |
||||
|
console.info(e) |
||||
|
if (e.key=='else_file') { |
||||
|
if (e.type==1) { |
||||
|
this.contentDatas.else_file.push(e.url) |
||||
|
this.contentDatas1.else_file.push(e.url.url) |
||||
|
}else{ |
||||
|
this.contentDatas.else_file[e.index]=e.url |
||||
|
this.contentDatas1.else_file[e.index]=e.url.url |
||||
|
} |
||||
|
}else{ |
||||
|
this.contentDatas[e.key]=e.url; |
||||
|
this.contentDatas1[e.key]=e.url.url |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
methods:{ |
||||
|
//获取文件类型 |
||||
|
getFileType(type){ |
||||
|
let data, |
||||
|
t=this; |
||||
|
if (type==0) { |
||||
|
data={file_info:this.contentDatas} |
||||
|
}else{ |
||||
|
data={file_info:this.contentDatas.shop_data} |
||||
|
} |
||||
|
getFileType(data).then(res=>{ |
||||
|
console.info(res) |
||||
|
if (res.code==100 && res.file_info.length!=0) { |
||||
|
if (type==0) { |
||||
|
for(let v in t.contentDatas){ |
||||
|
for(let key in res.file_info){ |
||||
|
if(key==v &&res.file_info[key]!=''){ |
||||
|
if (key=='else_file' && res.file_info['else_file'] ==null) { |
||||
|
t.contentDatas[v] =[] |
||||
|
}else{ |
||||
|
t.contentDatas[v] =res.file_info[key] |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}else{ |
||||
|
for(let v in t.contentDatas.shop_data){ |
||||
|
for(let key in res.file_info){ |
||||
|
if(key==v &&res.file_info[key]!=''){ |
||||
|
if (key=='else_file' && res.file_info['else_file'] ==null) { |
||||
|
t.$set(t.contentDatas,v,[]) |
||||
|
}else{ |
||||
|
// t.contentDatas.shop_data[v] =res.file_info[key] |
||||
|
t.$set(t.contentDatas.shop_data,v,res.file_info[key]) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
console.info(t.contentDatas) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
//资产管理资料查看 |
||||
|
getAssetInfo(){ |
||||
|
getAssetInfo(this.query).then(res => { |
||||
|
console.log(res); |
||||
|
if (res.code==100) { |
||||
|
if (res.data.is_status==0) { |
||||
|
this.$message.error('暂无数据~'); |
||||
|
}else{ |
||||
|
res.data.establish_time=res.data.establish_time*1000 |
||||
|
this.contentDatas=res.data |
||||
|
this.contentDatas1=JSON.parse( JSON.stringify(res.data)) |
||||
|
console.info(this.contentDatas1) |
||||
|
this.init() |
||||
|
this.getFileType(1) |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
//账户管理资料查看 |
||||
|
getAccountData(){ |
||||
|
getAccountData(this.query).then(res => { |
||||
|
console.log(res); |
||||
|
if (res.code==100) { |
||||
|
if (res.data.is_status==0) { |
||||
|
this.$message.error('暂无数据~'); |
||||
|
this.query.account_type=this.account_type |
||||
|
}else{ |
||||
|
res.data.establish_time=res.data.establish_time*1000 |
||||
|
if (isNaN(res.data.establish_time)) { |
||||
|
res.data.establish_time=0 |
||||
|
} |
||||
|
this.contentDatas=res.data |
||||
|
this.contentDatas1=JSON.parse( JSON.stringify(res.data)) |
||||
|
console.info(this.contentDatas1) |
||||
|
this.init() |
||||
|
this.getFileType(0) |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
init(){ |
||||
|
if (this.dialogType==1) { |
||||
|
this.dialogData.title='资料查看'; |
||||
|
if (this.isexamine) { |
||||
|
this.dialogData.tips1='（*注：以下文件需加盖公章）'; |
||||
|
} |
||||
|
this.dialogData.tips='以下为交易平台账户申请账户时提交的相关资料：'; |
||||
|
if (this.contentDatas.account_type==2) { |
||||
|
this.dialogData.sidebar=[ |
||||
|
{title:'个人风险评估',type:0,id:'assessment'},{title:'基础信息',type:1,id:'basics'},{title:'身份证(复印件)',type:1,id:'IDCard'}, |
||||
|
// {title:'数字证书申请表',type:1,id:'application'}{title:'资产证明文件',type:2,id:'assets'}, |
||||
|
{title:'其他要求文件',type:0,id:'elseFile'} |
||||
|
] |
||||
|
}else{ |
||||
|
this.dialogData.sidebar=[ |
||||
|
{title:'企业风险评估',type:0,id:'assessment'},{title:'基础信息',type:1,id:'basics'},{title:'营业执照(复印件)',type:1,id:'license'}, |
||||
|
{title:'法人代表证明书',type:1,id:'certificate'},{title:'法人身份证(复印件)',type:1,id:'IDCard'}, |
||||
|
// {title:'数字证书申请表',type:1,id:'application'}, |
||||
|
{title:'银行开户证明',type:1,id:'bankProve'}, |
||||
|
// {title:'开户申请书与承诺书',type:1,id:'promise'}, |
||||
|
{title:'法人授权委托书',type:0,id:'entrust'}, |
||||
|
{title:'经办人身份证(复印件)',type:0,id:'operatorIDCard'}, |
||||
|
// {title:'资产证明文件',type:2,id:'assets'}, |
||||
|
{title:'其他要求文件',type:0,id:'elseFile'} |
||||
|
] |
||||
|
} |
||||
|
}else if(this.dialogType==2 ||this.dialogType==3){ |
||||
|
this.dialogData.sidebar=[ |
||||
|
{title:'企业风险评估',type:0,id:'assessment'},{title:'挂牌方概况',type:1,id:'businessInfo'},{title:'资产概况',type:1,id:'assetsInfo'},{title:'资产评估/资产评价报告',type:1,id:'assetValuation'}, |
||||
|
{title:'文化大数据标准编号',type:1,id:'dataNumber'} |
||||
|
] |
||||
|
// if (this.contentDatas.asset_data.else_serial_file!=null) { |
||||
|
// this.dialogData.sidebar.splice(2, 0, {title:'资产评估/资产评价报告',type:1,id:'assetValuation'}); |
||||
|
// } |
||||
|
if (this.assets_type==1) { |
||||
|
this.dialogData.title='资产信息'; |
||||
|
this.dialogData.tips='以下为挂牌资产的相关信息'; |
||||
|
}else if(this.assets_type==2){ |
||||
|
this.dialogData.title='资产挂牌申请'; |
||||
|
this.dialogData.tips='以下为挂牌资产的相关信息：'; |
||||
|
} |
||||
|
else if(this.assets_type==4){ |
||||
|
this.dialogData.title='摘牌申请审核'; |
||||
|
}else{ |
||||
|
this.dialogData.title='资产发布审核'; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
this.tabID=this.dialogData.sidebar[0].id |
||||
|
}, |
||||
|
handleClick(tab){ |
||||
|
this.tabID=tab.id |
||||
|
}, |
||||
|
saveEdit(){ |
||||
|
if (this.dialogType==1) { |
||||
|
this.saveAccountCheck() |
||||
|
}else if (this.dialogType==2) { |
||||
|
if (this.assets_type==2) { |
||||
|
this.saveCartellinoCheck() |
||||
|
}else if (this.assets_type==3) { |
||||
|
this.saveSendCheck() |
||||
|
}else if (this.assets_type==4) { |
||||
|
this.checkAssetOut() |
||||
|
}else{ |
||||
|
this.MisShow() |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
// 摘牌申请审核 |
||||
|
checkAssetOut(){ |
||||
|
checkAssetOut(this.query).then(res => { |
||||
|
console.log(res); |
||||
|
if (res.code==100) { |
||||
|
this.MisShow() |
||||
|
this.$message.success('提交成功~'); |
||||
|
this.$emit('getData') |
||||
|
}else{ |
||||
|
this.$message.error(res.msg); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 资产发布审核 |
||||
|
saveSendCheck(){ |
||||
|
sendCheck(this.query).then(res => { |
||||
|
console.log(res); |
||||
|
if (res.code==100) { |
||||
|
this.MisShow() |
||||
|
this.$message.success('提交成功~'); |
||||
|
this.$emit('getData') |
||||
|
}else{ |
||||
|
this.$message.error(res.msg); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 资产挂牌审核 |
||||
|
saveCartellinoCheck(){ |
||||
|
assertCheck(this.query).then(res => { |
||||
|
console.log(res); |
||||
|
if (res.code==100) { |
||||
|
this.MisShow() |
||||
|
this.$message.success('提交成功~'); |
||||
|
this.$emit('getData') |
||||
|
}else{ |
||||
|
this.$message.error(res.msg); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 提交账户管理资料查看/审核 |
||||
|
saveAccountCheck(){ |
||||
|
console.info(this.contentDatas1) |
||||
|
this.query.account_data=this.contentDatas1 |
||||
|
this.query.account_data.establish_time=this.contentDatas.establish_time/1000; |
||||
|
delete this.query.account_data['is_status']; |
||||
|
// delete this.query.account_data['id']; |
||||
|
accountCheck(this.query).then(res => { |
||||
|
console.log(res); |
||||
|
if (res.code==100) { |
||||
|
this.MisShow() |
||||
|
this.$message.success('提交成功~'); |
||||
|
this.$emit('getData') |
||||
|
}else{ |
||||
|
this.$message.error(res.msg); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
MisShow(){ |
||||
|
this.$emit('MisShow') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.tips{ |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
.body{ |
||||
|
display: flex; |
||||
|
margin-top: 30px; |
||||
|
} |
||||
|
.feedback{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 16px; |
||||
|
color: #333333; |
||||
|
width: 90%; |
||||
|
margin: 0 auto; |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
.feedback>>>.el-textarea{ |
||||
|
width: 90%; |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
.select{ |
||||
|
margin-bottom: 15px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,80 @@ |
|||||
|
import Vue from 'vue'; |
||||
|
|
||||
|
// v-dialogDrag: 弹窗拖拽属性
|
||||
|
Vue.directive('dialogDrag', { |
||||
|
bind(el, binding, vnode, oldVnode) { |
||||
|
const dialogHeaderEl = el.querySelector('.el-dialog__header'); |
||||
|
const dragDom = el.querySelector('.el-dialog'); |
||||
|
|
||||
|
dialogHeaderEl.style.cssText += ';cursor:move;' |
||||
|
dragDom.style.cssText += ';top:0px;' |
||||
|
|
||||
|
// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
|
||||
|
const sty = (() => { |
||||
|
if (window.document.currentStyle) { |
||||
|
return (dom, attr) => dom.currentStyle[attr]; |
||||
|
} else { |
||||
|
return (dom, attr) => getComputedStyle(dom, false)[attr]; |
||||
|
} |
||||
|
})() |
||||
|
|
||||
|
dialogHeaderEl.onmousedown = (e) => { |
||||
|
// 鼠标按下，计算当前元素距离可视区的距离
|
||||
|
const disX = e.clientX - dialogHeaderEl.offsetLeft; |
||||
|
const disY = e.clientY - dialogHeaderEl.offsetTop; |
||||
|
|
||||
|
const screenWidth = document.body.clientWidth; // body当前宽度
|
||||
|
const screenHeight = document.documentElement.clientHeight; // 可见区域高度(应为body高度，可某些环境下无法获取)
|
||||
|
|
||||
|
const dragDomWidth = dragDom.offsetWidth; // 对话框宽度
|
||||
|
const dragDomheight = dragDom.offsetHeight; // 对话框高度
|
||||
|
|
||||
|
const minDragDomLeft = dragDom.offsetLeft; |
||||
|
const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth; |
||||
|
|
||||
|
const minDragDomTop = dragDom.offsetTop; |
||||
|
const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight; |
||||
|
|
||||
|
|
||||
|
// 获取到的值带px 正则匹配替换
|
||||
|
let styL = sty(dragDom, 'left'); |
||||
|
let styT = sty(dragDom, 'top'); |
||||
|
|
||||
|
// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
|
||||
|
if (styL.includes('%')) { |
||||
|
styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100); |
||||
|
styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100); |
||||
|
} else { |
||||
|
styL = +styL.replace(/\px/g, ''); |
||||
|
styT = +styT.replace(/\px/g, ''); |
||||
|
}; |
||||
|
|
||||
|
document.onmousemove = function (e) { |
||||
|
// 通过事件委托，计算移动的距离
|
||||
|
let left = e.clientX - disX; |
||||
|
let top = e.clientY - disY; |
||||
|
|
||||
|
// 边界处理
|
||||
|
if (-(left) > minDragDomLeft) { |
||||
|
left = -(minDragDomLeft); |
||||
|
} else if (left > maxDragDomLeft) { |
||||
|
left = maxDragDomLeft; |
||||
|
} |
||||
|
|
||||
|
if (-(top) > minDragDomTop) { |
||||
|
top = -(minDragDomTop); |
||||
|
} else if (top > maxDragDomTop) { |
||||
|
top = maxDragDomTop; |
||||
|
} |
||||
|
|
||||
|
// 移动当前元素
|
||||
|
dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`; |
||||
|
}; |
||||
|
|
||||
|
document.onmouseup = function (e) { |
||||
|
document.onmousemove = null; |
||||
|
document.onmouseup = null; |
||||
|
}; |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
@ -0,0 +1,30 @@ |
|||||
|
export const messages = { |
||||
|
'zh': { |
||||
|
i18n: { |
||||
|
breadcrumb: '国际化产品', |
||||
|
tips: '通过切换语言按钮，来改变当前内容的语言。', |
||||
|
btn: '切换英文', |
||||
|
title1: '常用用法', |
||||
|
p1: '要是你把你的秘密告诉了风，那就别怪风把它带给树。', |
||||
|
p2: '没有什么比信念更能支撑我们度过艰难的时光了。', |
||||
|
p3: '只要能把自己的事做好，并让自己快乐，你就领先于大多数人了。', |
||||
|
title2: '组件插值', |
||||
|
info: 'Element组件需要国际化，请参考 {action}。', |
||||
|
value: '文档' |
||||
|
} |
||||
|
}, |
||||
|
'en': { |
||||
|
i18n: { |
||||
|
breadcrumb: 'International Products', |
||||
|
tips: 'Click on the button to change the current language. ', |
||||
|
btn: 'Switch Chinese', |
||||
|
title1: 'Common usage', |
||||
|
p1: "If you reveal your secrets to the wind you should not blame the wind for revealing them to the trees.", |
||||
|
p2: "Nothing can help us endure dark times better than our faith. ", |
||||
|
p3: "If you can do what you do best and be happy, you're further along in life than most people.", |
||||
|
title2: 'Component interpolation', |
||||
|
info: 'The default language of Element is Chinese. If you wish to use another language, please refer to the {action}.', |
||||
|
value: 'documentation' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,256 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<el-dialog title="订单详情" :visible.sync="isshow" width="70%" :before-close="MisShow"> |
||||
|
<p class="tips"> |
||||
|
<!-- <span v-if="orderInfos.order.status==0">请在 {{orderInfos.order.pay_overdue_time | formatDate }}前完成订单支付！</span> --> |
||||
|
<span v-if="orderInfos.order.status==1 || orderInfos.order.status==0">等待摘牌方付款</span> |
||||
|
<span v-else-if="orderInfos.order.status==2">等待双方上传签约合同</span> |
||||
|
<span v-else-if="orderInfos.order.status==3">请审核签约合同</span> |
||||
|
<span v-else-if="orderInfos.order.status==4 || orderInfos.order.status==5">等待双方确认交付</span> |
||||
|
<span v-else-if="orderInfos.order.status==6">请结算订单</span> |
||||
|
<span v-else-if="orderInfos.order.status==7">订单完成！</span> |
||||
|
</p> |
||||
|
<div class="steps"> |
||||
|
<el-steps :active="orderInfos.order.status " align-center> |
||||
|
<template v-if="orderInfos.order.type==0"> |
||||
|
<el-step title="待付款" description=""></el-step> |
||||
|
<el-step title="待审核付款" description=""></el-step> |
||||
|
<el-step title="待上传签约合同" description=""></el-step> |
||||
|
<el-step title="待确认签约合同" description=""></el-step> |
||||
|
<el-step title="待交付" description=""></el-step> |
||||
|
<el-step title="待确认交付" description=""></el-step> |
||||
|
<el-step title="待结算" description=""></el-step> |
||||
|
<el-step title="已完成" description=""></el-step> |
||||
|
</template> |
||||
|
<template v-else> |
||||
|
<el-step title="下单成功" description=""></el-step> |
||||
|
<el-step title="等待付款" description=""></el-step> |
||||
|
<el-step title="订单完成" description=""></el-step> |
||||
|
</template> |
||||
|
</el-steps> |
||||
|
</div> |
||||
|
<div class="order_title"> |
||||
|
<el-tabs v-model="activeName" @tab-click="handleClick" class="order_tabs"> |
||||
|
<el-tab-pane label="订单信息" name="first"> |
||||
|
<p class="order_info_p">订单编号：{{orderInfos.batchcode}} </p> |
||||
|
<p class="order_info_p">标准编号：{{orderInfos.asset.serial}} </p> |
||||
|
<p class="order_info_p">流水编号：{{orderInfos.order.money_id}} </p> |
||||
|
<p class="order_info_p">快递单号：{{orderInfos.order.express_id}} </p> |
||||
|
<br/> |
||||
|
<p class="order_info_p">资产名称：{{orderInfos.asset.serial_name}} </p> |
||||
|
<p class="order_info_p">资产类型：{{orderInfos.asset.asset_type_name}} </p> |
||||
|
<p class="order_info_p">转让单价：{{orderInfos.asset.price}} </p> |
||||
|
<p class="order_info_p">交易数量：{{orderInfos.order.count}} </p> |
||||
|
<p class="order_info_p">交易金额：{{orderInfos.order.price}} </p> |
||||
|
<br/> |
||||
|
<p class="order_info_p">摘牌方名称：{{orderInfos.username}} </p> |
||||
|
<p class="order_info_p">收货地址：{{orderInfos.order.express_address}} </p> |
||||
|
<p class="order_info_p">收货人名称：{{orderInfos.order.express_user}} </p> |
||||
|
<p class="order_info_p">收货人电话：{{orderInfos.order.express_userphone}} </p> |
||||
|
<p class="order_info_p">邮政编码：{{orderInfos.order.postal_code}} </p> |
||||
|
</el-tab-pane> |
||||
|
<el-tab-pane label="订单合同" name="second" :disabled="orderInfos.order.status<4" v-if="orderInfos.order.type==0"> |
||||
|
<p class="order_info_p1"> |
||||
|
摘牌方签约合同详情 |
||||
|
<a :href="orderInfos.order.buy_contract" download class="upload_span">点击下载</a> |
||||
|
</p> |
||||
|
<p class="order_info_p1"> |
||||
|
挂牌方签约合同详情 |
||||
|
<a :href="orderInfos.order.sell_contract" download class="upload_span">点击下载</a> |
||||
|
</p> |
||||
|
</el-tab-pane> |
||||
|
<el-tab-pane label="交易凭证" name="third" :disabled="orderInfos.order.status<6"> |
||||
|
<p class="order_info_p1"> |
||||
|
交易凭证详情 |
||||
|
<a :href="orderInfos.order.transaction_doc" download class="upload_span">点击下载</a> |
||||
|
</p> |
||||
|
</el-tab-pane> |
||||
|
<el-tab-pane label="交易账单" name="fourth" :disabled="orderInfos.order.status<7"> |
||||
|
<p class="order_info_p">订单金额：{{orderInfos.order.total_price}} </p> |
||||
|
<p class="order_info_p">结算金额：{{orderInfos.order.settlement_price}} </p> |
||||
|
</el-tab-pane> |
||||
|
</el-tabs> |
||||
|
<div class="order_switch"> |
||||
|
<span>订单状态</span> |
||||
|
<el-switch v-model="value1" @change="closeOrerd" :disabled="orderInfos.order.status==8"></el-switch> |
||||
|
</div> |
||||
|
</div> |
||||
|
<span slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary" @click="settlement" v-if="orderInfos.order.status==6">结 算</el-button> |
||||
|
<el-button @click="MisShow">返 回</el-button> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
<el-dialog title="提示" :visible.sync="editVisible2" width="30%"> |
||||
|
<p class="recordTips">请输入关闭订单原因：</p> |
||||
|
<div class="msg"> |
||||
|
<el-input |
||||
|
type="textarea" |
||||
|
:rows="2" |
||||
|
placeholder="请输入内容" |
||||
|
v-model="query.message"> |
||||
|
</el-input> |
||||
|
</div> |
||||
|
<div class="msg1"> |
||||
|
<span>操作员：</span> |
||||
|
<el-input placeholder="请输入内容" v-model="query.operator_name" class="msg1_input"></el-input> |
||||
|
</div> |
||||
|
<span slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="editVisible2 = false">取 消</el-button> |
||||
|
<el-button type="primary" @click="close">确 定</el-button> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { orderInfo ,close,settlement} from '../../../api/index' |
||||
|
export default ({ |
||||
|
name:'orderDialog', |
||||
|
props:{ |
||||
|
batchcode:{ |
||||
|
// type:Number, |
||||
|
require: true |
||||
|
}, |
||||
|
isshow:{ |
||||
|
type:Boolean, |
||||
|
default:false, |
||||
|
require: true |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return{ |
||||
|
activeName: 'first', |
||||
|
value1:true, |
||||
|
orderInfos:{ |
||||
|
asset:{}, |
||||
|
order:{} |
||||
|
}, |
||||
|
query:{ |
||||
|
message:'', |
||||
|
batchcode:'', |
||||
|
operator_name:'' |
||||
|
}, |
||||
|
editVisible2:false |
||||
|
} |
||||
|
}, |
||||
|
created(){ |
||||
|
this.getData() |
||||
|
this.query.batchcode=this.batchcode |
||||
|
}, |
||||
|
methods:{ |
||||
|
settlement(){ |
||||
|
let data={batchcode:this.batchcode} |
||||
|
settlement(data).then(res=>{ |
||||
|
console.info(res) |
||||
|
if (res.code==100) { |
||||
|
this.$message.success('结算订单成功！'); |
||||
|
this.getData() |
||||
|
}else{ |
||||
|
this.$message.error(res.msg) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
close(){ |
||||
|
if (this.query.message=='') { |
||||
|
this.$message.error('请输入关闭订单的原因！') |
||||
|
}else if(this.query.operator_name==''){ |
||||
|
this.$message.error('请输入操作员的名字！') |
||||
|
}else{ |
||||
|
close(this.query).then(res=>{ |
||||
|
console.info(res) |
||||
|
if (res.code==100) { |
||||
|
this.$message.success('关闭订单成功！') |
||||
|
this.MisShow(); |
||||
|
}else{ |
||||
|
this.$message.error(res.msg) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
closeOrerd(res){ |
||||
|
console.info(res) |
||||
|
if (!res) { |
||||
|
this.editVisible2=true |
||||
|
} |
||||
|
}, |
||||
|
handleClick(tab, event) { |
||||
|
console.log(tab, event); |
||||
|
}, |
||||
|
getData(){ |
||||
|
let data={batchcode:this.batchcode} |
||||
|
orderInfo(data).then(res=>{ |
||||
|
console.info(res); |
||||
|
if (res.code==100) { |
||||
|
this.orderInfos=res.data |
||||
|
if (res.data.order.status==8) { |
||||
|
this.value1=false |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
MisShow(){ |
||||
|
this.$emit('orderShow') |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.tips{ |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
.msg1{ |
||||
|
/* display: flex; |
||||
|
align-items: center; */ |
||||
|
margin-top: 15px; |
||||
|
} |
||||
|
.msg1>.msg1_input{ |
||||
|
/* width: 80%; */ |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
.steps{ |
||||
|
margin-top: 30px; |
||||
|
margin-bottom: 15px; |
||||
|
} |
||||
|
.order_title{ |
||||
|
width: 100%; |
||||
|
position: relative; |
||||
|
} |
||||
|
.order_tabs{ |
||||
|
width: 100%; |
||||
|
} |
||||
|
.order_switch{ |
||||
|
position: absolute; |
||||
|
top: 10px; |
||||
|
right: 0; |
||||
|
} |
||||
|
.order_switch >span{ |
||||
|
color: #4E73E4; |
||||
|
display: inline-block; |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
.order_tabs>>>.el-tab-pane{ |
||||
|
min-height: 480px; |
||||
|
border: 2px #AAAAAA dashed; |
||||
|
padding: 10px; |
||||
|
} |
||||
|
.order_info_p{ |
||||
|
font-size: 16px; |
||||
|
color: #555555; |
||||
|
} |
||||
|
.order_info_p1{ |
||||
|
margin-top: 15px; |
||||
|
font-size: 16px; |
||||
|
color: #555555; |
||||
|
} |
||||
|
.upload_span{ |
||||
|
color: #294CC6; |
||||
|
text-decoration: underline; |
||||
|
cursor: pointer; |
||||
|
margin-left: 15px; |
||||
|
} |
||||
|
.textarea{ |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
.msg{ |
||||
|
margin-top: 15px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,56 @@ |
|||||
|
<template> |
||||
|
<div class="error-page"> |
||||
|
<div class="error-code">4<span>0</span>3</div> |
||||
|
<div class="error-desc">啊哦~ 你没有权限访问该页面哦</div> |
||||
|
<div class="error-handle"> |
||||
|
<router-link to="/"> |
||||
|
<el-button type="primary" size="large">返回首页</el-button> |
||||
|
</router-link> |
||||
|
<el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
methods: { |
||||
|
goBack(){ |
||||
|
this.$router.go(-1); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
|
||||
|
<style scoped> |
||||
|
.error-page{ |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
flex-direction: column; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background: #f3f3f3; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.error-code{ |
||||
|
line-height: 1; |
||||
|
font-size: 250px; |
||||
|
font-weight: bolder; |
||||
|
color: #f02d2d; |
||||
|
} |
||||
|
.error-code span{ |
||||
|
color: #00a854; |
||||
|
} |
||||
|
.error-desc{ |
||||
|
font-size: 30px; |
||||
|
color: #777; |
||||
|
} |
||||
|
.error-handle{ |
||||
|
margin-top: 30px; |
||||
|
padding-bottom: 200px; |
||||
|
} |
||||
|
.error-btn{ |
||||
|
margin-left: 100px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,56 @@ |
|||||
|
<template> |
||||
|
<div class="error-page"> |
||||
|
<div class="error-code">4<span>0</span>4</div> |
||||
|
<div class="error-desc">啊哦~ 你所访问的页面不存在</div> |
||||
|
<div class="error-handle"> |
||||
|
<router-link to="/"> |
||||
|
<el-button type="primary" size="large">返回首页</el-button> |
||||
|
</router-link> |
||||
|
<el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
methods: { |
||||
|
goBack(){ |
||||
|
this.$router.go(-1); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
|
||||
|
<style scoped> |
||||
|
.error-page{ |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
flex-direction: column; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background: #f3f3f3; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.error-code{ |
||||
|
line-height: 1; |
||||
|
font-size: 250px; |
||||
|
font-weight: bolder; |
||||
|
color: #2d8cf0; |
||||
|
} |
||||
|
.error-code span{ |
||||
|
color: #00a854; |
||||
|
} |
||||
|
.error-desc{ |
||||
|
font-size: 30px; |
||||
|
color: #777; |
||||
|
} |
||||
|
.error-handle{ |
||||
|
margin-top: 30px; |
||||
|
padding-bottom: 200px; |
||||
|
} |
||||
|
.error-btn{ |
||||
|
margin-left: 100px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,333 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="crumbs"> |
||||
|
<el-breadcrumb separator="/"> |
||||
|
<el-breadcrumb-item> |
||||
|
<i class="el-icon-lx-cascades"></i> 账户管理 |
||||
|
</el-breadcrumb-item> |
||||
|
<el-breadcrumb-item>黑名单管理</el-breadcrumb-item> |
||||
|
</el-breadcrumb> |
||||
|
</div> |
||||
|
<div class="container"> |
||||
|
<div class="handle-box"> |
||||
|
<el-input v-model="query.firm_name" placeholder="机构名称" class="handle-input mr10"></el-input> |
||||
|
<el-input v-model="query.phone" placeholder="账户号码" class="handle-input mr10"></el-input> |
||||
|
<el-input v-model="query.username" placeholder="申请人名称" class="handle-input mr10"></el-input> |
||||
|
<el-select v-model="query.black_type" placeholder="黑名单类型" class="handle-select mr10"> |
||||
|
<el-option key="4" label="全部" :value="4"></el-option> |
||||
|
<el-option key="1" label="摘牌方" :value="1"></el-option> |
||||
|
<el-option key="2" label="挂牌方" :value="2"></el-option> |
||||
|
<el-option key="3" label="第三方" :value="3"></el-option> |
||||
|
<el-option key="5" label="购买方和挂牌方" :value="5"></el-option> |
||||
|
<el-option key="6" label="购买方和第三方" :value="6"></el-option> |
||||
|
<el-option key="7" label="挂牌方和第三方" :value="7"></el-option> |
||||
|
</el-select> |
||||
|
<el-date-picker |
||||
|
class="mr10" |
||||
|
v-model="query.time" |
||||
|
type="datetimerange" |
||||
|
:picker-options="pickerOptions" |
||||
|
range-separator="至" |
||||
|
value-format="timestamp" |
||||
|
start-placeholder="开始日期" |
||||
|
end-placeholder="结束日期" |
||||
|
align="right" |
||||
|
> |
||||
|
</el-date-picker> |
||||
|
<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button> |
||||
|
<el-button type="primary" plain @click="reset">重置</el-button> |
||||
|
</div> |
||||
|
<el-table |
||||
|
:data="tableData" |
||||
|
border |
||||
|
class="table" |
||||
|
ref="multipleTable" |
||||
|
header-cell-class-name="table-header" |
||||
|
> |
||||
|
<el-table-column prop="id" label="序号" width="55" align="center"></el-table-column> |
||||
|
<el-table-column prop="create_time" label="开户时间" :formatter="formatDate"></el-table-column> |
||||
|
<el-table-column label="机构名称" prop="firm_name"></el-table-column> |
||||
|
<el-table-column label="账户号码" prop="phone"></el-table-column> |
||||
|
<el-table-column prop="apply_name" label="申请人名称"></el-table-column> |
||||
|
<!-- <el-table-column prop="audit_status" label="审核状态"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span >{{scope.row | blackType}}</span> |
||||
|
</template> |
||||
|
</el-table-column> --> |
||||
|
<el-table-column prop="black_time" label="禁用时间" :formatter="formatDate"></el-table-column> |
||||
|
<el-table-column label="操作" width="280" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
@click="handleEdit(scope.$index, scope.row)" |
||||
|
>资料查看</el-button> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
@click="operationRecord(scope.row)" |
||||
|
>操作记录</el-button> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
@click="blacklist( scope.row)" |
||||
|
>解除黑名单</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<div class="pagination"> |
||||
|
<el-pagination |
||||
|
background |
||||
|
layout="total, prev, pager, next" |
||||
|
:current-page="query.page" |
||||
|
:page-size="query.limit" |
||||
|
:total="pageTotal" |
||||
|
@current-change="handlePageChange" |
||||
|
></el-pagination> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- 操作记录 --> |
||||
|
<el-dialog title="操作记录" :visible.sync="editVisible1" width="30%"> |
||||
|
<p class="recordTips">以下为该账户历史操作记录：</p> |
||||
|
<p class="record_content" v-for="(item,index) in recordList" :key="index"> |
||||
|
<span>{{index + 1}}.</span> |
||||
|
<span>{{item.create_time | formatDate}}</span> |
||||
|
<span>{{item.operation_content}}</span> |
||||
|
</p> |
||||
|
</el-dialog> |
||||
|
<!-- 添加黑名单 --> |
||||
|
<el-dialog title="提示" :visible.sync="editVisible2" width="30%"> |
||||
|
<p class="recordTips">是否解除黑名单？</p> |
||||
|
<div class="record_select"> |
||||
|
<el-checkbox v-model="query1.buyer_account_type" :true-label="1" :false-label="0">摘牌方</el-checkbox> |
||||
|
<el-checkbox v-model="query1.enter_shop_type" :true-label="1" :false-label="0">挂牌方</el-checkbox> |
||||
|
<el-checkbox v-model="query1.third_party_type" :true-label="1" :false-label="0">第三方服务机构</el-checkbox> |
||||
|
</div> |
||||
|
<span slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="editVisible2 = false">取 消</el-button> |
||||
|
<el-button type="primary" @click="addBlacklist">确 定</el-button> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { blackList ,operationRecord,updateBlackList,getBlack} from '../../../api/index'; |
||||
|
import moment from 'moment' |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
query: { |
||||
|
firm_name: '', |
||||
|
phone: '', |
||||
|
username: '', |
||||
|
black_type:4, |
||||
|
time: '', |
||||
|
page: 1, |
||||
|
limit: 10 |
||||
|
}, |
||||
|
query1:{ |
||||
|
uid:'', |
||||
|
buyer_account_type:0, |
||||
|
enter_shop_type:0, |
||||
|
third_party_type:0 |
||||
|
}, |
||||
|
tableData: [], |
||||
|
recordList:[], |
||||
|
multipleSelection: [], |
||||
|
delList: [], |
||||
|
editVisible: false, |
||||
|
editVisible1: false, |
||||
|
editVisible2: false, |
||||
|
pageTotal: 0, |
||||
|
pickerOptions: { |
||||
|
shortcuts: [ |
||||
|
{ |
||||
|
text: "最近一周", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: "最近一个月", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: "最近三个月", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
this.getData(); |
||||
|
}, |
||||
|
methods: { |
||||
|
//添加黑名单 |
||||
|
addBlacklist(){ |
||||
|
// this.$confirm('是否解除黑名单？').then(_ => { |
||||
|
updateBlackList(this.query1).then(res => { |
||||
|
console.log(res); |
||||
|
if (res.code==100) { |
||||
|
this.$message.success(res.msg); |
||||
|
this.getData(); |
||||
|
}else{ |
||||
|
this.$message.error(res.msg); |
||||
|
} |
||||
|
this.editVisible2=false |
||||
|
}); |
||||
|
// }).catch(_ => {}); |
||||
|
}, |
||||
|
//显示添加黑名单 |
||||
|
blacklist(row){ |
||||
|
let data={uid:row.id} |
||||
|
getBlack(data).then(res => { |
||||
|
console.log(res); |
||||
|
if (res.code==100) { |
||||
|
this.query1.uid=row.id |
||||
|
this.query1.buyer_account_type=res.data.buyer_black |
||||
|
this.query1.enter_shop_type=res.data.enter_shop_black |
||||
|
this.query1.third_party_type=res.data.third_party_black |
||||
|
this.editVisible2=true; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 操作记录 |
||||
|
operationRecord(row){ |
||||
|
let data={uid:row.id} |
||||
|
operationRecord(data).then(res => { |
||||
|
console.log(res); |
||||
|
if(res.code==100){ |
||||
|
this.recordList=res.data.list |
||||
|
} |
||||
|
this.editVisible1=true |
||||
|
}); |
||||
|
}, |
||||
|
// 重置方法 |
||||
|
reset(){ |
||||
|
Object.keys(this.query).forEach(key => { |
||||
|
console.info(key) |
||||
|
if (key!='page' && key!='limit') { |
||||
|
this.query[key] = '' |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
//时间戳转换时间 |
||||
|
formatDate(row,colnum){ |
||||
|
console.info(colnum) |
||||
|
return moment(row[colnum.property]*1000).format('YYYY-MM-DD HH:mm:ss') |
||||
|
}, |
||||
|
// 获取 easy-mock 的模拟数据 |
||||
|
getData() { |
||||
|
blackList(this.query).then(res => { |
||||
|
console.log(res); |
||||
|
if (res.code==100) { |
||||
|
this.tableData = res.data.list; |
||||
|
this.pageTotal = res.data.count; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 触发搜索按钮 |
||||
|
handleSearch() { |
||||
|
this.$set(this.query, 'page', 1); |
||||
|
this.getData(); |
||||
|
}, |
||||
|
// 编辑操作 |
||||
|
handleEdit(index, row) { |
||||
|
this.idx = index; |
||||
|
this.form = row; |
||||
|
this.editVisible = true; |
||||
|
}, |
||||
|
// 保存编辑 |
||||
|
saveEdit() { |
||||
|
this.editVisible = false; |
||||
|
this.$message.success(`修改第 ${this.idx + 1} 行成功`); |
||||
|
this.$set(this.tableData, this.idx, this.form); |
||||
|
}, |
||||
|
// 分页导航 |
||||
|
handlePageChange(val) { |
||||
|
this.$set(this.query, 'page', val); |
||||
|
this.getData(); |
||||
|
} |
||||
|
}, |
||||
|
filters:{ |
||||
|
blackType(res){ |
||||
|
console.info(res) |
||||
|
let text=''; |
||||
|
if (res.is_buyer_black==1) { |
||||
|
text+='购买方，' |
||||
|
} |
||||
|
if (res.is_enter_shop_black==1) { |
||||
|
text+='挂牌方，' |
||||
|
} |
||||
|
if (res.is_third_party_black==1) { |
||||
|
text+='第三方，' |
||||
|
} |
||||
|
if (res.is_third_party_black==1 && res.is_buyer_black==1 &&res.is_enter_shop_black==1) { |
||||
|
text='全部' |
||||
|
} |
||||
|
var reg=/，$/gi; |
||||
|
text=text.replace(reg,""); |
||||
|
return text; |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.record_select{ |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
.record_select >>> .el-checkbox{ |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
.record_content{ |
||||
|
font-size: 16px; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
.recordTips{ |
||||
|
font-size: 16px; |
||||
|
margin-bottom: 15px; |
||||
|
} |
||||
|
.handle-box { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.handle-select { |
||||
|
width: 120px; |
||||
|
} |
||||
|
|
||||
|
.handle-input { |
||||
|
width: 150px; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
.table { |
||||
|
width: 100%; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.red { |
||||
|
color: #ff0000; |
||||
|
} |
||||
|
.mr10 { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
.table-td-thumb { |
||||
|
display: block; |
||||
|
margin: auto; |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,246 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="crumbs"> |
||||
|
<el-breadcrumb separator="/"> |
||||
|
<el-breadcrumb-item> |
||||
|
<i class="el-icon-lx-cascades"></i> 账户管理 |
||||
|
</el-breadcrumb-item> |
||||
|
<el-breadcrumb-item>挂牌方入驻审核</el-breadcrumb-item> |
||||
|
</el-breadcrumb> |
||||
|
</div> |
||||
|
<div class="container"> |
||||
|
<div class="handle-box"> |
||||
|
<el-input v-model="query.firm_name" placeholder="机构名称" class="handle-input mr10"></el-input> |
||||
|
<el-input v-model="query.phone" placeholder="账户号码" class="handle-input mr10"></el-input> |
||||
|
<el-input v-model="query.username" placeholder="申请人名称" class="handle-input mr10"></el-input> |
||||
|
<el-select v-model="query.buyer_account_type" placeholder="摘牌方" class="handle-select mr10" clearable> |
||||
|
<el-option key="1" label="是" :value="1"></el-option> |
||||
|
<el-option key="2" label="否" :value="0"></el-option> |
||||
|
</el-select> |
||||
|
<el-select v-model="query.third_party_type" placeholder="第三方服务机构" class="handle-select mr10" clearable> |
||||
|
<el-option key="1" label="是" :value="1"></el-option> |
||||
|
<el-option key="2" label="否" :value="0"></el-option> |
||||
|
</el-select> |
||||
|
<el-select v-model="query.audit_status" placeholder="审核状态" class="handle-select mr10" clearable> |
||||
|
<el-option key="1" label="已通过" :value="1"></el-option> |
||||
|
<el-option key="2" label="待审核" :value="0"></el-option> |
||||
|
<el-option key="3" label="未通过" :value="2"></el-option> |
||||
|
</el-select> |
||||
|
<el-date-picker |
||||
|
class="mr10" |
||||
|
v-model="query.time" |
||||
|
type="datetimerange" |
||||
|
:picker-options="pickerOptions" |
||||
|
range-separator="至" |
||||
|
value-format="yyyy-MM-dd HH:mm:ss" |
||||
|
start-placeholder="开始日期" |
||||
|
end-placeholder="结束日期" |
||||
|
align="right" |
||||
|
> |
||||
|
</el-date-picker> |
||||
|
<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button> |
||||
|
<el-button type="primary" plain @click="reset">重置</el-button> |
||||
|
</div> |
||||
|
<el-table |
||||
|
:data="tableData" |
||||
|
border |
||||
|
class="table" |
||||
|
ref="multipleTable" |
||||
|
header-cell-class-name="table-header" |
||||
|
> |
||||
|
<el-table-column prop="id" label="序号" width="55" align="center"></el-table-column> |
||||
|
<el-table-column prop="create_time" label="申请时间" :formatter="formatDate"></el-table-column> |
||||
|
<el-table-column label="机构名称" prop="firm_name"></el-table-column> |
||||
|
<el-table-column label="账户号码" prop="phone"></el-table-column> |
||||
|
<el-table-column prop="apply_name" label="申请人名称"></el-table-column> |
||||
|
<el-table-column label="摘牌方开户/第三方服务机构开户" align="center" width="250"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span>{{scope.row.is_buyer==1 ? '是':'否'}}</span> |
||||
|
<span> / {{scope.row.is_third_party==1 ? '是':'否'}}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<!-- <el-table-column label="是否第三方服务机构"> |
||||
|
<template slot-scope="scope"> |
||||
|
</template> |
||||
|
</el-table-column> --> |
||||
|
<el-table-column prop="audit_status" label="审核状态"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.audit_status==1">已通过</span> |
||||
|
<span v-else-if="scope.row.audit_status==0">待审核</span> |
||||
|
<span v-else>未通过</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="操作" width="280" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
@click="handleEdit(scope.$index, scope.row)" |
||||
|
>资料审核</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<div class="pagination"> |
||||
|
<el-pagination |
||||
|
background |
||||
|
layout="total, prev, pager, next" |
||||
|
:current-page="query.page" |
||||
|
:page-size="query.limit" |
||||
|
:total="pageTotal" |
||||
|
@current-change="handlePageChange" |
||||
|
></el-pagination> |
||||
|
</div> |
||||
|
</div> |
||||
|
<whyDialog v-if="editVisible" :isshow="editVisible" :dialogID="dialogID" |
||||
|
:dialogType="dialogType" @MisShow="MisShow" @getData="getData" :isexamine="true" :account_type="query.type"> |
||||
|
</whyDialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { applyList } from '../../../api/index'; |
||||
|
import moment from 'moment' |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
query: { |
||||
|
firm_name: '', |
||||
|
phone: '', |
||||
|
username: '', |
||||
|
buyer_account_type: '', |
||||
|
enter_shop_type: '', |
||||
|
third_party_type: '', |
||||
|
audit_status: '', |
||||
|
time: '', |
||||
|
page: 1, |
||||
|
limit: 10, |
||||
|
type:'enter_shop' |
||||
|
}, |
||||
|
tableData: [], |
||||
|
multipleSelection: [], |
||||
|
delList: [], |
||||
|
editVisible: false, |
||||
|
pageTotal: 0, |
||||
|
dialogType:1, |
||||
|
dialogID:'', |
||||
|
pickerOptions: { |
||||
|
shortcuts: [ |
||||
|
{ |
||||
|
text: "最近一周", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: "最近一个月", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: "最近三个月", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
components:{ |
||||
|
whyDialog: () => import('../../common/dialog/insex.vue') |
||||
|
}, |
||||
|
created() { |
||||
|
this.getData(); |
||||
|
}, |
||||
|
methods: { |
||||
|
MisShow(){ |
||||
|
this.editVisible=false |
||||
|
}, |
||||
|
// 重置方法 |
||||
|
reset(){ |
||||
|
Object.keys(this.query).forEach(key => { |
||||
|
console.info(key) |
||||
|
if (key!='page' && key!='limit') { |
||||
|
this.query[key] = '' |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
//时间戳转换时间 |
||||
|
formatDate(row,colnum){ |
||||
|
return moment(row.create_time*1000).format('YYYY-MM-DD HH:mm:ss') |
||||
|
}, |
||||
|
// 获取 easy-mock 的模拟数据 |
||||
|
getData() { |
||||
|
applyList(this.query).then(res => { |
||||
|
console.log(res); |
||||
|
if (res.code==100) { |
||||
|
this.tableData = res.data.list; |
||||
|
this.pageTotal = res.data.count; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 触发搜索按钮 |
||||
|
handleSearch() { |
||||
|
this.$set(this.query, 'page', 1); |
||||
|
this.getData(); |
||||
|
}, |
||||
|
// 编辑操作 |
||||
|
handleEdit(index, row) { |
||||
|
this.editVisible = true; |
||||
|
this.dialogID=row.id; |
||||
|
this.dialogType=1 |
||||
|
}, |
||||
|
// 保存编辑 |
||||
|
saveEdit() { |
||||
|
this.editVisible = false; |
||||
|
this.$message.success(`修改第 ${this.idx + 1} 行成功`); |
||||
|
this.$set(this.tableData, this.idx, this.form); |
||||
|
}, |
||||
|
// 分页导航 |
||||
|
handlePageChange(val) { |
||||
|
this.$set(this.query, 'page', val); |
||||
|
this.getData(); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.handle-box { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.handle-select { |
||||
|
width: 120px; |
||||
|
} |
||||
|
|
||||
|
.handle-input { |
||||
|
width: 150px; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
.table { |
||||
|
width: 100%; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.red { |
||||
|
color: #ff0000; |
||||
|
} |
||||
|
.mr10 { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
.table-td-thumb { |
||||
|
display: block; |
||||
|
margin: auto; |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,248 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="crumbs"> |
||||
|
<el-breadcrumb separator="/"> |
||||
|
<el-breadcrumb-item> |
||||
|
<i class="el-icon-lx-cascades"></i> 账户管理 |
||||
|
</el-breadcrumb-item> |
||||
|
<el-breadcrumb-item>摘牌方开户审核</el-breadcrumb-item> |
||||
|
</el-breadcrumb> |
||||
|
</div> |
||||
|
<div class="container"> |
||||
|
<div class="handle-box"> |
||||
|
<el-input v-model="query.firm_name" placeholder="机构名称" class="handle-input mr10"></el-input> |
||||
|
<el-input v-model="query.phone" placeholder="账户号码" class="handle-input mr10"></el-input> |
||||
|
<el-input v-model="query.username" placeholder="申请人名称" class="handle-input mr10"></el-input> |
||||
|
<el-select v-model="query.enter_shop_type" placeholder="挂牌方" class="handle-select mr10" clearable> |
||||
|
<el-option key="1" label="是" :value="1"></el-option> |
||||
|
<el-option key="2" label="否" :value="0"></el-option> |
||||
|
</el-select> |
||||
|
<el-select v-model="query.third_party_type" placeholder="第三方服务机构" class="handle-select mr10" clearable> |
||||
|
<el-option key="1" label="是" :value="1"></el-option> |
||||
|
<el-option key="2" label="否" :value="0"></el-option> |
||||
|
</el-select> |
||||
|
<el-select v-model="query.audit_status" placeholder="审核状态" class="handle-select mr10" clearable> |
||||
|
<el-option key="1" label="已通过" :value="1"></el-option> |
||||
|
<el-option key="2" label="待审核" :value="0"></el-option> |
||||
|
<el-option key="3" label="未通过" :value="2"></el-option> |
||||
|
</el-select> |
||||
|
<el-date-picker |
||||
|
class="mr10" |
||||
|
v-model="query.time" |
||||
|
type="datetimerange" |
||||
|
:picker-options="pickerOptions" |
||||
|
range-separator="至" |
||||
|
value-format="yyyy-MM-dd HH:mm:ss" |
||||
|
start-placeholder="开始日期" |
||||
|
end-placeholder="结束日期" |
||||
|
align="right" |
||||
|
> |
||||
|
</el-date-picker> |
||||
|
<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button> |
||||
|
<el-button type="primary" plain @click="reset">重置</el-button> |
||||
|
</div> |
||||
|
<el-table |
||||
|
:data="tableData" |
||||
|
border |
||||
|
class="table" |
||||
|
ref="multipleTable" |
||||
|
header-cell-class-name="table-header" |
||||
|
> |
||||
|
<el-table-column prop="id" label="序号" width="55" align="center"></el-table-column> |
||||
|
<el-table-column :formatter="formatDate" prop="create_time" label="申请时间"></el-table-column> |
||||
|
<el-table-column label="机构名称" prop="firm_name"></el-table-column> |
||||
|
<el-table-column label="账户号码" prop="phone"></el-table-column> |
||||
|
<el-table-column prop="apply_name" label="申请人名称"></el-table-column> |
||||
|
<el-table-column prop="is_enter_shop" label="挂牌方开户/第三方服务机构开户" align="center" width="250"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span>{{scope.row.is_enter_shop==1 ? '是':'否'}}</span> |
||||
|
<span> /{{scope.row.is_third_party==1 ? '是':'否'}}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<!-- <el-table-column prop="is_third_party" label="是否第三方服务机构"> |
||||
|
<template slot-scope="scope"> |
||||
|
|
||||
|
</template> |
||||
|
</el-table-column> --> |
||||
|
|
||||
|
<el-table-column prop="audit_status" label="审核状态"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.audit_status==1">已通过</span> |
||||
|
<span v-else-if="scope.row.audit_status==0">待审核</span> |
||||
|
<span v-else>未通过</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="操作" width="280" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
@click="handleEdit(scope.$index, scope.row)" |
||||
|
>资料审核</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<div class="pagination"> |
||||
|
<el-pagination |
||||
|
background |
||||
|
layout="total, prev, pager, next" |
||||
|
:current-page="query.page" |
||||
|
:page-size="query.limit" |
||||
|
:total="pageTotal" |
||||
|
@current-change="handlePageChange" |
||||
|
></el-pagination> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<whyDialog v-if="editVisible" :isshow="editVisible" :dialogID="dialogID" :dialogType="dialogType" @MisShow="MisShow" @getData="getData" :isexamine="true" :account_type="query.type"></whyDialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { applyList } from '../../../api/index'; |
||||
|
import moment from 'moment' |
||||
|
export default { |
||||
|
// name: 'basetable', |
||||
|
data() { |
||||
|
return { |
||||
|
query: { |
||||
|
firm_name: '', |
||||
|
phone: '', |
||||
|
username: '', |
||||
|
buyer_account_type: '', |
||||
|
enter_shop_type: '', |
||||
|
third_party_type: '', |
||||
|
audit_status: '', |
||||
|
time: '', |
||||
|
page: 1, |
||||
|
limit: 10, |
||||
|
type:'buyer' |
||||
|
}, |
||||
|
tableData: [], |
||||
|
multipleSelection: [], |
||||
|
delList: [], |
||||
|
editVisible: false, |
||||
|
pageTotal: 0, |
||||
|
dialogType:1, |
||||
|
dialogID:'', |
||||
|
pickerOptions: { |
||||
|
shortcuts: [ |
||||
|
{ |
||||
|
text: "最近一周", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: "最近一个月", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: "最近三个月", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
components:{ |
||||
|
whyDialog: () => import('../../common/dialog/insex.vue') |
||||
|
}, |
||||
|
created() { |
||||
|
this.getData(); |
||||
|
}, |
||||
|
methods: { |
||||
|
MisShow(){ |
||||
|
this.editVisible=false |
||||
|
}, |
||||
|
// 重置方法 |
||||
|
reset(){ |
||||
|
Object.keys(this.query).forEach(key => { |
||||
|
console.info(key) |
||||
|
if (key!='page' && key!='limit') { |
||||
|
this.query[key] = '' |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
//时间戳转换时间 |
||||
|
formatDate(row,colnum){ |
||||
|
return moment(row.create_time*1000).format('YYYY-MM-DD HH:mm:ss') |
||||
|
}, |
||||
|
// 获取 easy-mock 的模拟数据 |
||||
|
getData() { |
||||
|
applyList(this.query).then(res => { |
||||
|
console.log(res); |
||||
|
if (res.code==100) { |
||||
|
this.tableData = res.data.list; |
||||
|
this.pageTotal = res.data.count; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 触发搜索按钮 |
||||
|
handleSearch() { |
||||
|
this.$set(this.query, 'page', 1); |
||||
|
this.getData(); |
||||
|
}, |
||||
|
// 编辑操作 |
||||
|
handleEdit(index, row) { |
||||
|
this.editVisible = true; |
||||
|
this.dialogID=row.id; |
||||
|
this.dialogType=1 |
||||
|
}, |
||||
|
// 保存编辑 |
||||
|
saveEdit() { |
||||
|
this.editVisible = false; |
||||
|
this.$message.success(`修改第 ${this.idx + 1} 行成功`); |
||||
|
this.$set(this.tableData, this.idx, this.form); |
||||
|
}, |
||||
|
// 分页导航 |
||||
|
handlePageChange(val) { |
||||
|
this.$set(this.query, 'page', val); |
||||
|
this.getData(); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.handle-box { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.handle-select { |
||||
|
width: 120px; |
||||
|
} |
||||
|
|
||||
|
.handle-input { |
||||
|
width: 150px; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
.table { |
||||
|
width: 100%; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.red { |
||||
|
color: #ff0000; |
||||
|
} |
||||
|
.mr10 { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
.table-td-thumb { |
||||
|
display: block; |
||||
|
margin: auto; |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,369 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="crumbs"> |
||||
|
<el-breadcrumb separator="/"> |
||||
|
<el-breadcrumb-item> |
||||
|
<i class="el-icon-lx-cascades"></i> 账户管理 |
||||
|
</el-breadcrumb-item> |
||||
|
<el-breadcrumb-item>交易平台账户查询</el-breadcrumb-item> |
||||
|
</el-breadcrumb> |
||||
|
</div> |
||||
|
<div class="container"> |
||||
|
<div class="handle-box"> |
||||
|
<el-input v-model="query.firm_name" placeholder="机构名称" class="handle-input mr10"></el-input> |
||||
|
<el-input v-model="query.phone" placeholder="账户号码" class="handle-input mr10"></el-input> |
||||
|
<el-input v-model="query.username" placeholder="申请人名称" class="handle-input mr10"></el-input> |
||||
|
<el-select v-model="query.buyer_account_type" placeholder="摘牌方开户" clearable class="handle-select mr10"> |
||||
|
<el-option key="1" label="是" :value="1"></el-option> |
||||
|
<el-option key="2" label="否" :value="0"></el-option> |
||||
|
</el-select> |
||||
|
<el-select v-model="query.enter_shop_type" placeholder="挂牌方开户" clearable class="handle-select mr10"> |
||||
|
<el-option key="1" label="是" :value="1"></el-option> |
||||
|
<el-option key="2" label="否" :value="0"></el-option> |
||||
|
</el-select> |
||||
|
<el-select v-model="query.third_party_type" placeholder="第三方服务机构" clearable class="handle-select mr10"> |
||||
|
<el-option key="1" label="是" :value="1"></el-option> |
||||
|
<el-option key="2" label="否" :value="0"></el-option> |
||||
|
</el-select> |
||||
|
<el-select v-model="query.auditID" placeholder="审核人员" class="handle-select mr10" clearable > |
||||
|
<el-option v-for="item in auditList" :key="item.uid" :label="item.username" :value="item.uid"></el-option> |
||||
|
</el-select> |
||||
|
<el-date-picker |
||||
|
class="mr10" |
||||
|
v-model="query.time" |
||||
|
type="datetimerange" |
||||
|
:picker-options="pickerOptions" |
||||
|
range-separator="至" |
||||
|
value-format="yyyy-MM-dd HH:mm:ss" |
||||
|
start-placeholder="开始日期" |
||||
|
end-placeholder="结束日期" |
||||
|
align="right" |
||||
|
> |
||||
|
</el-date-picker> |
||||
|
<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button> |
||||
|
<el-button type="primary" plain @click="reset">重置</el-button> |
||||
|
</div> |
||||
|
<el-table |
||||
|
:data="tableData" |
||||
|
border |
||||
|
class="table" |
||||
|
ref="multipleTable" |
||||
|
header-cell-class-name="table-header" |
||||
|
> |
||||
|
<el-table-column prop="id" label="序号" width="55" align="center"></el-table-column> |
||||
|
<el-table-column :formatter="formatDate" prop="create_time" label="申请时间"></el-table-column> |
||||
|
<el-table-column label="类型" > |
||||
|
<template slot-scope="scope"> |
||||
|
<span>{{scope.row.account_type==1 ? "机构": "个人"}}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="机构名称" prop="firm_name"></el-table-column> |
||||
|
<el-table-column label="账户号码" prop="phone"></el-table-column> |
||||
|
<el-table-column prop="apply_name" label="申请人名称"></el-table-column> |
||||
|
<el-table-column prop="is_buyer" label="摘牌方开户/挂牌方开户/第三方服务机构开户" width="320" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span>{{scope.row.is_buyer==1 ? '是':'否'}}</span> |
||||
|
<span> / {{scope.row.is_enter_shop==1 ? '是':'否'}}</span> |
||||
|
<span > / {{scope.row.is_third_party==1 ? '是':'否'}}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<!-- <el-table-column prop="is_enter_shop" label="是否入驻商家"> |
||||
|
<template slot-scope="scope"> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="is_third_party" label="是否第三方服务机构"> |
||||
|
<template slot-scope="scope"> |
||||
|
</template> |
||||
|
</el-table-column> --> |
||||
|
<el-table-column prop="check_name" label="审核人员"></el-table-column> |
||||
|
<el-table-column label="操作" width="280" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
@click="handleEdit(scope.$index, scope.row)" |
||||
|
>资料查看</el-button> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
@click="operationRecord(scope.row)" |
||||
|
>操作记录</el-button> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
@click="blacklist( scope.row)" |
||||
|
>添加黑名单</el-button> |
||||
|
<!-- <el-button |
||||
|
type="text" |
||||
|
@click="handleDelete(scope.$index, scope.row)" |
||||
|
>商家配置</el-button> --> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<div class="pagination"> |
||||
|
<el-pagination |
||||
|
background |
||||
|
layout="total, prev, pager, next" |
||||
|
:current-page="query.page" |
||||
|
:page-size="query.limit" |
||||
|
:total="pageTotal" |
||||
|
@current-change="handlePageChange" |
||||
|
></el-pagination> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 操作记录 --> |
||||
|
<el-dialog title="操作记录" :visible.sync="editVisible1" width="40%"> |
||||
|
<p class="recordTips">以下为该账户历史操作记录：</p> |
||||
|
<p class="record_content" v-for="(item,index) in recordList" :key="index"> |
||||
|
<span>{{index + 1}}.</span> |
||||
|
<span>{{item.create_time | formatDate}}</span> |
||||
|
<span>{{item.operation_content}}</span> |
||||
|
</p> |
||||
|
</el-dialog> |
||||
|
<!-- 添加黑名单 --> |
||||
|
<el-dialog title="提示" :visible.sync="editVisible2" width="30%"> |
||||
|
<p class="recordTips">请确认是否需要添加黑名单？</p> |
||||
|
<div class="record_select"> |
||||
|
<el-checkbox v-model="query1.buyer_account_type" :true-label=1 :false-label=0 >摘牌方</el-checkbox> |
||||
|
<el-checkbox v-model="query1.enter_shop_type" :true-label=1 :false-label=0 >挂牌方</el-checkbox> |
||||
|
<el-checkbox v-model="query1.third_party_type" :true-label=1 :false-label=0 >第三方服务机构</el-checkbox> |
||||
|
</div> |
||||
|
<span slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="editVisible2 = false">取 消</el-button> |
||||
|
<el-button type="primary" @click="addBlacklist">确 定</el-button> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
<whyDialog v-if="editVisible" :isshow="editVisible" :dialogID="dialogID" |
||||
|
:dialogType="dialogType" @MisShow="MisShow" :isexamine="false" :account_type="account_type" :listDate="listDate"> |
||||
|
</whyDialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { platformAccountList, operationRecord,updateBlackList,getBlack,auditList} from '../../../api/index'; |
||||
|
import moment from 'moment' |
||||
|
export default { |
||||
|
// name: 'platformSelect', |
||||
|
data() { |
||||
|
return { |
||||
|
query: { |
||||
|
firm_name: '', |
||||
|
phone: '', |
||||
|
username: '', |
||||
|
buyer_account_type: '', |
||||
|
enter_shop_type: '', |
||||
|
third_party_type: '', |
||||
|
auditID: '', |
||||
|
time: '', |
||||
|
page: 1, |
||||
|
limit: 10 |
||||
|
}, |
||||
|
listDate:{}, |
||||
|
query1:{ |
||||
|
uid:'', |
||||
|
buyer_account_type:0, |
||||
|
enter_shop_type:0, |
||||
|
third_party_type:0 |
||||
|
}, |
||||
|
account_type:'buyer', |
||||
|
dialogID:'', |
||||
|
dialogType:'', |
||||
|
tableData: [], |
||||
|
recordList:[], |
||||
|
auditList:[], |
||||
|
multipleSelection: [], |
||||
|
delList: [], |
||||
|
editVisible: false, |
||||
|
editVisible1: false, |
||||
|
editVisible2:false, |
||||
|
pageTotal: 0, |
||||
|
pickerOptions: { |
||||
|
shortcuts: [ |
||||
|
{ |
||||
|
text: "最近一周", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: "最近一个月", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: "最近三个月", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
components:{ |
||||
|
whyDialog: () => import('../../common/dialog/insex.vue') |
||||
|
}, |
||||
|
created() { |
||||
|
this.getData(); |
||||
|
this.getAuditList(); |
||||
|
// console.info(this.query1) |
||||
|
}, |
||||
|
methods: { |
||||
|
// 重置方法 |
||||
|
reset(){ |
||||
|
Object.keys(this.query).forEach(key => { |
||||
|
console.info(key) |
||||
|
if (key!='page' && key!='limit') { |
||||
|
this.query[key] = '' |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 审核人员下拉数据 |
||||
|
getAuditList(){ |
||||
|
auditList().then(res => { |
||||
|
console.log(res); |
||||
|
if (res.code==100) { |
||||
|
this.auditList=res.data.list |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
//添加黑名单 |
||||
|
addBlacklist(){ |
||||
|
console.info(this.query1) |
||||
|
updateBlackList(this.query1).then(res => { |
||||
|
console.log(res); |
||||
|
if (res.code==100) { |
||||
|
this.$message.success(res.msg); |
||||
|
}else{ |
||||
|
this.$message.error(res.msg); |
||||
|
} |
||||
|
this.editVisible2=false |
||||
|
}); |
||||
|
}, |
||||
|
//显示添加黑名单 |
||||
|
blacklist(row){ |
||||
|
let data={uid:row.id} |
||||
|
getBlack(data).then(res => { |
||||
|
console.log(res); |
||||
|
if (res.code==100) { |
||||
|
this.query1.uid=row.id |
||||
|
this.query1.buyer_account_type=res.data.buyer_black |
||||
|
this.query1.enter_shop_type=res.data.enter_shop_black |
||||
|
this.query1.third_party_type=res.data.third_party_black |
||||
|
this.editVisible2=true; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 操作记录 |
||||
|
operationRecord(row){ |
||||
|
let data={uid:row.id} |
||||
|
operationRecord(data).then(res => { |
||||
|
console.log(res); |
||||
|
if(res.code==100){ |
||||
|
this.recordList=res.data.list |
||||
|
} |
||||
|
this.editVisible1=true |
||||
|
}); |
||||
|
}, |
||||
|
// 获取 easy-mock 的模拟数据 |
||||
|
getData() { |
||||
|
platformAccountList(this.query).then(res => { |
||||
|
console.log(res); |
||||
|
if (res.code==100) { |
||||
|
this.tableData = res.data.list; |
||||
|
this.pageTotal = res.data.count; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 触发搜索按钮 |
||||
|
handleSearch() { |
||||
|
console.info(this.query) |
||||
|
this.$set(this.query, 'page', 1); |
||||
|
this.getData(); |
||||
|
}, |
||||
|
// 编辑操作 |
||||
|
handleEdit(index, row) { |
||||
|
this.editVisible = true; |
||||
|
this.dialogID=row.id; |
||||
|
this.dialogType=1 |
||||
|
if (row.buyer_data==1) { |
||||
|
this.account_type='buyer' |
||||
|
}else if (row.enter_shop_data==1) { |
||||
|
this.account_type='enter_shop' |
||||
|
}else if (row.third_party_data==1) { |
||||
|
this.account_type='third_party' |
||||
|
} |
||||
|
this.listDate=row |
||||
|
}, |
||||
|
// 分页导航 |
||||
|
handlePageChange(val) { |
||||
|
this.$set(this.query, 'page', val); |
||||
|
this.getData(); |
||||
|
}, |
||||
|
//时间戳转换时间 |
||||
|
formatDate(row,colnum){ |
||||
|
return moment(row.create_time*1000).format('YYYY-MM-DD HH:mm:ss') |
||||
|
}, |
||||
|
MisShow(){ |
||||
|
this.editVisible=false |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.record_select{ |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
.record_select >>> .el-checkbox{ |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
.record_content{ |
||||
|
font-size: 16px; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
.recordTips{ |
||||
|
font-size: 16px; |
||||
|
margin-bottom: 15px; |
||||
|
} |
||||
|
.handle-box { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.handle-select { |
||||
|
width: 120px; |
||||
|
} |
||||
|
|
||||
|
.handle-input { |
||||
|
width: 150px; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
.table { |
||||
|
width: 100%; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.red { |
||||
|
color: #ff0000; |
||||
|
} |
||||
|
.mr10 { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
.table-td-thumb { |
||||
|
display: block; |
||||
|
margin: auto; |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
} |
||||
|
.el-dialog__wrapper >>> .el-dialog__body{ |
||||
|
padding: 10px 20px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,246 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="crumbs"> |
||||
|
<el-breadcrumb separator="/"> |
||||
|
<el-breadcrumb-item> |
||||
|
<i class="el-icon-lx-cascades"></i> 账户管理 |
||||
|
</el-breadcrumb-item> |
||||
|
<el-breadcrumb-item>第三方服务机构审核</el-breadcrumb-item> |
||||
|
</el-breadcrumb> |
||||
|
</div> |
||||
|
<div class="container"> |
||||
|
<div class="handle-box"> |
||||
|
<el-input v-model="query.firm_name" placeholder="机构名称" class="handle-input mr10"></el-input> |
||||
|
<el-input v-model="query.phone" placeholder="账户号码" class="handle-input mr10"></el-input> |
||||
|
<el-input v-model="query.username" placeholder="申请人名称" class="handle-input mr10"></el-input> |
||||
|
<el-select v-model="query.buyer_account_type" placeholder="摘牌方开户" class="handle-select mr10" clearable> |
||||
|
<el-option key="1" label="是" :value="1"></el-option> |
||||
|
<el-option key="2" label="否" :value="0"></el-option> |
||||
|
</el-select> |
||||
|
<el-select v-model="query.enter_shop_type" placeholder="挂牌方" class="handle-select mr10" clearable> |
||||
|
<el-option key="1" label="是" :value="1"></el-option> |
||||
|
<el-option key="2" label="否" :value="0"></el-option> |
||||
|
</el-select> |
||||
|
<el-select v-model="query.audit_status" placeholder="审核状态" class="handle-select mr10" clearable> |
||||
|
<el-option key="1" label="已通过" :value="1"></el-option> |
||||
|
<el-option key="2" label="待审核" :value="0"></el-option> |
||||
|
<el-option key="3" label="未通过" :value="2"></el-option> |
||||
|
</el-select> |
||||
|
<el-date-picker |
||||
|
class="mr10" |
||||
|
v-model="query.time" |
||||
|
type="datetimerange" |
||||
|
:picker-options="pickerOptions" |
||||
|
range-separator="至" |
||||
|
value-format="yyyy-MM-dd HH:mm:ss" |
||||
|
start-placeholder="开始日期" |
||||
|
end-placeholder="结束日期" |
||||
|
align="right" |
||||
|
> |
||||
|
</el-date-picker> |
||||
|
<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button> |
||||
|
<el-button type="primary" plain @click="reset">重置</el-button> |
||||
|
</div> |
||||
|
<el-table |
||||
|
:data="tableData" |
||||
|
border |
||||
|
class="table" |
||||
|
ref="multipleTable" |
||||
|
header-cell-class-name="table-header" |
||||
|
> |
||||
|
<el-table-column prop="id" label="序号" width="55" align="center"></el-table-column> |
||||
|
<el-table-column prop="create_time" label="申请时间" :formatter="formatDate"></el-table-column> |
||||
|
<el-table-column label="机构名称" prop="firm_name"></el-table-column> |
||||
|
<el-table-column label="账户号码" prop="phone"></el-table-column> |
||||
|
<el-table-column prop="apply_name" label="申请人名称"></el-table-column> |
||||
|
<el-table-column prop="address" label="摘牌方开户/挂牌方开户" align="center" width="250"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span>{{scope.row.is_buyer==1 ? '是':'否'}}</span> |
||||
|
<span> / {{scope.row.is_enter_shop==1 ? '是':'否'}}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<!-- <el-table-column prop="address" label="是否为挂牌方"> |
||||
|
<template slot-scope="scope"> |
||||
|
</template> |
||||
|
</el-table-column> --> |
||||
|
<el-table-column prop="audit_status" label="审核状态"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.audit_status==1">已通过</span> |
||||
|
<span v-else-if="scope.row.audit_status==0">待审核</span> |
||||
|
<span v-else>未通过</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="操作" width="280" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
@click="handleEdit(scope.$index, scope.row)" |
||||
|
>资料审核</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<div class="pagination"> |
||||
|
<el-pagination |
||||
|
background |
||||
|
layout="total, prev, pager, next" |
||||
|
:current-page="query.page" |
||||
|
:page-size="query.limit" |
||||
|
:total="pageTotal" |
||||
|
@current-change="handlePageChange" |
||||
|
></el-pagination> |
||||
|
</div> |
||||
|
</div> |
||||
|
<whyDialog v-if="editVisible" :isshow="editVisible" :dialogID="dialogID" |
||||
|
:dialogType="dialogType" @MisShow="MisShow" @getData="getData" :isexamine="true" :account_type="query.type"> |
||||
|
</whyDialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { applyList } from '../../../api/index'; |
||||
|
import moment from 'moment' |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
dialogType:1, |
||||
|
dialogID:'', |
||||
|
query: { |
||||
|
firm_name: '', |
||||
|
phone: '', |
||||
|
username: '', |
||||
|
buyer_account_type: '', |
||||
|
enter_shop_type: '', |
||||
|
third_party_type: '', |
||||
|
audit_status: '', |
||||
|
time: '', |
||||
|
page: 1, |
||||
|
limit: 10, |
||||
|
type:'third_party' |
||||
|
}, |
||||
|
tableData: [], |
||||
|
multipleSelection: [], |
||||
|
delList: [], |
||||
|
editVisible: false, |
||||
|
pageTotal: 0, |
||||
|
pickerOptions: { |
||||
|
shortcuts: [ |
||||
|
{ |
||||
|
text: "最近一周", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: "最近一个月", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: "最近三个月", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
components:{ |
||||
|
whyDialog: () => import('../../common/dialog/insex.vue') |
||||
|
}, |
||||
|
created() { |
||||
|
this.getData(); |
||||
|
}, |
||||
|
methods: { |
||||
|
MisShow(){ |
||||
|
this.editVisible=false |
||||
|
}, |
||||
|
// 重置方法 |
||||
|
reset(){ |
||||
|
Object.keys(this.query).forEach(key => { |
||||
|
console.info(key) |
||||
|
if (key!='page' && key!='limit') { |
||||
|
this.query[key] = '' |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
//时间戳转换时间 |
||||
|
formatDate(row,colnum){ |
||||
|
return moment(row.create_time*1000).format('YYYY-MM-DD HH:mm:ss') |
||||
|
}, |
||||
|
// 获取 easy-mock 的模拟数据 |
||||
|
getData() { |
||||
|
applyList(this.query).then(res => { |
||||
|
console.log(res); |
||||
|
if (res.code==100) { |
||||
|
this.tableData = res.data.list; |
||||
|
this.pageTotal = res.data.count; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 触发搜索按钮 |
||||
|
handleSearch() { |
||||
|
this.$set(this.query, 'page', 1); |
||||
|
this.getData(); |
||||
|
}, |
||||
|
// 编辑操作 |
||||
|
handleEdit(index, row) { |
||||
|
this.editVisible = true; |
||||
|
this.dialogID=row.id; |
||||
|
this.dialogType=1 |
||||
|
}, |
||||
|
// 保存编辑 |
||||
|
saveEdit() { |
||||
|
this.editVisible = false; |
||||
|
this.$message.success(`修改第 ${this.idx + 1} 行成功`); |
||||
|
this.$set(this.tableData, this.idx, this.form); |
||||
|
}, |
||||
|
// 分页导航 |
||||
|
handlePageChange(val) { |
||||
|
this.$set(this.query, 'page', val); |
||||
|
this.getData(); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.handle-box { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.handle-select { |
||||
|
width: 120px; |
||||
|
} |
||||
|
|
||||
|
.handle-input { |
||||
|
width: 150px; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
.table { |
||||
|
width: 100%; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.red { |
||||
|
color: #ff0000; |
||||
|
} |
||||
|
.mr10 { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
.table-td-thumb { |
||||
|
display: block; |
||||
|
margin: auto; |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,319 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="crumbs"> |
||||
|
<el-breadcrumb separator="/"> |
||||
|
<el-breadcrumb-item> |
||||
|
<i class="el-icon-lx-cascades"></i> 资产管理 |
||||
|
</el-breadcrumb-item> |
||||
|
<el-breadcrumb-item>资产评估订单</el-breadcrumb-item> |
||||
|
</el-breadcrumb> |
||||
|
</div> |
||||
|
<div class="container"> |
||||
|
<div class="handle-box"> |
||||
|
<el-input placeholder="订单编号" v-model="query.batchcode" class="handle-input mr10"></el-input> |
||||
|
<el-input v-model="query.firm_name" placeholder="商家名称" class="handle-input mr10"></el-input> |
||||
|
<el-input placeholder="摘牌方名称" v-model="query.pay_username" class="handle-input mr10"></el-input> |
||||
|
<el-input placeholder="资产名称" v-model="query.account_name" class="handle-input mr10"></el-input> |
||||
|
<el-select placeholder="交易方式" v-model="query.trade_type" class="handle-select mr10"> |
||||
|
<el-option key="1" label="广东省" value="广东省"></el-option> |
||||
|
<el-option key="2" label="湖南省" value="湖南省"></el-option> |
||||
|
</el-select> |
||||
|
|
||||
|
<el-select v-model="query.auditID" placeholder="审核人员" class="handle-select mr10"> |
||||
|
<el-option key="1" label="广东省" value="广东省"></el-option> |
||||
|
<el-option key="2" label="湖南省" value="湖南省"></el-option> |
||||
|
</el-select> |
||||
|
<el-date-picker |
||||
|
class="mr10" |
||||
|
v-model="query.time" |
||||
|
type="datetimerange" |
||||
|
:picker-options="pickerOptions" |
||||
|
range-separator="至" |
||||
|
value-format="yyyy-MM-dd h:m:s" |
||||
|
start-placeholder="开始日期" |
||||
|
end-placeholder="结束日期" |
||||
|
align="right" |
||||
|
> |
||||
|
</el-date-picker> |
||||
|
<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button> |
||||
|
</div> |
||||
|
<el-table |
||||
|
:data="tableData" |
||||
|
border |
||||
|
class="table" |
||||
|
ref="multipleTable" |
||||
|
header-cell-class-name="table-header" |
||||
|
> |
||||
|
<el-table-column prop="id" label="序号" width="55" align="center"></el-table-column> |
||||
|
<el-table-column label="业务编码" prop="serial_number" ></el-table-column> |
||||
|
<el-table-column prop="create_time" label="创建时间" :formatter="formatDate"></el-table-column> |
||||
|
<el-table-column label="订单编号" prop="batchcode"></el-table-column> |
||||
|
<el-table-column prop="sell_firm_name" label="商家名称"></el-table-column> |
||||
|
<el-table-column label="资产名称" prop="serial_name"></el-table-column> |
||||
|
<el-table-column label="摘牌方名称" prop="firm_name"></el-table-column> |
||||
|
<el-table-column label="交易方式"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span>{{scope.row.order_pay_mode==1? '线下':'网银'}}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="count" label="交易数量"></el-table-column> |
||||
|
<el-table-column prop="price" label="交易金额"></el-table-column> |
||||
|
<el-table-column label="交易状态" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.status==0">待付款</span> |
||||
|
<span v-else-if="scope.row.status==1">待审核付款</span> |
||||
|
<span v-else-if="scope.row.status==2">待上传签约合同</span> |
||||
|
<span v-else-if="scope.row.status==3">待确认签约合同</span> |
||||
|
<span v-else-if="scope.row.status==4">待交付</span> |
||||
|
<span v-else-if="scope.row.status==5">待确认交付</span> |
||||
|
<span v-else-if="scope.row.status==6">待结算</span> |
||||
|
<span v-else-if="scope.row.status==7">已完成</span> |
||||
|
<span v-else-if="scope.row.status==8">已关闭</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="交易凭证" align="center"> |
||||
|
<template slot-scope="scope" > |
||||
|
<img :src="scope.row.pay_record" width="40" height="40" @click="onPreview([scope.row.pay_record])" v-if="scope.row.pay_record!=null"> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="auditID_name" label="审核人员"></el-table-column> |
||||
|
<el-table-column label="操作" width="280" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
@click="handleEdit(scope.$index, scope.row)" |
||||
|
>资产查看</el-button> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
@click="orderDetails(scope.$index, scope.row)" |
||||
|
>订单详情</el-button> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
v-if="scope.row.status==1" |
||||
|
@click="examine(scope.$index, scope.row)" |
||||
|
>付款审核</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<div class="pagination"> |
||||
|
<el-pagination |
||||
|
background |
||||
|
layout="total, prev, pager, next" |
||||
|
:current-page="query.page" |
||||
|
:page-size="query.limit" |
||||
|
:total="pageTotal" |
||||
|
@current-change="handlePageChange" |
||||
|
></el-pagination> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<whyDialog v-if="editVisible" :isshow="editVisible" :dialogID="dialogID" |
||||
|
:dialogType="dialogType" @MisShow="MisShow" :assets_type="1" > |
||||
|
</whyDialog> |
||||
|
<orderDialog v-if="orderShowVisible" :isshow="orderShowVisible" :batchcode="order_batchcode" |
||||
|
@orderShow="orderShow" > |
||||
|
</orderDialog> |
||||
|
<el-image-viewer |
||||
|
v-if="showViewer" |
||||
|
:on-close="closeViewer" |
||||
|
:url-list="showBigImgList" |
||||
|
/> |
||||
|
<el-dialog |
||||
|
title="付款审核" |
||||
|
:visible.sync="centerDialogVisible" |
||||
|
width="30%" |
||||
|
center> |
||||
|
<span>该订单的付款审核是否通过？</span> |
||||
|
<div class="selectExamine"> |
||||
|
<el-radio v-model="query1.check_pay_status" :label="1">审核通过</el-radio> |
||||
|
<el-radio v-model="query1.check_pay_status" :label="2">审核不通过</el-radio> |
||||
|
</div> |
||||
|
<div class="messege" v-if="query1.check_pay_status==2"> |
||||
|
<span>审核不通过原因：</span> |
||||
|
<el-input placeholder="请输入" v-model="query1.content" class="handle-input mr10"></el-input> |
||||
|
</div> |
||||
|
<span slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="centerDialogVisible = false">取 消</el-button> |
||||
|
<el-button type="primary" @click="selectExamine()">确 定</el-button> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { orderList ,orderCheckPay} from '../../../api/index'; |
||||
|
import ElImageViewer from 'element-ui/packages/image/src/image-viewer' |
||||
|
import moment from 'moment' |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
showViewer:false, |
||||
|
centerDialogVisible:false, |
||||
|
showBigImgList:[], |
||||
|
orderShowVisible:false, |
||||
|
order_batchcode:'', |
||||
|
query: { |
||||
|
page: 1, |
||||
|
limit: 10, |
||||
|
batchcode:'', |
||||
|
firm_name:'', |
||||
|
pay_username:'', |
||||
|
account_name:'', |
||||
|
trade_type:'', |
||||
|
auditID:'', |
||||
|
time:'', |
||||
|
order_type:0, |
||||
|
type:1 |
||||
|
}, |
||||
|
query1:{ |
||||
|
batchcode:'', |
||||
|
check_pay_status:1, |
||||
|
content:'' |
||||
|
}, |
||||
|
tableData: [], |
||||
|
multipleSelection: [], |
||||
|
delList: [], |
||||
|
editVisible: false, |
||||
|
dialogID:'', |
||||
|
dialogType:3, |
||||
|
pageTotal: 0, |
||||
|
pickerOptions: { |
||||
|
shortcuts: [ |
||||
|
{ |
||||
|
text: "最近一周", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: "最近一个月", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: "最近三个月", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
components:{ |
||||
|
whyDialog: () => import('../../common/dialog/insex.vue'), |
||||
|
orderDialog: () => import('../../common/orderDialog/index.vue'), |
||||
|
ElImageViewer |
||||
|
}, |
||||
|
created() { |
||||
|
this.getData(); |
||||
|
}, |
||||
|
methods: { |
||||
|
selectExamine(){ |
||||
|
orderCheckPay(this.query1).then(res=>{ |
||||
|
console.info(res) |
||||
|
if (res.code==100) { |
||||
|
this.$message.success('订单审核成功！'); |
||||
|
}else{ |
||||
|
this.$message.error(res.msg); |
||||
|
} |
||||
|
this.centerDialogVisible=false |
||||
|
this.getData(); |
||||
|
}) |
||||
|
}, |
||||
|
examine(index,row){ |
||||
|
this.query1.batchcode=row.batchcode |
||||
|
this.centerDialogVisible=true |
||||
|
}, |
||||
|
onPreview(url) { |
||||
|
this.showBigImgList=url; |
||||
|
this.showViewer = true |
||||
|
}, |
||||
|
// 关闭查看器 |
||||
|
closeViewer() { |
||||
|
this.showViewer = false |
||||
|
}, |
||||
|
MisShow(){ |
||||
|
this.editVisible=false |
||||
|
}, |
||||
|
orderShow(){ |
||||
|
this.orderShowVisible=false |
||||
|
}, |
||||
|
//时间戳转换时间 |
||||
|
formatDate(row,colnum){ |
||||
|
return moment(row.create_time*1000).format('YYYY-MM-DD HH:mm:ss') |
||||
|
}, |
||||
|
// 获取 easy-mock 的模拟数据 |
||||
|
getData() { |
||||
|
orderList(this.query).then(res => { |
||||
|
console.log(res); |
||||
|
this.tableData = res.data.list; |
||||
|
this.pageTotal = res.data.count ; |
||||
|
}); |
||||
|
}, |
||||
|
// 触发搜索按钮 |
||||
|
handleSearch() { |
||||
|
this.$set(this.query, 'pageIndex', 1); |
||||
|
this.getData(); |
||||
|
}, |
||||
|
// 编辑操作 |
||||
|
handleEdit(index, row) { |
||||
|
this.dialogID=row.asset_id; |
||||
|
this.editVisible = true; |
||||
|
}, |
||||
|
orderDetails(index, row) { |
||||
|
this.order_batchcode=row.batchcode; |
||||
|
this.orderShowVisible = true; |
||||
|
}, |
||||
|
// 分页导航 |
||||
|
handlePageChange(val) { |
||||
|
this.$set(this.query, 'page', val); |
||||
|
this.getData(); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.handle-box { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.handle-select { |
||||
|
width: 120px; |
||||
|
} |
||||
|
|
||||
|
.handle-input { |
||||
|
width: 150px; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
.table { |
||||
|
width: 100%; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.red { |
||||
|
color: #ff0000; |
||||
|
} |
||||
|
.mr10 { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
.table-td-thumb { |
||||
|
display: block; |
||||
|
margin: auto; |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
} |
||||
|
.selectExamine{ |
||||
|
margin: 10px 0; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,355 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="crumbs"> |
||||
|
<el-breadcrumb separator="/"> |
||||
|
<el-breadcrumb-item> |
||||
|
<i class="el-icon-lx-cascades"></i> 资产管理 |
||||
|
</el-breadcrumb-item> |
||||
|
<el-breadcrumb-item>资产信息查询</el-breadcrumb-item> |
||||
|
</el-breadcrumb> |
||||
|
</div> |
||||
|
<div class="container"> |
||||
|
<div class="handle-box"> |
||||
|
<el-input v-model="query.serial_number" placeholder="标准编号" class="handle-input mr10"></el-input> |
||||
|
<el-input v-model="query.account_name" placeholder="资产名称" class="handle-input mr10"></el-input> |
||||
|
<el-input v-model="query.firm_name" placeholder="机构名称" class="handle-input mr10"></el-input> |
||||
|
<el-select v-model="query.account_status" placeholder="资产状态" class="handle-select mr10"> |
||||
|
<el-option key="4" label="全部" :value="4"></el-option> |
||||
|
<el-option key="1" label="待托管" :value="1"></el-option> |
||||
|
<el-option key="2" label="已托管" :value="2"></el-option> |
||||
|
<el-option key="3" label="待发布" :value="3"></el-option> |
||||
|
<el-option key="5" label="已发布" :value="5"></el-option> |
||||
|
<el-option key="6" label="已下架" :value="6"></el-option> |
||||
|
</el-select> |
||||
|
<el-select v-model="query.account_apply" placeholder="审核状态" class="handle-select mr10"> |
||||
|
<el-option key="4" label="全部" :value="4"></el-option> |
||||
|
<el-option key="1" label="待托管审核" :value="1"></el-option> |
||||
|
<el-option key="2" label="托管审核不通过" :value="2"></el-option> |
||||
|
<el-option key="3" label="托管审核通过" :value="3"></el-option> |
||||
|
<el-option key="5" label="待发布审核" :value="5"></el-option> |
||||
|
<el-option key="6" label="发布审核不通过" :value="6"></el-option> |
||||
|
<el-option key="7" label="发布审核通过" :value="7"></el-option> |
||||
|
</el-select> |
||||
|
<el-select v-model="query.auditID" placeholder="审核人员" class="handle-select mr10"> |
||||
|
<el-option v-for="item in auditList" :key="item.uid" :label="item.username" :value="item.uid"></el-option> |
||||
|
</el-select> |
||||
|
<el-date-picker |
||||
|
class="mr10" |
||||
|
v-model="query.time" |
||||
|
type="datetimerange" |
||||
|
:picker-options="pickerOptions" |
||||
|
range-separator="至" |
||||
|
value-format="timestamp" |
||||
|
start-placeholder="开始日期" |
||||
|
end-placeholder="结束日期" |
||||
|
align="right" |
||||
|
> |
||||
|
</el-date-picker> |
||||
|
<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button> |
||||
|
<el-button type="primary" plain @click="reset">重置</el-button> |
||||
|
</div> |
||||
|
<el-table |
||||
|
:data="tableData" |
||||
|
border |
||||
|
class="table" |
||||
|
ref="multipleTable" |
||||
|
header-cell-class-name="table-header" |
||||
|
> |
||||
|
<el-table-column type="selection" width="55" align="center"></el-table-column> |
||||
|
<el-table-column prop="id" label="序号" width="55" align="center"></el-table-column> |
||||
|
<el-table-column prop="create_time" label="创建时间" :formatter="formatDate" align="center"></el-table-column> |
||||
|
<el-table-column label="业务编码" prop="serial_number" align="center"></el-table-column> |
||||
|
<el-table-column label="资产名称" prop="serial_name" align="center"></el-table-column> |
||||
|
<el-table-column prop="firm_name" label="机构名称" align="center"></el-table-column> |
||||
|
<el-table-column prop="count" label="托管数量" width="80" align="center"></el-table-column> |
||||
|
<el-table-column prop="surplus_count" label="剩余数量" width="80" align="center"></el-table-column> |
||||
|
<el-table-column prop="asset_status" label="资产状态" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.asset_status==1">待复核</span> |
||||
|
<span v-else-if="scope.row.asset_status==0">待审核</span> |
||||
|
<span v-else-if="scope.row.asset_status==2">发布中</span> |
||||
|
<span v-else-if="scope.row.asset_status==3">已下架</span> |
||||
|
<span v-else-if="scope.row.asset_status==4">已转让</span> |
||||
|
<span v-else-if="scope.row.asset_status==5">待支付挂牌费</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="username" label="审核人员" align="center"></el-table-column> |
||||
|
<el-table-column label="操作" width="250" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
@click="handleEdit(scope.$index, scope.row)" |
||||
|
>资料查看</el-button> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
v-if="scope.row.asset_status==2" |
||||
|
@click="operationRecord(scope.row)"> |
||||
|
<!-- {{scope.row | operationStatus}} --> |
||||
|
强制摘牌 |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
@click="blacklist( scope.row)" |
||||
|
>交易查看</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<div class="pagination"> |
||||
|
<el-pagination |
||||
|
background |
||||
|
layout="total, prev, pager, next" |
||||
|
:current-page="query.page" |
||||
|
:page-size="query.limit" |
||||
|
:total="pageTotal" |
||||
|
@current-change="handlePageChange" |
||||
|
></el-pagination> |
||||
|
</div> |
||||
|
</div> |
||||
|
<whyDialog v-if="editVisible" :isshow="editVisible" :dialogID="dialogID" |
||||
|
:dialogType="dialogType" @MisShow="MisShow" :assets_type="1" @getData="getData"> |
||||
|
</whyDialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { getAccountList ,coerceRemove,addedAsset,updateBlackList,auditList} from '../../../api/index'; |
||||
|
import moment from 'moment' |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
dialogID:'', |
||||
|
dialogType:2, |
||||
|
query: { |
||||
|
serial_number: '', |
||||
|
account_name: '', |
||||
|
firm_name: '', |
||||
|
account_status: '', |
||||
|
account_apply: '', |
||||
|
auditID:'', |
||||
|
time: '', |
||||
|
count:'', |
||||
|
surplus_count:'', |
||||
|
page: 1, |
||||
|
limit: 10 |
||||
|
}, |
||||
|
query1:{ |
||||
|
uid:'', |
||||
|
buyer_account_type:0, |
||||
|
enter_shop_type:0, |
||||
|
third_party_type:0 |
||||
|
}, |
||||
|
tableData: [], |
||||
|
recordList:[], |
||||
|
auditList:[], |
||||
|
multipleSelection: [], |
||||
|
delList: [], |
||||
|
editVisible: false, |
||||
|
pageTotal: 0, |
||||
|
pickerOptions: { |
||||
|
shortcuts: [ |
||||
|
{ |
||||
|
text: "最近一周", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: "最近一个月", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: "最近三个月", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
components:{ |
||||
|
whyDialog: () => import('../../common/dialog/insex.vue') |
||||
|
}, |
||||
|
created() { |
||||
|
this.getData(); |
||||
|
this.getAuditList() |
||||
|
}, |
||||
|
methods: { |
||||
|
MisShow(){ |
||||
|
this.editVisible=false |
||||
|
}, |
||||
|
// 审核人员下拉数据 |
||||
|
getAuditList(){ |
||||
|
auditList().then(res => { |
||||
|
// console.log(res); |
||||
|
if (res.code==100) { |
||||
|
this.auditList=res.data.list |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
//添加黑名单 |
||||
|
addBlacklist(){ |
||||
|
updateBlackList(this.query1).then(res => { |
||||
|
console.log(res); |
||||
|
if (res.code==100) { |
||||
|
this.$message.success(res.msg); |
||||
|
}else{ |
||||
|
this.$message.error(res.msg); |
||||
|
} |
||||
|
this.editVisible2=false |
||||
|
}); |
||||
|
}, |
||||
|
// 上下架资产 |
||||
|
operationRecord(row){ |
||||
|
if (row.asset_status==3) { |
||||
|
this.addedAsset(row.id) |
||||
|
}else if(row.asset_status==2){ |
||||
|
this.coerceRemove(row.id) |
||||
|
} |
||||
|
}, |
||||
|
// 上架资产 |
||||
|
addedAsset(id){ |
||||
|
let data={id:id} |
||||
|
addedAsset(data).then(res => { |
||||
|
console.log(res); |
||||
|
if (res.code==100) { |
||||
|
this.$message.success('操作成功~'); |
||||
|
this.getData() |
||||
|
}else{ |
||||
|
this.$message.error(res.msg); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 资产下架 |
||||
|
coerceRemove(id){ |
||||
|
let data={id:id} |
||||
|
const loading = this.$loading({ |
||||
|
lock: true, |
||||
|
text: 'Loading', |
||||
|
spinner: 'el-icon-loading', |
||||
|
background: 'rgba(0, 0, 0, 0.7)' |
||||
|
}); |
||||
|
coerceRemove(data).then(res => { |
||||
|
console.log(res); |
||||
|
if (res.code==100) { |
||||
|
this.$message.success('操作成功~'); |
||||
|
this.getData() |
||||
|
loading.close(); |
||||
|
}else{ |
||||
|
this.$message.error(res.msg); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 重置方法 |
||||
|
reset(){ |
||||
|
Object.keys(this.query).forEach(key => { |
||||
|
console.info(key) |
||||
|
if (key!='page' && key!='limit') { |
||||
|
this.query[key] = '' |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
//时间戳转换时间 |
||||
|
formatDate(row,colnum){ |
||||
|
return moment(row.create_time *1000 ).format('YYYY-MM-DD HH:mm:ss') |
||||
|
}, |
||||
|
// 获取 easy-mock 的模拟数据 |
||||
|
getData() { |
||||
|
getAccountList(this.query).then(res => { |
||||
|
console.log(res); |
||||
|
if (res.code==100) { |
||||
|
this.tableData = res.data.list; |
||||
|
this.pageTotal = res.data.count; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 触发搜索按钮 |
||||
|
handleSearch() { |
||||
|
this.$set(this.query, 'page', 1); |
||||
|
this.getData(); |
||||
|
}, |
||||
|
// 编辑操作 |
||||
|
handleEdit(index, row) { |
||||
|
this.dialogID=row.id; |
||||
|
this.editVisible = true; |
||||
|
}, |
||||
|
// 保存编辑 |
||||
|
saveEdit() { |
||||
|
this.editVisible = false; |
||||
|
this.$message.success(`修改第 ${this.idx + 1} 行成功`); |
||||
|
this.$set(this.tableData, this.idx, this.form); |
||||
|
}, |
||||
|
// 分页导航 |
||||
|
handlePageChange(val) { |
||||
|
this.$set(this.query, 'page', val); |
||||
|
this.getData(); |
||||
|
} |
||||
|
}, |
||||
|
filters:{ |
||||
|
operationStatus(res){ |
||||
|
let text=''; |
||||
|
if(res.asset_status==2){ |
||||
|
text='下架资产' |
||||
|
} |
||||
|
return text |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.record_select{ |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
.record_select >>> .el-checkbox{ |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
.record_content{ |
||||
|
font-size: 16px; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
.recordTips{ |
||||
|
font-size: 16px; |
||||
|
margin-bottom: 15px; |
||||
|
} |
||||
|
.handle-box { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.handle-select { |
||||
|
width: 120px; |
||||
|
} |
||||
|
|
||||
|
.handle-input { |
||||
|
width: 150px; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
.table { |
||||
|
width: 100%; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.red { |
||||
|
color: #ff0000; |
||||
|
} |
||||
|
.mr10 { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
.table-td-thumb { |
||||
|
display: block; |
||||
|
margin: auto; |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,268 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="crumbs"> |
||||
|
<el-breadcrumb separator="/"> |
||||
|
<el-breadcrumb-item> |
||||
|
<i class="el-icon-lx-cascades"></i> 资产管理 |
||||
|
</el-breadcrumb-item> |
||||
|
<el-breadcrumb-item>摘牌申请审核</el-breadcrumb-item> |
||||
|
</el-breadcrumb> |
||||
|
</div> |
||||
|
<div class="container"> |
||||
|
<div class="handle-box"> |
||||
|
<el-input v-model="query.serial_name" placeholder="资产名称" class="handle-input mr10"></el-input> |
||||
|
<el-input v-model="query.firm_name" placeholder="机构名称" class="handle-input mr10"></el-input> |
||||
|
<el-input v-model="query.apply_name" placeholder="法人名称" class="handle-input mr10"></el-input> |
||||
|
<el-select v-model="query.account_apply" placeholder="审核状态" class="handle-select mr10"> |
||||
|
<el-option key="4" label="全部" :value="4"></el-option> |
||||
|
<el-option key="2" label="湖南省" value="湖南省"></el-option> |
||||
|
</el-select> |
||||
|
<el-select v-model="query.auditID" placeholder="审核人员" class="handle-select mr10"> |
||||
|
<el-option v-for="item in auditList" :key="item.uid" :label="item.username" :value="item.uid"></el-option> |
||||
|
</el-select> |
||||
|
<el-date-picker |
||||
|
class="mr10" |
||||
|
v-model="query.time" |
||||
|
type="datetimerange" |
||||
|
:picker-options="pickerOptions" |
||||
|
range-separator="至" |
||||
|
value-format="timestamp" |
||||
|
start-placeholder="开始日期" |
||||
|
end-placeholder="结束日期" |
||||
|
align="right" |
||||
|
> |
||||
|
</el-date-picker> |
||||
|
<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button> |
||||
|
<el-button type="primary" plain @click="reset">重置</el-button> |
||||
|
</div> |
||||
|
<el-table |
||||
|
:data="tableData" |
||||
|
border |
||||
|
class="table" |
||||
|
ref="multipleTable" |
||||
|
header-cell-class-name="table-header" |
||||
|
@selection-change="handleSelectionChange" |
||||
|
> |
||||
|
<el-table-column prop="id" label="序号" width="55" align="center"></el-table-column> |
||||
|
<el-table-column label="业务编码" prop="serial_number" ></el-table-column> |
||||
|
<el-table-column prop="update_time" :formatter="formatDate" label="申请时间"></el-table-column> |
||||
|
<el-table-column label="资产名称" prop="serial_name"></el-table-column> |
||||
|
<el-table-column prop="firm_name" label="机构名称"></el-table-column> |
||||
|
<el-table-column prop="apply_name" label="法人名称"></el-table-column> |
||||
|
<el-table-column label="审核状态"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.asset_check_status==0">待审核</span> |
||||
|
<span v-else-if="scope.row.asset_check_status==1">审核通过</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="审核图片" align="center"> |
||||
|
<template slot-scope="scope" v-if="scope.row.delist_file_img!=null"> |
||||
|
<img :src="scope.row.delist_file_img" width="40" height="40" @click="onPreview([scope.row.delist_file_img])"> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="audit_staff_name" label="审核人员"></el-table-column> |
||||
|
<el-table-column label="操作" width="280" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
@click="handleEdit(scope.$index, scope.row)" |
||||
|
>资料查看</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<whyDialog v-if="editVisible" :isshow="editVisible" :dialogID="dialogID" |
||||
|
:dialogType="dialogType" @MisShow="MisShow" :isexamine="true" :assets_type="4" @getData="getData"> |
||||
|
</whyDialog> |
||||
|
</div> |
||||
|
<el-image-viewer |
||||
|
v-if="showViewer" |
||||
|
:on-close="closeViewer" |
||||
|
:url-list="showBigImgList" |
||||
|
/> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { outCheckList,auditList } from '../../../api/index'; |
||||
|
import ElImageViewer from 'element-ui/packages/image/src/image-viewer' |
||||
|
import moment from 'moment' |
||||
|
export default { |
||||
|
// name: 'basetable', |
||||
|
data() { |
||||
|
return { |
||||
|
query: { |
||||
|
account_name: '', |
||||
|
firm_name: '', |
||||
|
account_status: '', |
||||
|
audit_staff_name:'', |
||||
|
account_apply: '', |
||||
|
auditID: '', |
||||
|
time: '', |
||||
|
page: 1, |
||||
|
limit: 10 |
||||
|
}, |
||||
|
showViewer:false, |
||||
|
showBigImgList:[], |
||||
|
tableData: [], |
||||
|
multipleSelection: [], |
||||
|
delList: [], |
||||
|
auditList:[], |
||||
|
editVisible: false, |
||||
|
pageTotal: 0, |
||||
|
dialogID:'', |
||||
|
dialogType:2, |
||||
|
pickerOptions: { |
||||
|
shortcuts: [ |
||||
|
{ |
||||
|
text: "最近一周", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: "最近一个月", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: "最近三个月", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
components:{ |
||||
|
whyDialog: () => import('../../common/dialog/insex.vue'), |
||||
|
ElImageViewer |
||||
|
}, |
||||
|
created() { |
||||
|
this.getData(); |
||||
|
this.getAuditList(); |
||||
|
}, |
||||
|
methods: { |
||||
|
// 关闭查看器 |
||||
|
closeViewer() { |
||||
|
this.showViewer = false |
||||
|
}, |
||||
|
onPreview(url) { |
||||
|
this.showBigImgList=url; |
||||
|
this.showViewer = true |
||||
|
}, |
||||
|
MisShow(){ |
||||
|
this.editVisible=false |
||||
|
}, |
||||
|
//时间戳转换时间 |
||||
|
formatDate(row,colnum){ |
||||
|
return moment(row.create_time *1000).format('YYYY-MM-DD HH:mm:ss') |
||||
|
}, |
||||
|
// 重置方法 |
||||
|
reset(){ |
||||
|
Object.keys(this.query).forEach(key => { |
||||
|
console.info(key) |
||||
|
if (key!='page' && key!='limit') { |
||||
|
this.query[key] = '' |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 审核人员下拉数据 |
||||
|
getAuditList(){ |
||||
|
auditList().then(res => { |
||||
|
// console.log(res); |
||||
|
if (res.code==100) { |
||||
|
this.auditList=res.data.list |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 获取 easy-mock 的模拟数据 |
||||
|
getData() { |
||||
|
outCheckList(this.query).then(res => { |
||||
|
console.log(res); |
||||
|
this.tableData = res.data.list; |
||||
|
this.pageTotal = res.pageTotal || 50; |
||||
|
}); |
||||
|
}, |
||||
|
// 触发搜索按钮 |
||||
|
handleSearch() { |
||||
|
this.$set(this.query, 'pageIndex', 1); |
||||
|
this.getData(); |
||||
|
}, |
||||
|
// 删除操作 |
||||
|
handleDelete(index, row) { |
||||
|
// 二次确认删除 |
||||
|
this.$confirm('确定要删除吗？', '提示', { |
||||
|
type: 'warning' |
||||
|
}) |
||||
|
.then(() => { |
||||
|
this.$message.success('删除成功'); |
||||
|
this.tableData.splice(index, 1); |
||||
|
}) |
||||
|
.catch(() => {}); |
||||
|
}, |
||||
|
// 多选操作 |
||||
|
handleSelectionChange(val) { |
||||
|
this.multipleSelection = val; |
||||
|
}, |
||||
|
// 编辑操作 |
||||
|
handleEdit(index, row) { |
||||
|
this.editVisible = true; |
||||
|
this.dialogID=row.id; |
||||
|
}, |
||||
|
// 保存编辑 |
||||
|
saveEdit() { |
||||
|
this.editVisible = false; |
||||
|
this.$message.success(`修改第 ${this.idx + 1} 行成功`); |
||||
|
this.$set(this.tableData, this.idx, this.form); |
||||
|
}, |
||||
|
// 分页导航 |
||||
|
handlePageChange(val) { |
||||
|
this.$set(this.query, 'page', val); |
||||
|
this.getData(); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.handle-box { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.handle-select { |
||||
|
width: 120px; |
||||
|
} |
||||
|
|
||||
|
.handle-input { |
||||
|
width: 150px; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
.table { |
||||
|
width: 100%; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.red { |
||||
|
color: #ff0000; |
||||
|
} |
||||
|
.mr10 { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
.table-td-thumb { |
||||
|
display: block; |
||||
|
margin: auto; |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,269 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="crumbs"> |
||||
|
<el-breadcrumb separator="/"> |
||||
|
<el-breadcrumb-item> |
||||
|
<i class="el-icon-lx-cascades"></i> 资产管理 |
||||
|
</el-breadcrumb-item> |
||||
|
<el-breadcrumb-item>资产审核</el-breadcrumb-item> |
||||
|
</el-breadcrumb> |
||||
|
</div> |
||||
|
<div class="container"> |
||||
|
<div class="handle-box"> |
||||
|
<el-input v-model="query.serial_name" placeholder="资产名称" class="handle-input mr10"></el-input> |
||||
|
<el-input v-model="query.firm_name" placeholder="机构名称" class="handle-input mr10"></el-input> |
||||
|
<el-input v-model="query.apply_name" placeholder="法人名称" class="handle-input mr10"></el-input> |
||||
|
<el-select v-model="query.account_apply" placeholder="审核状态" class="handle-select mr10"> |
||||
|
<el-option key="4" label="全部" :value="4"></el-option> |
||||
|
<el-option key="2" label="湖南省" value="湖南省"></el-option> |
||||
|
</el-select> |
||||
|
<el-select v-model="query.auditID" placeholder="审核人员" class="handle-select mr10"> |
||||
|
<el-option v-for="item in auditList" :key="item.uid" :label="item.username" :value="item.uid"></el-option> |
||||
|
</el-select> |
||||
|
<el-date-picker |
||||
|
class="mr10" |
||||
|
v-model="query.time" |
||||
|
type="datetimerange" |
||||
|
:picker-options="pickerOptions" |
||||
|
range-separator="至" |
||||
|
value-format="timestamp" |
||||
|
start-placeholder="开始日期" |
||||
|
end-placeholder="结束日期" |
||||
|
align="right" |
||||
|
> |
||||
|
</el-date-picker> |
||||
|
<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button> |
||||
|
<el-button type="primary" plain @click="reset">重置</el-button> |
||||
|
</div> |
||||
|
<el-table |
||||
|
:data="tableData" |
||||
|
border |
||||
|
class="table" |
||||
|
ref="multipleTable" |
||||
|
header-cell-class-name="table-header" |
||||
|
@selection-change="handleSelectionChange" |
||||
|
> |
||||
|
<el-table-column prop="id" label="序号" width="55" align="center"></el-table-column> |
||||
|
<el-table-column label="业务编码" prop="serial_number"></el-table-column> |
||||
|
<el-table-column prop="update_time" :formatter="formatDate" label="申请时间" align="center"></el-table-column> |
||||
|
<el-table-column label="资产名称" prop="serial_name" align="center"></el-table-column> |
||||
|
<el-table-column prop="firm_name" label="机构名称" align="center"></el-table-column> |
||||
|
<el-table-column prop="apply_name" label="法人名称" align="center"></el-table-column> |
||||
|
<el-table-column label="审核状态" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.asset_status==1">待复核</span> |
||||
|
<span v-else-if="scope.row.asset_status==0">待审核</span> |
||||
|
<span v-else-if="scope.row.asset_status==2">发布中</span> |
||||
|
<span v-else-if="scope.row.asset_status==3">已下架</span> |
||||
|
<span v-else-if="scope.row.asset_status==4">已转让</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="支付凭证" align="center"> |
||||
|
<template slot-scope="scope" v-if="scope.row.payment_document!=''"> |
||||
|
<a :href="scope.row.payment_document" target="_blank" rel="nofollow" class="upload_span">点击查看</a> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="audit_staff_name" label="审核人员" align="center"></el-table-column> |
||||
|
<el-table-column label="操作" width="280" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
@click="handleEdit(scope.$index, scope.row)" |
||||
|
>资料查看</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<div class="pagination"> |
||||
|
<el-pagination |
||||
|
background |
||||
|
layout="total, prev, pager, next" |
||||
|
:current-page="query.page" |
||||
|
:page-size="query.limit" |
||||
|
:total="pageTotal" |
||||
|
@current-change="handlePageChange" |
||||
|
></el-pagination> |
||||
|
</div> |
||||
|
<whyDialog v-if="editVisible" :isshow="editVisible" :dialogID="dialogID" |
||||
|
:dialogType="dialogType" @MisShow="MisShow" :isexamine="true" :assets_type="2" @getData="getData"> |
||||
|
</whyDialog> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { assetCheckList,auditList } from '../../../api/index'; |
||||
|
import moment from 'moment' |
||||
|
export default { |
||||
|
// name: 'basetable', |
||||
|
data() { |
||||
|
return { |
||||
|
query: { |
||||
|
account_name: '', |
||||
|
firm_name: '', |
||||
|
account_status: '', |
||||
|
audit_staff_name:'', |
||||
|
account_apply: '', |
||||
|
auditID: '', |
||||
|
time: '', |
||||
|
page: 1, |
||||
|
limit: 10 |
||||
|
}, |
||||
|
tableData: [], |
||||
|
multipleSelection: [], |
||||
|
delList: [], |
||||
|
auditList:[], |
||||
|
editVisible: false, |
||||
|
pageTotal: 0, |
||||
|
dialogID:'', |
||||
|
dialogType:2, |
||||
|
pickerOptions: { |
||||
|
shortcuts: [ |
||||
|
{ |
||||
|
text: "最近一周", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: "最近一个月", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: "最近三个月", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
components:{ |
||||
|
whyDialog: () => import('../../common/dialog/insex.vue') |
||||
|
}, |
||||
|
created() { |
||||
|
this.getData(); |
||||
|
this.getAuditList(); |
||||
|
}, |
||||
|
methods: { |
||||
|
MisShow(){ |
||||
|
this.editVisible=false |
||||
|
}, |
||||
|
//时间戳转换时间 |
||||
|
formatDate(row,colnum){ |
||||
|
return moment(row.create_time *1000).format('YYYY-MM-DD HH:mm:ss') |
||||
|
}, |
||||
|
// 重置方法 |
||||
|
reset(){ |
||||
|
Object.keys(this.query).forEach(key => { |
||||
|
console.info(key) |
||||
|
if (key!='page' && key!='limit') { |
||||
|
this.query[key] = '' |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 审核人员下拉数据 |
||||
|
getAuditList(){ |
||||
|
auditList().then(res => { |
||||
|
// console.log(res); |
||||
|
if (res.code==100) { |
||||
|
this.auditList=res.data.list |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 获取 easy-mock 的模拟数据 |
||||
|
getData() { |
||||
|
assetCheckList(this.query).then(res => { |
||||
|
console.log(res); |
||||
|
this.tableData = res.data.list; |
||||
|
this.pageTotal = res.data.count |
||||
|
}); |
||||
|
}, |
||||
|
// 触发搜索按钮 |
||||
|
handleSearch() { |
||||
|
this.$set(this.query, 'pageIndex', 1); |
||||
|
this.getData(); |
||||
|
}, |
||||
|
// 删除操作 |
||||
|
handleDelete(index, row) { |
||||
|
// 二次确认删除 |
||||
|
this.$confirm('确定要删除吗？', '提示', { |
||||
|
type: 'warning' |
||||
|
}) |
||||
|
.then(() => { |
||||
|
this.$message.success('删除成功'); |
||||
|
this.tableData.splice(index, 1); |
||||
|
}) |
||||
|
.catch(() => {}); |
||||
|
}, |
||||
|
// 多选操作 |
||||
|
handleSelectionChange(val) { |
||||
|
this.multipleSelection = val; |
||||
|
}, |
||||
|
// 编辑操作 |
||||
|
handleEdit(index, row) { |
||||
|
this.editVisible = true; |
||||
|
this.dialogID=row.id; |
||||
|
}, |
||||
|
// 保存编辑 |
||||
|
saveEdit() { |
||||
|
this.editVisible = false; |
||||
|
this.$message.success(`修改第 ${this.idx + 1} 行成功`); |
||||
|
this.$set(this.tableData, this.idx, this.form); |
||||
|
}, |
||||
|
// 分页导航 |
||||
|
handlePageChange(val) { |
||||
|
this.$set(this.query, 'page', val); |
||||
|
this.getData(); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.handle-box { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.handle-select { |
||||
|
width: 120px; |
||||
|
} |
||||
|
|
||||
|
.handle-input { |
||||
|
width: 150px; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
.table { |
||||
|
width: 100%; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.red { |
||||
|
color: #ff0000; |
||||
|
} |
||||
|
.mr10 { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
.table-td-thumb { |
||||
|
display: block; |
||||
|
margin: auto; |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
} |
||||
|
.upload_span{ |
||||
|
color: #294CC6; |
||||
|
text-decoration: underline; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,314 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="crumbs"> |
||||
|
<el-breadcrumb separator="/"> |
||||
|
<el-breadcrumb-item> |
||||
|
<i class="el-icon-lx-cascades"></i> 资产管理 |
||||
|
</el-breadcrumb-item> |
||||
|
<el-breadcrumb-item>挂牌费支付审核</el-breadcrumb-item> |
||||
|
</el-breadcrumb> |
||||
|
</div> |
||||
|
<div class="container"> |
||||
|
<div class="handle-box"> |
||||
|
<el-input v-model="query.serial_name" placeholder="资产名称" class="handle-input mr10"></el-input> |
||||
|
<el-input v-model="query.firm_name" placeholder="机构名称" class="handle-input mr10"></el-input> |
||||
|
<el-input v-model="query.apply_name" placeholder="法人名称" class="handle-input mr10"></el-input> |
||||
|
<el-select v-model="query.account_apply" placeholder="审核状态" class="handle-select mr10"> |
||||
|
<el-option key="4" label="全部" :value="4"></el-option> |
||||
|
<el-option key="2" label="湖南省" value="湖南省"></el-option> |
||||
|
</el-select> |
||||
|
<el-select v-model="query.auditID" placeholder="审核人员" class="handle-select mr10"> |
||||
|
<el-option v-for="item in auditList" :key="item.uid" :label="item.username" :value="item.uid"></el-option> |
||||
|
</el-select> |
||||
|
<el-date-picker |
||||
|
class="mr10" |
||||
|
v-model="query.time" |
||||
|
type="datetimerange" |
||||
|
:picker-options="pickerOptions" |
||||
|
range-separator="至" |
||||
|
value-format="timestamp" |
||||
|
start-placeholder="开始日期" |
||||
|
end-placeholder="结束日期" |
||||
|
align="right" |
||||
|
> |
||||
|
</el-date-picker> |
||||
|
<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button> |
||||
|
<el-button type="primary" plain @click="reset">重置</el-button> |
||||
|
</div> |
||||
|
<el-table |
||||
|
:data="tableData" |
||||
|
border |
||||
|
class="table" |
||||
|
ref="multipleTable" |
||||
|
header-cell-class-name="table-header" |
||||
|
@selection-change="handleSelectionChange" |
||||
|
> |
||||
|
<el-table-column prop="id" label="序号" width="55" align="center"></el-table-column> |
||||
|
<el-table-column label="业务编码" prop="serial_number" ></el-table-column> |
||||
|
<el-table-column prop="update_time" :formatter="formatDate" label="申请时间" align="center"></el-table-column> |
||||
|
<el-table-column label="资产名称" prop="serial_name" align="center"></el-table-column> |
||||
|
<el-table-column prop="firm_name" label="机构名称" align="center"></el-table-column> |
||||
|
<el-table-column prop="apply_name" label="法人名称" align="center"></el-table-column> |
||||
|
<el-table-column label="审核状态" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.asset_check_status==0">待审核</span> |
||||
|
<span v-else-if="scope.row.asset_check_status==2">待复核</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="支付凭证" align="center"> |
||||
|
<template slot-scope="scope" v-if="scope.row.payment_document!=''"> |
||||
|
<a :href="scope.row.payment_document" target="_blank" rel="nofollow" class="upload_span">点击查看</a> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="audit_staff_name" label="审核人员" align="center"></el-table-column> |
||||
|
<el-table-column label="操作" width="280" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
@click="handleEdit(scope.$index, scope.row)" |
||||
|
>资料查看</el-button> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
@click="examine(scope.$index, scope.row)" |
||||
|
>挂牌费付款审核</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<div class="pagination"> |
||||
|
<el-pagination |
||||
|
background |
||||
|
layout="total, prev, pager, next" |
||||
|
:current-page="query.page" |
||||
|
:page-size="query.limit" |
||||
|
:total="pageTotal" |
||||
|
@current-change="handlePageChange" |
||||
|
></el-pagination> |
||||
|
</div> |
||||
|
<whyDialog v-if="editVisible" :isshow="editVisible" :dialogID="dialogID" |
||||
|
:dialogType="dialogType" @MisShow="MisShow" :assets_type="1" @getData="getData"> |
||||
|
</whyDialog> |
||||
|
<el-dialog |
||||
|
title="挂牌费付款审核" |
||||
|
:visible.sync="centerDialogVisible" |
||||
|
width="30%" |
||||
|
center> |
||||
|
<span>该订单的付款审核是否通过？</span> |
||||
|
<div class="selectExamine"> |
||||
|
<el-radio v-model="query1.status" :label="1">审核通过</el-radio> |
||||
|
<el-radio v-model="query1.status" :label="2">审核不通过</el-radio> |
||||
|
</div> |
||||
|
<div class="messege" v-if="query1.status==2"> |
||||
|
<span>审核不通过原因：</span> |
||||
|
<el-input placeholder="请输入" v-model="query1.message" class="handle-input mr10"></el-input> |
||||
|
</div> |
||||
|
<span slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="centerDialogVisible = false">取 消</el-button> |
||||
|
<el-button type="primary" @click="selectExamine()">确 定</el-button> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { payList,auditList ,payCheck} from '../../../api/index'; |
||||
|
import moment from 'moment' |
||||
|
export default { |
||||
|
// name: 'basetable', |
||||
|
data() { |
||||
|
return { |
||||
|
centerDialogVisible:false, |
||||
|
query: { |
||||
|
account_name: '', |
||||
|
firm_name: '', |
||||
|
account_status: '', |
||||
|
audit_staff_name:'', |
||||
|
account_apply: '', |
||||
|
auditID: '', |
||||
|
time: '', |
||||
|
page: 1, |
||||
|
limit: 10 |
||||
|
}, |
||||
|
query1:{ |
||||
|
id:'', |
||||
|
status:'', |
||||
|
message:'' |
||||
|
}, |
||||
|
tableData: [], |
||||
|
multipleSelection: [], |
||||
|
delList: [], |
||||
|
auditList:[], |
||||
|
editVisible: false, |
||||
|
pageTotal: 0, |
||||
|
dialogID:'', |
||||
|
dialogType:2, |
||||
|
pickerOptions: { |
||||
|
shortcuts: [ |
||||
|
{ |
||||
|
text: "最近一周", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: "最近一个月", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: "最近三个月", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
components:{ |
||||
|
whyDialog: () => import('../../common/dialog/insex.vue') |
||||
|
}, |
||||
|
created() { |
||||
|
this.getData(); |
||||
|
this.getAuditList(); |
||||
|
}, |
||||
|
methods: { |
||||
|
selectExamine(){ |
||||
|
payCheck(this.query1).then(res=>{ |
||||
|
console.info(res) |
||||
|
if (res.code==100) { |
||||
|
this.$message.success('审核成功！'); |
||||
|
this.getData(); |
||||
|
}else{ |
||||
|
this.$message.error(res.msg); |
||||
|
} |
||||
|
this.centerDialogVisible=false |
||||
|
this.getData(); |
||||
|
}) |
||||
|
}, |
||||
|
examine(index,row){ |
||||
|
this.query1.id=row.id |
||||
|
this.centerDialogVisible=true |
||||
|
}, |
||||
|
MisShow(){ |
||||
|
this.editVisible=false |
||||
|
}, |
||||
|
//时间戳转换时间 |
||||
|
formatDate(row,colnum){ |
||||
|
return moment(row.create_time *1000).format('YYYY-MM-DD HH:mm:ss') |
||||
|
}, |
||||
|
// 重置方法 |
||||
|
reset(){ |
||||
|
Object.keys(this.query).forEach(key => { |
||||
|
console.info(key) |
||||
|
if (key!='page' && key!='limit') { |
||||
|
this.query[key] = '' |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 审核人员下拉数据 |
||||
|
getAuditList(){ |
||||
|
auditList().then(res => { |
||||
|
// console.log(res); |
||||
|
if (res.code==100) { |
||||
|
this.auditList=res.data.list |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 获取 easy-mock 的模拟数据 |
||||
|
getData() { |
||||
|
payList(this.query).then(res => { |
||||
|
console.log(res); |
||||
|
this.tableData = res.data.list; |
||||
|
this.pageTotal = res.data.count |
||||
|
}); |
||||
|
}, |
||||
|
// 触发搜索按钮 |
||||
|
handleSearch() { |
||||
|
this.$set(this.query, 'pageIndex', 1); |
||||
|
this.getData(); |
||||
|
}, |
||||
|
// 删除操作 |
||||
|
handleDelete(index, row) { |
||||
|
// 二次确认删除 |
||||
|
this.$confirm('确定要删除吗？', '提示', { |
||||
|
type: 'warning' |
||||
|
}) |
||||
|
.then(() => { |
||||
|
this.$message.success('删除成功'); |
||||
|
this.tableData.splice(index, 1); |
||||
|
}) |
||||
|
.catch(() => {}); |
||||
|
}, |
||||
|
// 多选操作 |
||||
|
handleSelectionChange(val) { |
||||
|
this.multipleSelection = val; |
||||
|
}, |
||||
|
// 编辑操作 |
||||
|
handleEdit(index, row) { |
||||
|
this.editVisible = true; |
||||
|
this.dialogID=row.id; |
||||
|
}, |
||||
|
// 保存编辑 |
||||
|
saveEdit() { |
||||
|
this.editVisible = false; |
||||
|
this.$message.success(`修改第 ${this.idx + 1} 行成功`); |
||||
|
this.$set(this.tableData, this.idx, this.form); |
||||
|
}, |
||||
|
// 分页导航 |
||||
|
handlePageChange(val) { |
||||
|
this.$set(this.query, 'page', val); |
||||
|
this.getData(); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.handle-box { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
.selectExamine{ |
||||
|
margin: 10px 0; |
||||
|
} |
||||
|
.handle-select { |
||||
|
width: 120px; |
||||
|
} |
||||
|
|
||||
|
.handle-input { |
||||
|
width: 150px; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
.table { |
||||
|
width: 100%; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.red { |
||||
|
color: #ff0000; |
||||
|
} |
||||
|
.mr10 { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
.table-td-thumb { |
||||
|
display: block; |
||||
|
margin: auto; |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
} |
||||
|
.upload_span{ |
||||
|
color: #294CC6; |
||||
|
text-decoration: underline; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,259 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="crumbs"> |
||||
|
<el-breadcrumb separator="/"> |
||||
|
<el-breadcrumb-item> |
||||
|
<i class="el-icon-lx-cascades"></i> 资产管理 |
||||
|
</el-breadcrumb-item> |
||||
|
<el-breadcrumb-item>资产发布审核</el-breadcrumb-item> |
||||
|
</el-breadcrumb> |
||||
|
</div> |
||||
|
<div class="container"> |
||||
|
<div class="handle-box"> |
||||
|
<el-input v-model="query.account_name" placeholder="资产名称" class="handle-input mr10"></el-input> |
||||
|
<el-input v-model="query.firm_name" placeholder="机构名称" class="handle-input mr10"></el-input> |
||||
|
<el-input v-model="query.username" placeholder="法人名称" class="handle-input mr10"></el-input> |
||||
|
<el-select v-model="query.account_apply" placeholder="审核状态" class="handle-select mr10"> |
||||
|
<el-option key="4" label="全部" :value="4"></el-option> |
||||
|
<el-option key="2" label="湖南省" value="湖南省"></el-option> |
||||
|
</el-select> |
||||
|
<el-select v-model="query.auditID" placeholder="审核人员" class="handle-select mr10"> |
||||
|
<el-option v-for="item in auditList" :key="item.uid" :label="item.username" :value="item.uid"></el-option> |
||||
|
</el-select> |
||||
|
<el-date-picker |
||||
|
class="mr10" |
||||
|
v-model="query.time" |
||||
|
type="datetimerange" |
||||
|
:picker-options="pickerOptions" |
||||
|
range-separator="至" |
||||
|
value-format="timestamp" |
||||
|
start-placeholder="开始日期" |
||||
|
end-placeholder="结束日期" |
||||
|
align="right" |
||||
|
> |
||||
|
</el-date-picker> |
||||
|
<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button> |
||||
|
<el-button type="primary" plain @click="reset">重置</el-button> |
||||
|
</div> |
||||
|
<el-table |
||||
|
:data="tableData" |
||||
|
border |
||||
|
class="table" |
||||
|
ref="multipleTable" |
||||
|
header-cell-class-name="table-header" |
||||
|
@selection-change="handleSelectionChange" |
||||
|
> |
||||
|
<el-table-column prop="id" label="序号" width="55" align="center"></el-table-column> |
||||
|
<el-table-column label="业务编码" prop="serial_number" ></el-table-column> |
||||
|
<el-table-column prop="update_time" :formatter="formatDate" label="申请时间"></el-table-column> |
||||
|
<el-table-column label="资产名称" prop="serial_name"></el-table-column> |
||||
|
<el-table-column prop="firm_name" label="机构名称"></el-table-column> |
||||
|
<el-table-column prop="apply_name" label="法人名称"></el-table-column> |
||||
|
<el-table-column label="审核状态"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.apply_status==1">发布审核通过</span> |
||||
|
<span v-else-if="scope.row.apply_status==0">待发布审核</span> |
||||
|
<span v-else-if="scope.row.apply_status==2">待上架审核</span> |
||||
|
<span v-else-if="scope.row.apply_status==3">上架审核通过</span> |
||||
|
<span v-else-if="scope.row.apply_status==4">上架审核不通过</span> |
||||
|
<span v-else-if="scope.row.apply_status==5">发布审核不通过</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="username" label="审核人员"></el-table-column> |
||||
|
<el-table-column label="操作" width="280" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
@click="handleEdit(scope.$index, scope.row)" |
||||
|
>资料查看</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<div class="pagination"> |
||||
|
<el-pagination |
||||
|
background |
||||
|
layout="total, prev, pager, next" |
||||
|
:current-page="query.page" |
||||
|
:page-size="query.limit" |
||||
|
:total="pageTotal" |
||||
|
@current-change="handlePageChange" |
||||
|
></el-pagination> |
||||
|
</div> |
||||
|
</div> |
||||
|
<whyDialog v-if="editVisible" :isshow="editVisible" :dialogID="dialogID" |
||||
|
:dialogType="dialogType" @MisShow="MisShow" :isexamine="true" :assets_type="3" @getData="getData"> |
||||
|
</whyDialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { sendList,auditList } from '../../../api/index'; |
||||
|
import moment from 'moment' |
||||
|
export default { |
||||
|
// name: 'basetable', |
||||
|
data() { |
||||
|
return { |
||||
|
query: { |
||||
|
account_name: '', |
||||
|
firm_name: '', |
||||
|
username: '', |
||||
|
account_status: '', |
||||
|
account_apply: '', |
||||
|
auditID: '', |
||||
|
time: '', |
||||
|
page: 1, |
||||
|
limit: 10 |
||||
|
}, |
||||
|
dialogID:'', |
||||
|
dialogType:2, |
||||
|
tableData: [], |
||||
|
multipleSelection: [], |
||||
|
delList: [], |
||||
|
auditList:[], |
||||
|
editVisible: false, |
||||
|
pageTotal: 0, |
||||
|
pickerOptions: { |
||||
|
shortcuts: [ |
||||
|
{ |
||||
|
text: "最近一周", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: "最近一个月", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: "最近三个月", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
components:{ |
||||
|
whyDialog: () => import('../../common/dialog/insex.vue') |
||||
|
}, |
||||
|
created() { |
||||
|
this.getData(); |
||||
|
this.getAuditList(); |
||||
|
}, |
||||
|
methods: { |
||||
|
MisShow(){ |
||||
|
this.editVisible=false |
||||
|
}, |
||||
|
//时间戳转换时间 |
||||
|
formatDate(row,colnum){ |
||||
|
return moment(row[colnum.create_time]).format('YYYY-MM-DD HH:mm:ss') |
||||
|
}, |
||||
|
// 重置方法 |
||||
|
reset(){ |
||||
|
Object.keys(this.query).forEach(key => { |
||||
|
console.info(key) |
||||
|
if (key!='page' && key!='limit') { |
||||
|
this.query[key] = '' |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 审核人员下拉数据 |
||||
|
getAuditList(){ |
||||
|
auditList().then(res => { |
||||
|
// console.log(res); |
||||
|
if (res.code==100) { |
||||
|
this.auditList=res.data.list |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 获取 easy-mock 的模拟数据 |
||||
|
getData() { |
||||
|
sendList(this.query).then(res => { |
||||
|
// console.log(res); |
||||
|
this.tableData = res.data.list; |
||||
|
this.pageTotal = res.pageTotal || 50; |
||||
|
}); |
||||
|
}, |
||||
|
// 触发搜索按钮 |
||||
|
handleSearch() { |
||||
|
this.$set(this.query, 'pageIndex', 1); |
||||
|
this.getData(); |
||||
|
}, |
||||
|
// 删除操作 |
||||
|
handleDelete(index, row) { |
||||
|
// 二次确认删除 |
||||
|
this.$confirm('确定要删除吗？', '提示', { |
||||
|
type: 'warning' |
||||
|
}) |
||||
|
.then(() => { |
||||
|
this.$message.success('删除成功'); |
||||
|
this.tableData.splice(index, 1); |
||||
|
}) |
||||
|
.catch(() => {}); |
||||
|
}, |
||||
|
// 多选操作 |
||||
|
handleSelectionChange(val) { |
||||
|
this.multipleSelection = val; |
||||
|
}, |
||||
|
// 编辑操作 |
||||
|
handleEdit(index, row) { |
||||
|
this.editVisible = true; |
||||
|
this.dialogID=row.id; |
||||
|
}, |
||||
|
// 保存编辑 |
||||
|
saveEdit() { |
||||
|
this.editVisible = false; |
||||
|
this.$message.success(`修改第 ${this.idx + 1} 行成功`); |
||||
|
this.$set(this.tableData, this.idx, this.form); |
||||
|
}, |
||||
|
// 分页导航 |
||||
|
handlePageChange(val) { |
||||
|
this.$set(this.query, 'page', val); |
||||
|
this.getData(); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.handle-box { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.handle-select { |
||||
|
width: 120px; |
||||
|
} |
||||
|
|
||||
|
.handle-input { |
||||
|
width: 150px; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
.table { |
||||
|
width: 100%; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.red { |
||||
|
color: #ff0000; |
||||
|
} |
||||
|
.mr10 { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
.table-td-thumb { |
||||
|
display: block; |
||||
|
margin: auto; |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,149 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="crumbs"> |
||||
|
<el-breadcrumb separator="/"> |
||||
|
<el-breadcrumb-item> |
||||
|
<i class="el-icon-pie-chart"></i> schart图表 |
||||
|
</el-breadcrumb-item> |
||||
|
</el-breadcrumb> |
||||
|
</div> |
||||
|
<div class="container"> |
||||
|
<div class="plugins-tips"> |
||||
|
vue-schart：vue.js封装sChart.js的图表组件。 |
||||
|
访问地址： |
||||
|
<a |
||||
|
href="https://github.com/lin-xin/vue-schart" |
||||
|
target="_blank" |
||||
|
>vue-schart</a> |
||||
|
</div> |
||||
|
<div class="schart-box"> |
||||
|
<div class="content-title">柱状图</div> |
||||
|
<schart class="schart" canvasId="bar" :options="options1"></schart> |
||||
|
</div> |
||||
|
<div class="schart-box"> |
||||
|
<div class="content-title">折线图</div> |
||||
|
<schart class="schart" canvasId="line" :options="options2"></schart> |
||||
|
</div> |
||||
|
<div class="schart-box"> |
||||
|
<div class="content-title">饼状图</div> |
||||
|
<schart class="schart" canvasId="pie" :options="options3"></schart> |
||||
|
</div> |
||||
|
<div class="schart-box"> |
||||
|
<div class="content-title">环形图</div> |
||||
|
<schart class="schart" canvasId="ring" :options="options4"></schart> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Schart from 'vue-schart'; |
||||
|
export default { |
||||
|
name: 'basecharts', |
||||
|
components: { |
||||
|
Schart |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
options1: { |
||||
|
type: 'bar', |
||||
|
title: { |
||||
|
text: '最近一周各品类销售图' |
||||
|
}, |
||||
|
bgColor: '#fbfbfb', |
||||
|
labels: ['周一', '周二', '周三', '周四', '周五'], |
||||
|
datasets: [ |
||||
|
{ |
||||
|
label: '家电', |
||||
|
fillColor: 'rgba(241, 49, 74, 0.5)', |
||||
|
data: [234, 278, 270, 190, 230] |
||||
|
}, |
||||
|
{ |
||||
|
label: '百货', |
||||
|
data: [164, 178, 190, 135, 160] |
||||
|
}, |
||||
|
{ |
||||
|
label: '食品', |
||||
|
data: [144, 198, 150, 235, 120] |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
options2: { |
||||
|
type: 'line', |
||||
|
title: { |
||||
|
text: '最近几个月各品类销售趋势图' |
||||
|
}, |
||||
|
bgColor: '#fbfbfb', |
||||
|
labels: ['6月', '7月', '8月', '9月', '10月'], |
||||
|
datasets: [ |
||||
|
{ |
||||
|
label: '家电', |
||||
|
data: [234, 278, 270, 190, 230] |
||||
|
}, |
||||
|
{ |
||||
|
label: '百货', |
||||
|
data: [164, 178, 150, 135, 160] |
||||
|
}, |
||||
|
{ |
||||
|
label: '食品', |
||||
|
data: [114, 138, 200, 235, 190] |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
options3: { |
||||
|
type: 'pie', |
||||
|
title: { |
||||
|
text: '服装品类销售饼状图' |
||||
|
}, |
||||
|
legend: { |
||||
|
position: 'left' |
||||
|
}, |
||||
|
bgColor: '#fbfbfb', |
||||
|
labels: ['T恤', '牛仔裤', '连衣裙', '毛衣', '七分裤', '短裙', '羽绒服'], |
||||
|
datasets: [ |
||||
|
{ |
||||
|
data: [334, 278, 190, 235, 260, 200, 141] |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
options4: { |
||||
|
type: 'ring', |
||||
|
title: { |
||||
|
text: '环形三等分' |
||||
|
}, |
||||
|
showValue: false, |
||||
|
legend: { |
||||
|
position: 'bottom', |
||||
|
bottom: 40 |
||||
|
}, |
||||
|
bgColor: '#fbfbfb', |
||||
|
labels: ['vue', 'react', 'angular'], |
||||
|
datasets: [ |
||||
|
{ |
||||
|
data: [500, 500, 500] |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}; |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.schart-box { |
||||
|
display: inline-block; |
||||
|
margin: 20px; |
||||
|
} |
||||
|
.schart { |
||||
|
width: 600px; |
||||
|
height: 400px; |
||||
|
} |
||||
|
.content-title { |
||||
|
clear: both; |
||||
|
font-weight: 400; |
||||
|
line-height: 50px; |
||||
|
margin: 10px 0; |
||||
|
font-size: 22px; |
||||
|
color: #1f2f3d; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,152 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="crumbs"> |
||||
|
<el-breadcrumb separator="/"> |
||||
|
<el-breadcrumb-item> |
||||
|
<i class="el-icon-lx-calendar"></i> 表单 |
||||
|
</el-breadcrumb-item> |
||||
|
<el-breadcrumb-item>基本表单</el-breadcrumb-item> |
||||
|
</el-breadcrumb> |
||||
|
</div> |
||||
|
<div class="container"> |
||||
|
<div class="form-box"> |
||||
|
<el-form ref="form" :model="form" label-width="80px"> |
||||
|
<el-form-item label="表单名称"> |
||||
|
<el-input v-model="form.name"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="选择器"> |
||||
|
<el-select v-model="form.region" placeholder="请选择"> |
||||
|
<el-option key="bbk" label="步步高" value="bbk"></el-option> |
||||
|
<el-option key="xtc" label="小天才" value="xtc"></el-option> |
||||
|
<el-option key="imoo" label="imoo" value="imoo"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="日期时间"> |
||||
|
<el-col :span="11"> |
||||
|
<el-date-picker |
||||
|
type="date" |
||||
|
placeholder="选择日期" |
||||
|
v-model="form.date1" |
||||
|
value-format="yyyy-MM-dd" |
||||
|
style="width: 100%;" |
||||
|
></el-date-picker> |
||||
|
</el-col> |
||||
|
<el-col class="line" :span="2">-</el-col> |
||||
|
<el-col :span="11"> |
||||
|
<el-time-picker |
||||
|
placeholder="选择时间" |
||||
|
v-model="form.date2" |
||||
|
style="width: 100%;" |
||||
|
></el-time-picker> |
||||
|
</el-col> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="城市级联"> |
||||
|
<el-cascader :options="options" v-model="form.options"></el-cascader> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="选择开关"> |
||||
|
<el-switch v-model="form.delivery"></el-switch> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="多选框"> |
||||
|
<el-checkbox-group v-model="form.type"> |
||||
|
<el-checkbox label="步步高" name="type"></el-checkbox> |
||||
|
<el-checkbox label="小天才" name="type"></el-checkbox> |
||||
|
<el-checkbox label="imoo" name="type"></el-checkbox> |
||||
|
</el-checkbox-group> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="单选框"> |
||||
|
<el-radio-group v-model="form.resource"> |
||||
|
<el-radio label="步步高"></el-radio> |
||||
|
<el-radio label="小天才"></el-radio> |
||||
|
<el-radio label="imoo"></el-radio> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="文本框"> |
||||
|
<el-input type="textarea" rows="5" v-model="form.desc"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" @click="onSubmit">表单提交</el-button> |
||||
|
<el-button>取消</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'baseform', |
||||
|
data() { |
||||
|
return { |
||||
|
options: [ |
||||
|
{ |
||||
|
value: 'guangdong', |
||||
|
label: '广东省', |
||||
|
children: [ |
||||
|
{ |
||||
|
value: 'guangzhou', |
||||
|
label: '广州市', |
||||
|
children: [ |
||||
|
{ |
||||
|
value: 'tianhe', |
||||
|
label: '天河区' |
||||
|
}, |
||||
|
{ |
||||
|
value: 'haizhu', |
||||
|
label: '海珠区' |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
value: 'dongguan', |
||||
|
label: '东莞市', |
||||
|
children: [ |
||||
|
{ |
||||
|
value: 'changan', |
||||
|
label: '长安镇' |
||||
|
}, |
||||
|
{ |
||||
|
value: 'humen', |
||||
|
label: '虎门镇' |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
value: 'hunan', |
||||
|
label: '湖南省', |
||||
|
children: [ |
||||
|
{ |
||||
|
value: 'changsha', |
||||
|
label: '长沙市', |
||||
|
children: [ |
||||
|
{ |
||||
|
value: 'yuelu', |
||||
|
label: '岳麓区' |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
], |
||||
|
form: { |
||||
|
name: '', |
||||
|
region: '', |
||||
|
date1: '', |
||||
|
date2: '', |
||||
|
delivery: true, |
||||
|
type: ['步步高'], |
||||
|
resource: '小天才', |
||||
|
desc: '', |
||||
|
options: [] |
||||
|
} |
||||
|
}; |
||||
|
}, |
||||
|
methods: { |
||||
|
onSubmit() { |
||||
|
this.$message.success('提交成功！'); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
@ -0,0 +1,219 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="crumbs"> |
||||
|
<el-breadcrumb separator="/"> |
||||
|
<el-breadcrumb-item> |
||||
|
<i class="el-icon-lx-cascades"></i> 基础表格 |
||||
|
</el-breadcrumb-item> |
||||
|
</el-breadcrumb> |
||||
|
</div> |
||||
|
<div class="container"> |
||||
|
<div class="handle-box"> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
icon="el-icon-delete" |
||||
|
class="handle-del mr10" |
||||
|
@click="delAllSelection" |
||||
|
>批量删除</el-button> |
||||
|
<el-select v-model="query.address" placeholder="地址" class="handle-select mr10"> |
||||
|
<el-option key="1" label="广东省" value="广东省"></el-option> |
||||
|
<el-option key="2" label="湖南省" value="湖南省"></el-option> |
||||
|
</el-select> |
||||
|
<el-input v-model="query.name" placeholder="用户名" class="handle-input mr10"></el-input> |
||||
|
<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button> |
||||
|
</div> |
||||
|
<el-table |
||||
|
:data="tableData" |
||||
|
border |
||||
|
class="table" |
||||
|
ref="multipleTable" |
||||
|
header-cell-class-name="table-header" |
||||
|
@selection-change="handleSelectionChange" |
||||
|
> |
||||
|
<el-table-column type="selection" width="55" align="center"></el-table-column> |
||||
|
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column> |
||||
|
<el-table-column prop="name" label="用户名"></el-table-column> |
||||
|
<el-table-column label="账户余额"> |
||||
|
<template slot-scope="scope">￥{{scope.row.money}}</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="头像(查看大图)" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-image |
||||
|
class="table-td-thumb" |
||||
|
:src="scope.row.thumb" |
||||
|
:preview-src-list="[scope.row.thumb]" |
||||
|
></el-image> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="address" label="地址"></el-table-column> |
||||
|
<el-table-column label="状态" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-tag |
||||
|
:type="scope.row.state==='成功'?'success':(scope.row.state==='失败'?'danger':'')" |
||||
|
>{{scope.row.state}}</el-tag> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column prop="date" label="注册时间"></el-table-column> |
||||
|
<el-table-column label="操作" width="180" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
icon="el-icon-edit" |
||||
|
@click="handleEdit(scope.$index, scope.row)" |
||||
|
>编辑</el-button> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
icon="el-icon-delete" |
||||
|
class="red" |
||||
|
@click="handleDelete(scope.$index, scope.row)" |
||||
|
>删除</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<div class="pagination"> |
||||
|
<el-pagination |
||||
|
background |
||||
|
layout="total, prev, pager, next" |
||||
|
:current-page="query.pageIndex" |
||||
|
:page-size="query.pageSize" |
||||
|
:total="pageTotal" |
||||
|
@current-change="handlePageChange" |
||||
|
></el-pagination> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 编辑弹出框 --> |
||||
|
<el-dialog title="编辑" :visible.sync="editVisible" width="30%"> |
||||
|
<el-form ref="form" :model="form" label-width="70px"> |
||||
|
<el-form-item label="用户名"> |
||||
|
<el-input v-model="form.name"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="地址"> |
||||
|
<el-input v-model="form.address"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<span slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="editVisible = false">取 消</el-button> |
||||
|
<el-button type="primary" @click="saveEdit">确 定</el-button> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { } from '../../api/index'; |
||||
|
export default { |
||||
|
name: 'basetable', |
||||
|
data() { |
||||
|
return { |
||||
|
query: { |
||||
|
address: '', |
||||
|
name: '', |
||||
|
pageIndex: 1, |
||||
|
pageSize: 10 |
||||
|
}, |
||||
|
tableData: [], |
||||
|
multipleSelection: [], |
||||
|
delList: [], |
||||
|
editVisible: false, |
||||
|
pageTotal: 0, |
||||
|
form: {}, |
||||
|
idx: -1, |
||||
|
id: -1 |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
// this.getData(); |
||||
|
}, |
||||
|
methods: { |
||||
|
// 获取 easy-mock 的模拟数据 |
||||
|
getData() { |
||||
|
fetchData(this.query).then(res => { |
||||
|
console.log(res); |
||||
|
this.tableData = res.list; |
||||
|
this.pageTotal = res.pageTotal || 50; |
||||
|
}); |
||||
|
}, |
||||
|
// 触发搜索按钮 |
||||
|
handleSearch() { |
||||
|
this.$set(this.query, 'pageIndex', 1); |
||||
|
this.getData(); |
||||
|
}, |
||||
|
// 删除操作 |
||||
|
handleDelete(index, row) { |
||||
|
// 二次确认删除 |
||||
|
this.$confirm('确定要删除吗？', '提示', { |
||||
|
type: 'warning' |
||||
|
}) |
||||
|
.then(() => { |
||||
|
this.$message.success('删除成功'); |
||||
|
this.tableData.splice(index, 1); |
||||
|
}) |
||||
|
.catch(() => {}); |
||||
|
}, |
||||
|
// 多选操作 |
||||
|
handleSelectionChange(val) { |
||||
|
this.multipleSelection = val; |
||||
|
}, |
||||
|
delAllSelection() { |
||||
|
const length = this.multipleSelection.length; |
||||
|
let str = ''; |
||||
|
this.delList = this.delList.concat(this.multipleSelection); |
||||
|
for (let i = 0; i < length; i++) { |
||||
|
str += this.multipleSelection[i].name + ' '; |
||||
|
} |
||||
|
this.$message.error(`删除了${str}`); |
||||
|
this.multipleSelection = []; |
||||
|
}, |
||||
|
// 编辑操作 |
||||
|
handleEdit(index, row) { |
||||
|
this.idx = index; |
||||
|
this.form = row; |
||||
|
this.editVisible = true; |
||||
|
}, |
||||
|
// 保存编辑 |
||||
|
saveEdit() { |
||||
|
this.editVisible = false; |
||||
|
this.$message.success(`修改第 ${this.idx + 1} 行成功`); |
||||
|
this.$set(this.tableData, this.idx, this.form); |
||||
|
}, |
||||
|
// 分页导航 |
||||
|
handlePageChange(val) { |
||||
|
this.$set(this.query, 'pageIndex', val); |
||||
|
this.getData(); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.handle-box { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.handle-select { |
||||
|
width: 120px; |
||||
|
} |
||||
|
|
||||
|
.handle-input { |
||||
|
width: 300px; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
.table { |
||||
|
width: 100%; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.red { |
||||
|
color: #ff0000; |
||||
|
} |
||||
|
.mr10 { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
.table-td-thumb { |
||||
|
display: block; |
||||
|
margin: auto; |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,507 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<el-row :gutter="20"> |
||||
|
<el-col :span="18"> |
||||
|
<el-card shadow="hover" class="mgb20" style="height:215px;"> |
||||
|
<p class="work_title">日常工作事项</p> |
||||
|
<div class="work_content"> |
||||
|
<div class="work_item" @click="goPage('/buyerReview')"> |
||||
|
<img src="../../assets/img/index_banner.png" alt=""> |
||||
|
<p>开户信息审核(36)</p> |
||||
|
</div> |
||||
|
<div class="work_item" @click="goPage('/businessAudit')"> |
||||
|
<img src="../../assets/img/index_banner1.png" alt=""> |
||||
|
<p>商家入驻审核(13)</p> |
||||
|
</div> |
||||
|
<div class="work_item" @click="goPage('/thirdAudit')"> |
||||
|
<img src="../../assets/img/index_banner2.png" alt=""> |
||||
|
<p>第三方服务机构审核(36)</p> |
||||
|
</div> |
||||
|
<div class="work_item" @click="goPage('/groundingAudit')"> |
||||
|
<img src="../../assets/img/index_banner3.png" alt=""> |
||||
|
<p>资产审核(36)</p> |
||||
|
</div> |
||||
|
<!-- <div class="work_item" @click="goPage('/businessAudit')"> |
||||
|
<img src="../../assets/img/index_banner4.png" alt=""> |
||||
|
<p>资产发布审核(36)</p> |
||||
|
</div> --> |
||||
|
<div class="work_item" @click="goPage('/businessAudit')"> |
||||
|
<img src="../../assets/img/index_banner5.png" alt=""> |
||||
|
<p>待公示订单(36)</p> |
||||
|
</div> |
||||
|
<div class="work_item" @click="goPage('/businessAudit')"> |
||||
|
<img src="../../assets/img/index_banner6.png" alt=""> |
||||
|
<p>待结算订单(36)</p> |
||||
|
</div> |
||||
|
<div class="work_item" @click="goPage('/businessAudit')"> |
||||
|
<img src="../../assets/img/index_banner7.png" alt=""> |
||||
|
<p>退款订单审核(36)</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
<el-col :span="6"> |
||||
|
<el-card shadow="hover" style="height:215px;"> |
||||
|
<div slot="header" class="sanjiao_title"> |
||||
|
<span>运营平台通知</span> |
||||
|
<div class="sanjiao"> |
||||
|
<div class="sanjiao_left"></div> |
||||
|
<div class="sanjiao_right"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div> |
||||
|
<div class="notice_item"> |
||||
|
<span class="notice_item_time">[2021-06-16]</span> |
||||
|
<span>个人绩效评分规则更新5</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row :gutter="20"> |
||||
|
<el-col :span="24"> |
||||
|
<el-card shadow="hover" class="mgb20" style="height:200px;"> |
||||
|
<p class="work_title">昨日工作汇总</p> |
||||
|
<div class="summary"> |
||||
|
<div class="summary_item" > |
||||
|
<div class="summary_item_left">昨日成交金额</div> |
||||
|
<div>¥845,256,996.30</div> |
||||
|
</div> |
||||
|
<div class="summary_item" > |
||||
|
<div class="summary_item_left">昨日结算金额</div> |
||||
|
<div>¥845,256,996.30</div> |
||||
|
</div> |
||||
|
<div class="summary_item" > |
||||
|
<div class="summary_item_left">昨日开户审核</div> |
||||
|
<div>30</div> |
||||
|
</div> |
||||
|
<div class="summary_item" > |
||||
|
<div class="summary_item_left">昨日入驻审核</div> |
||||
|
<div>30</div> |
||||
|
</div> |
||||
|
<div class="summary_item" > |
||||
|
<div class="summary_item_left">昨日机构审核</div> |
||||
|
<div>30</div> |
||||
|
</div> |
||||
|
<div class="summary_item" > |
||||
|
<div class="summary_item_left">昨日挂牌审核</div> |
||||
|
<div>30</div> |
||||
|
</div> |
||||
|
<div class="summary_item" > |
||||
|
<div class="summary_item_left">昨日发布审核</div> |
||||
|
<div>30</div> |
||||
|
</div> |
||||
|
<div class="summary_item" > |
||||
|
<div class="summary_item_left">昨日公示处理</div> |
||||
|
<div>0</div> |
||||
|
</div> |
||||
|
<div class="summary_item" > |
||||
|
<div class="summary_item_left">昨日结算处理</div> |
||||
|
<div>30</div> |
||||
|
</div> |
||||
|
<div class="summary_item" > |
||||
|
<div class="summary_item_left">昨日退款处理</div> |
||||
|
<div>30</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row :gutter="20"> |
||||
|
<el-col :span="18"> |
||||
|
<el-card shadow="hover" style="height:460px;"> |
||||
|
<schart ref="line" class="schart" canvasId="line" :options="options2"></schart> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
<el-col :span="6"> |
||||
|
<el-card shadow="hover" style="height:460px;"> |
||||
|
<p class="work_title">本月绩效达标情况</p> |
||||
|
<div class="achievements"> |
||||
|
<span>开户信息审核</span> |
||||
|
<el-progress :text-inside="true" :stroke-width="26" :percentage="70" color="#FACD91"></el-progress> |
||||
|
</div> |
||||
|
<div class="achievements"> |
||||
|
<span>商家入驻审核</span> |
||||
|
<el-progress :text-inside="true" :stroke-width="26" :percentage="70" color="#CAF982"></el-progress> |
||||
|
</div> |
||||
|
<div class="achievements"> |
||||
|
<span>第三方服务机构审核</span> |
||||
|
<el-progress :text-inside="true" :stroke-width="26" :percentage="70" color="#02A7F0"></el-progress> |
||||
|
</div> |
||||
|
<div class="achievements"> |
||||
|
<span>资产挂牌审核</span> |
||||
|
<el-progress :text-inside="true" :stroke-width="26" :percentage="70" color="#EC808D"></el-progress> |
||||
|
</div> |
||||
|
<div class="achievements"> |
||||
|
<span>资产发布审核</span> |
||||
|
<el-progress :text-inside="true" :stroke-width="26" :percentage="70" color="#C280FF"></el-progress> |
||||
|
</div> |
||||
|
<div class="achievements"> |
||||
|
<span>待公示订单</span> |
||||
|
<el-progress :text-inside="true" :stroke-width="26" :percentage="70" color="#4E73E4"></el-progress> |
||||
|
</div> |
||||
|
<div class="achievements"> |
||||
|
<span>待结算订单</span> |
||||
|
<el-progress :text-inside="true" :stroke-width="26" :percentage="70" color="#849AE8"></el-progress> |
||||
|
</div> |
||||
|
<div class="achievements"> |
||||
|
<span>退款订单审核</span> |
||||
|
<el-progress :text-inside="true" :stroke-width="26" :percentage="70" color="#F7AB08"></el-progress> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Schart from 'vue-schart'; |
||||
|
import bus from '../common/bus'; |
||||
|
export default { |
||||
|
name: 'dashboard', |
||||
|
data() { |
||||
|
return { |
||||
|
name: localStorage.getItem('ms_username'), |
||||
|
todoList: [ |
||||
|
{ |
||||
|
title: '今天要修复100个bug', |
||||
|
status: false |
||||
|
}, |
||||
|
{ |
||||
|
title: '今天要修复100个bug', |
||||
|
status: false |
||||
|
}, |
||||
|
{ |
||||
|
title: '今天要写100行代码加几个bug吧', |
||||
|
status: false |
||||
|
}, |
||||
|
{ |
||||
|
title: '今天要修复100个bug', |
||||
|
status: false |
||||
|
}, |
||||
|
{ |
||||
|
title: '今天要修复100个bug', |
||||
|
status: true |
||||
|
}, |
||||
|
{ |
||||
|
title: '今天要写100行代码加几个bug吧', |
||||
|
status: true |
||||
|
} |
||||
|
], |
||||
|
data: [ |
||||
|
{ |
||||
|
name: '2018/09/04', |
||||
|
value: 1083 |
||||
|
}, |
||||
|
{ |
||||
|
name: '2018/09/05', |
||||
|
value: 941 |
||||
|
}, |
||||
|
{ |
||||
|
name: '2018/09/06', |
||||
|
value: 1139 |
||||
|
}, |
||||
|
{ |
||||
|
name: '2018/09/07', |
||||
|
value: 816 |
||||
|
}, |
||||
|
{ |
||||
|
name: '2018/09/08', |
||||
|
value: 327 |
||||
|
}, |
||||
|
{ |
||||
|
name: '2018/09/09', |
||||
|
value: 228 |
||||
|
}, |
||||
|
{ |
||||
|
name: '2018/09/10', |
||||
|
value: 1065 |
||||
|
} |
||||
|
], |
||||
|
options2: { |
||||
|
type: 'line', |
||||
|
title: { |
||||
|
text: '本月金额汇总' |
||||
|
}, |
||||
|
labels: [2,4,6,8,10,12,14,16,18,20,22,24,26,28,30], |
||||
|
datasets: [ |
||||
|
{ |
||||
|
label: '成交金额', |
||||
|
data: [234, 278, 270, 590, 950] |
||||
|
}, |
||||
|
{ |
||||
|
label: '结算金额', |
||||
|
fillColor: "rgba(132, 154, 232, 1)", |
||||
|
data: [164, 178, 150, 135, 160] |
||||
|
}, |
||||
|
] |
||||
|
} |
||||
|
}; |
||||
|
}, |
||||
|
components: { |
||||
|
Schart |
||||
|
}, |
||||
|
computed: { |
||||
|
role() { |
||||
|
return this.name === 'admin' ? '超级管理员' : '普通用户'; |
||||
|
} |
||||
|
}, |
||||
|
// created() { |
||||
|
// this.handleListener(); |
||||
|
// this.changeDate(); |
||||
|
// }, |
||||
|
// activated() { |
||||
|
// this.handleListener(); |
||||
|
// }, |
||||
|
// deactivated() { |
||||
|
// window.removeEventListener('resize', this.renderChart); |
||||
|
// bus.$off('collapse', this.handleBus); |
||||
|
// }, |
||||
|
methods: { |
||||
|
changeDate() { |
||||
|
const now = new Date().getTime(); |
||||
|
this.data.forEach((item, index) => { |
||||
|
const date = new Date(now - (6 - index) * 86400000); |
||||
|
item.name = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`; |
||||
|
}); |
||||
|
} |
||||
|
// handleListener() { |
||||
|
// bus.$on('collapse', this.handleBus); |
||||
|
// // 调用renderChart方法对图表进行重新渲染 |
||||
|
// window.addEventListener('resize', this.renderChart); |
||||
|
// }, |
||||
|
// handleBus(msg) { |
||||
|
// setTimeout(() => { |
||||
|
// this.renderChart(); |
||||
|
// }, 200); |
||||
|
// }, |
||||
|
// renderChart() { |
||||
|
// this.$refs.bar.renderChart(); |
||||
|
// this.$refs.line.renderChart(); |
||||
|
// } |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
|
||||
|
<style scoped> |
||||
|
.achievements{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 16px; |
||||
|
margin-top: 15px; |
||||
|
} |
||||
|
.achievements>>>.el-progress{ |
||||
|
width: 340px; |
||||
|
} |
||||
|
.achievements>span{ |
||||
|
display: inline-block; |
||||
|
width: 175px; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
.summary{ |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
} |
||||
|
.summary_item{ |
||||
|
width:300px ; |
||||
|
height: 50px; |
||||
|
display: flex; |
||||
|
border: 1px solid #D7D7D7; |
||||
|
font-size: 16px; |
||||
|
color: #849AE8; |
||||
|
align-items: center; |
||||
|
margin-top: 15px; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
.summary_item:nth-child(5n+5){ |
||||
|
margin-right: 0px; |
||||
|
} |
||||
|
.summary_item >div{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
height: 100%; |
||||
|
width: 50%; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
.summary_item_left{ |
||||
|
background-color: #4E73E4; |
||||
|
color: white; |
||||
|
text-align: center; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
.notice{ |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
.notice_item{ |
||||
|
font-weight: 400; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
.notice_item:hover{ |
||||
|
color: rgb(41, 76, 198); |
||||
|
} |
||||
|
.notice_item_time{ |
||||
|
display: inline-block; |
||||
|
color: rgb(170, 170, 170); |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
.sanjiao{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
} |
||||
|
.sanjiao>div{ |
||||
|
cursor: pointer; |
||||
|
|
||||
|
} |
||||
|
.sanjiao_left{ |
||||
|
width:0; |
||||
|
height:0; |
||||
|
border-top:10px solid transparent; |
||||
|
border-bottom:10px solid transparent; |
||||
|
border-right:10px solid #D7D7D7; |
||||
|
margin-right: 15px; |
||||
|
} |
||||
|
.sanjiao_right{ |
||||
|
width:0; |
||||
|
height:0; |
||||
|
border-top:10px solid transparent; |
||||
|
border-bottom:10px solid transparent; |
||||
|
border-left:10px solid #D7D7D7; |
||||
|
} |
||||
|
.sanjiao_title{ |
||||
|
font-weight: 500; |
||||
|
font-size: 18px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
.work_title{ |
||||
|
font-weight: 500; |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
.work_content{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
.work_item{ |
||||
|
font-weight: 400; |
||||
|
font-size: 16px; |
||||
|
text-align: center; |
||||
|
margin-top: 40px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.work_item img{ |
||||
|
width: 60px; |
||||
|
height: 60px; |
||||
|
margin-bottom: 5px; |
||||
|
} |
||||
|
.el-row { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.grid-content { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
height: 100px; |
||||
|
} |
||||
|
|
||||
|
.grid-cont-right { |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
font-size: 14px; |
||||
|
color: #999; |
||||
|
} |
||||
|
|
||||
|
.grid-num { |
||||
|
font-size: 30px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.grid-con-icon { |
||||
|
font-size: 50px; |
||||
|
width: 100px; |
||||
|
height: 100px; |
||||
|
text-align: center; |
||||
|
line-height: 100px; |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.grid-con-1 .grid-con-icon { |
||||
|
background: rgb(45, 140, 240); |
||||
|
} |
||||
|
|
||||
|
.grid-con-1 .grid-num { |
||||
|
color: rgb(45, 140, 240); |
||||
|
} |
||||
|
|
||||
|
.grid-con-2 .grid-con-icon { |
||||
|
background: rgb(100, 213, 114); |
||||
|
} |
||||
|
|
||||
|
.grid-con-2 .grid-num { |
||||
|
color: rgb(45, 140, 240); |
||||
|
} |
||||
|
|
||||
|
.grid-con-3 .grid-con-icon { |
||||
|
background: rgb(242, 94, 67); |
||||
|
} |
||||
|
|
||||
|
.grid-con-3 .grid-num { |
||||
|
color: rgb(242, 94, 67); |
||||
|
} |
||||
|
|
||||
|
.user-info { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding-bottom: 20px; |
||||
|
border-bottom: 2px solid #ccc; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.user-avator { |
||||
|
width: 120px; |
||||
|
height: 120px; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
|
||||
|
.user-info-cont { |
||||
|
padding-left: 50px; |
||||
|
flex: 1; |
||||
|
font-size: 14px; |
||||
|
color: #999; |
||||
|
} |
||||
|
|
||||
|
.user-info-cont div:first-child { |
||||
|
font-size: 30px; |
||||
|
color: #222; |
||||
|
} |
||||
|
|
||||
|
.user-info-list { |
||||
|
font-size: 14px; |
||||
|
color: #999; |
||||
|
line-height: 25px; |
||||
|
} |
||||
|
|
||||
|
.user-info-list span { |
||||
|
margin-left: 70px; |
||||
|
} |
||||
|
|
||||
|
.mgb20 { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.todo-item { |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
.todo-item-del { |
||||
|
text-decoration: line-through; |
||||
|
color: #999; |
||||
|
} |
||||
|
|
||||
|
.schart { |
||||
|
width: 100%; |
||||
|
height: 400px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,24 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="crumbs"> |
||||
|
<el-breadcrumb separator="/"> |
||||
|
<el-breadcrumb-item> |
||||
|
<i class="el-icon-lx-redpacket_fill"></i> 支持作者 |
||||
|
</el-breadcrumb-item> |
||||
|
</el-breadcrumb> |
||||
|
</div> |
||||
|
<div class="container"> |
||||
|
<div class="plugins-tips">如果该框架对你有帮助，那就请作者喝杯饮料吧！加微信号linxin_20探讨问题。</div> |
||||
|
<div> |
||||
|
<img src="https://lin-xin.gitee.io/images/weixin.jpg" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default {}; |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
</style> |
||||
@ -0,0 +1,36 @@ |
|||||
|
<template> |
||||
|
<section class="main"> |
||||
|
<div class="crumbs"> |
||||
|
<el-breadcrumb separator="/"> |
||||
|
<el-breadcrumb-item><i class="el-icon-rank"></i> 拖拽组件</el-breadcrumb-item> |
||||
|
<el-breadcrumb-item>拖拽弹框</el-breadcrumb-item> |
||||
|
</el-breadcrumb> |
||||
|
</div> |
||||
|
<div class="container"> |
||||
|
<p>通过指令 v-dialogDrag 使 Dialog 对话框具有可拖拽的功能。</p> |
||||
|
<br> |
||||
|
<el-button type="primary" @click="visible = true;">点我弹框</el-button> |
||||
|
</div> |
||||
|
<el-dialog v-dialogDrag title="拖拽弹框" center :visible.sync="visible" width="30%"> |
||||
|
我是一个可以拖拽的对话框！ |
||||
|
<span slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="visible = false">取 消</el-button> |
||||
|
<el-button type="primary" @click="visible = false">确 定</el-button> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
</section> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data(){ |
||||
|
return { |
||||
|
visible: false |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,174 @@ |
|||||
|
<template> |
||||
|
<section class="main"> |
||||
|
<div class="crumbs"> |
||||
|
<el-breadcrumb separator="/"> |
||||
|
<el-breadcrumb-item><i class="el-icon-rank"></i> 拖拽组件</el-breadcrumb-item> |
||||
|
<el-breadcrumb-item>拖拽排序</el-breadcrumb-item> |
||||
|
</el-breadcrumb> |
||||
|
</div> |
||||
|
<div class="container"> |
||||
|
<div class="plugins-tips"> |
||||
|
Vue.Draggable：基于 Sortable.js 的 Vue 拖拽组件。 |
||||
|
访问地址：<a href="https://github.com/SortableJS/Vue.Draggable" target="_blank">Vue.Draggable</a> |
||||
|
</div> |
||||
|
<div class="drag-box"> |
||||
|
<div class="drag-box-item"> |
||||
|
<div class="item-title">todo</div> |
||||
|
<draggable v-model="todo" @remove="removeHandle" :options="dragOptions"> |
||||
|
<transition-group tag="div" id="todo" class="item-ul"> |
||||
|
<div v-for="item in todo" class="drag-list" :key="item.id"> |
||||
|
{{item.content}} |
||||
|
</div> |
||||
|
</transition-group> |
||||
|
</draggable> |
||||
|
</div> |
||||
|
<div class="drag-box-item"> |
||||
|
<div class="item-title">doing</div> |
||||
|
<draggable v-model="doing" @remove="removeHandle" :options="dragOptions"> |
||||
|
<transition-group tag="div" id="doing" class="item-ul"> |
||||
|
<div v-for="item in doing" class="drag-list" :key="item.id"> |
||||
|
{{item.content}} |
||||
|
</div> |
||||
|
</transition-group> |
||||
|
</draggable> |
||||
|
</div> |
||||
|
<div class="drag-box-item"> |
||||
|
<div class="item-title">done</div> |
||||
|
<draggable v-model="done" @remove="removeHandle" :options="dragOptions"> |
||||
|
<transition-group tag="div" id="done" class="item-ul"> |
||||
|
<div v-for="item in done" class="drag-list" :key="item.id"> |
||||
|
{{item.content}} |
||||
|
</div> |
||||
|
</transition-group> |
||||
|
</draggable> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import draggable from 'vuedraggable' |
||||
|
export default { |
||||
|
name: 'draglist', |
||||
|
data() { |
||||
|
return { |
||||
|
dragOptions:{ |
||||
|
animation: 120, |
||||
|
scroll: true, |
||||
|
group: 'sortlist', |
||||
|
ghostClass: 'ghost-style' |
||||
|
}, |
||||
|
todo: [ |
||||
|
{ |
||||
|
id: 1, |
||||
|
content: '开发图表组件' |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
content: '开发拖拽组件' |
||||
|
}, |
||||
|
{ |
||||
|
id: 3, |
||||
|
content: '开发权限测试组件' |
||||
|
} |
||||
|
], |
||||
|
doing: [ |
||||
|
{ |
||||
|
id: 1, |
||||
|
content: '开发登录注册页面' |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
content: '开发头部组件' |
||||
|
}, |
||||
|
{ |
||||
|
id: 3, |
||||
|
content: '开发表格相关组件' |
||||
|
}, |
||||
|
{ |
||||
|
id: 4, |
||||
|
content: '开发表单相关组件' |
||||
|
} |
||||
|
], |
||||
|
done:[ |
||||
|
{ |
||||
|
id: 1, |
||||
|
content: '初始化项目，生成工程目录，完成相关配置' |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
content: '开发项目整体框架' |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
components:{ |
||||
|
draggable |
||||
|
}, |
||||
|
methods: { |
||||
|
removeHandle(event){ |
||||
|
console.log(event); |
||||
|
this.$message.success(`从 ${event.from.id} 移动到 ${event.to.id} `); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.drag-box{ |
||||
|
display: flex; |
||||
|
user-select: none; |
||||
|
} |
||||
|
.drag-box-item { |
||||
|
flex: 1; |
||||
|
max-width: 330px; |
||||
|
min-width: 300px; |
||||
|
background-color: #eff1f5; |
||||
|
margin-right: 16px; |
||||
|
border-radius: 6px; |
||||
|
border: 1px #e1e4e8 solid; |
||||
|
} |
||||
|
.item-title{ |
||||
|
padding: 8px 8px 8px 12px; |
||||
|
font-size: 14px; |
||||
|
line-height: 1.5; |
||||
|
color: #24292e; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
.item-ul{ |
||||
|
padding: 0 8px 8px; |
||||
|
height: 500px; |
||||
|
overflow-y: scroll; |
||||
|
} |
||||
|
.item-ul::-webkit-scrollbar{ |
||||
|
width: 0; |
||||
|
} |
||||
|
.drag-list { |
||||
|
border: 1px #e1e4e8 solid; |
||||
|
padding: 10px; |
||||
|
margin: 5px 0 10px; |
||||
|
list-style: none; |
||||
|
background-color: #fff; |
||||
|
border-radius: 6px; |
||||
|
cursor: pointer; |
||||
|
-webkit-transition: border .3s ease-in; |
||||
|
transition: border .3s ease-in; |
||||
|
} |
||||
|
.drag-list:hover { |
||||
|
border: 1px solid #20a0ff; |
||||
|
} |
||||
|
.drag-title { |
||||
|
font-weight: 400; |
||||
|
line-height: 25px; |
||||
|
margin: 10px 0; |
||||
|
font-size: 22px; |
||||
|
color: #1f2f3d; |
||||
|
} |
||||
|
.ghost-style{ |
||||
|
display: block; |
||||
|
color: transparent; |
||||
|
border-style: dashed |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,46 @@ |
|||||
|
<template> |
||||
|
<section class="main"> |
||||
|
<div class="crumbs"> |
||||
|
<el-breadcrumb separator="/"> |
||||
|
<el-breadcrumb-item><i class="el-icon-lx-global"></i> {{$t('i18n.breadcrumb')}}</el-breadcrumb-item> |
||||
|
</el-breadcrumb> |
||||
|
</div> |
||||
|
<div class="container"> |
||||
|
<span>{{$t('i18n.tips')}}</span> |
||||
|
<el-button type="primary" @click="$i18n.locale = $i18n.locale === 'zh'?'en':'zh';">{{$t('i18n.btn')}}</el-button> |
||||
|
<div class="list"> |
||||
|
<h2>{{$t('i18n.title1')}}</h2> |
||||
|
<p>{{$t('i18n.p1')}}</p> |
||||
|
<p>{{$t('i18n.p2')}}</p> |
||||
|
<p>{{$t('i18n.p3')}}</p> |
||||
|
</div> |
||||
|
<h2>{{$t('i18n.title2')}}</h2> |
||||
|
<div> |
||||
|
<i18n path="i18n.info" tag="p"> |
||||
|
<a place="action" href="https://element.eleme.cn/2.0/#/zh-CN/component/i18n">{{ $t('i18n.value') }}</a> |
||||
|
</i18n> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data(){ |
||||
|
return { |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.list{ |
||||
|
padding: 30px 0; |
||||
|
} |
||||
|
.list p{ |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
a{ |
||||
|
color: #409eff; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,225 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="crumbs"> |
||||
|
<el-breadcrumb separator="/"> |
||||
|
<el-breadcrumb-item><i class="el-icon-lx-emoji"></i> 自定义图标</el-breadcrumb-item> |
||||
|
</el-breadcrumb> |
||||
|
</div> |
||||
|
<div class="container"> |
||||
|
<h2>使用方法</h2> |
||||
|
<p style="line-height: 50px;"> |
||||
|
直接通过设置类名为 el-icon-lx-iconName 来使用即可。例如：（共{{iconList.length}}个图标） |
||||
|
</p> |
||||
|
<p class="example-p"> |
||||
|
<i class="el-icon-lx-redpacket_fill" style="font-size: 30px;color: #ff5900"></i> |
||||
|
<span><i class="el-icon-lx-redpacket_fill"></i></span> |
||||
|
</p> |
||||
|
<p class="example-p"> |
||||
|
<i class="el-icon-lx-weibo" style="font-size: 30px;color:#fd5656"></i> |
||||
|
<span><i class="el-icon-lx-weibo"></i></span> |
||||
|
</p> |
||||
|
<p class="example-p"> |
||||
|
<i class="el-icon-lx-emojifill" style="font-size: 30px;color: #ffc300"></i> |
||||
|
<span><i class="el-icon-lx-emojifill"></i></span> |
||||
|
</p> |
||||
|
<br> |
||||
|
<h2>图标</h2> |
||||
|
<div class="search-box"> |
||||
|
<el-input class="search" size="large" v-model="keyword" clearable placeholder="请输入图标名称"></el-input> |
||||
|
</div> |
||||
|
<ul> |
||||
|
<li class="icon-li" v-for="(item,index) in list" :key="index"> |
||||
|
<div class="icon-li-content"> |
||||
|
<i :class="`el-icon-lx-${item}`"></i> |
||||
|
<span>{{item}}</span> |
||||
|
</div> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data: function(){ |
||||
|
return { |
||||
|
keyword: '', |
||||
|
iconList: [ |
||||
|
'attentionforbid', |
||||
|
'attentionforbidfill', |
||||
|
'attention', |
||||
|
'attentionfill', |
||||
|
'tag', |
||||
|
'tagfill', |
||||
|
'people', |
||||
|
'peoplefill', |
||||
|
'notice', |
||||
|
'noticefill', |
||||
|
'mobile', |
||||
|
'mobilefill', |
||||
|
'voice', |
||||
|
'voicefill', |
||||
|
'unlock', |
||||
|
'lock', |
||||
|
'home', |
||||
|
'homefill', |
||||
|
'delete', |
||||
|
'deletefill', |
||||
|
'notification', |
||||
|
'notificationfill', |
||||
|
'notificationforbidfill', |
||||
|
'like', |
||||
|
'likefill', |
||||
|
'comment', |
||||
|
'commentfill', |
||||
|
'camera', |
||||
|
'camerafill', |
||||
|
'warn', |
||||
|
'warnfill', |
||||
|
'time', |
||||
|
'timefill', |
||||
|
'location', |
||||
|
'locationfill', |
||||
|
'favor', |
||||
|
'favorfill', |
||||
|
'skin', |
||||
|
'skinfill', |
||||
|
'news', |
||||
|
'newsfill', |
||||
|
'record', |
||||
|
'recordfill', |
||||
|
'emoji', |
||||
|
'emojifill', |
||||
|
'message', |
||||
|
'messagefill', |
||||
|
'goods', |
||||
|
'goodsfill', |
||||
|
'crown', |
||||
|
'crownfill', |
||||
|
'move', |
||||
|
'add', |
||||
|
'hot', |
||||
|
'hotfill', |
||||
|
'service', |
||||
|
'servicefill', |
||||
|
'present', |
||||
|
'presentfill', |
||||
|
'pic', |
||||
|
'picfill', |
||||
|
'rank', |
||||
|
'rankfill', |
||||
|
'male', |
||||
|
'female', |
||||
|
'down', |
||||
|
'top', |
||||
|
'recharge', |
||||
|
'rechargefill', |
||||
|
'forward', |
||||
|
'forwardfill', |
||||
|
'info', |
||||
|
'infofill', |
||||
|
'redpacket', |
||||
|
'redpacket_fill', |
||||
|
'roundadd', |
||||
|
'roundaddfill', |
||||
|
'friendadd', |
||||
|
'friendaddfill', |
||||
|
'cart', |
||||
|
'cartfill', |
||||
|
'more', |
||||
|
'moreandroid', |
||||
|
'back', |
||||
|
'right', |
||||
|
'shop', |
||||
|
'shopfill', |
||||
|
'question', |
||||
|
'questionfill', |
||||
|
'roundclose', |
||||
|
'roundclosefill', |
||||
|
'roundcheck', |
||||
|
'roundcheckfill', |
||||
|
'global', |
||||
|
'mail', |
||||
|
'punch', |
||||
|
'exit', |
||||
|
'upload', |
||||
|
'read', |
||||
|
'file', |
||||
|
'link', |
||||
|
'full', |
||||
|
'group', |
||||
|
'friend', |
||||
|
'profile', |
||||
|
'addressbook', |
||||
|
'calendar', |
||||
|
'text', |
||||
|
'copy', |
||||
|
'share', |
||||
|
'wifi', |
||||
|
'vipcard', |
||||
|
'weibo', |
||||
|
'remind', |
||||
|
'refresh', |
||||
|
'filter', |
||||
|
'settings', |
||||
|
'scan', |
||||
|
'qrcode', |
||||
|
'cascades', |
||||
|
'apps', |
||||
|
'sort', |
||||
|
'searchlist', |
||||
|
'search', |
||||
|
'edit' |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
list(){ |
||||
|
return this.iconList.filter((item) => { |
||||
|
return item.indexOf(this.keyword) !== -1; |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.example-p{ |
||||
|
height: 45px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.search-box{ |
||||
|
text-align: center; |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
.search{ |
||||
|
width: 300px; |
||||
|
} |
||||
|
ul,li{ |
||||
|
list-style: none; |
||||
|
} |
||||
|
.icon-li{ |
||||
|
display: inline-block; |
||||
|
padding: 10px; |
||||
|
width: 120px; |
||||
|
height: 120px; |
||||
|
} |
||||
|
.icon-li-content{ |
||||
|
display: flex; |
||||
|
height: 100%; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.icon-li-content i{ |
||||
|
font-size: 36px; |
||||
|
color: #606266; |
||||
|
} |
||||
|
.icon-li-content span{ |
||||
|
margin-top: 10px; |
||||
|
color: #787878; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,114 @@ |
|||||
|
<template> |
||||
|
<div class="login-wrap"> |
||||
|
<div class="ms-login"> |
||||
|
<div class="ms-title">后台管理系统</div> |
||||
|
<el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content"> |
||||
|
<el-form-item prop="username"> |
||||
|
<el-input v-model="param.uname" placeholder="username"> |
||||
|
<el-button slot="prepend" icon="el-icon-lx-people"></el-button> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="password"> |
||||
|
<el-input |
||||
|
type="password" |
||||
|
placeholder="password" |
||||
|
v-model="param.upass" |
||||
|
@keyup.enter.native="submitForm()" |
||||
|
> |
||||
|
<el-button slot="prepend" icon="el-icon-lx-lock"></el-button> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<div class="login-btn"> |
||||
|
<el-button type="primary" @click="submitForm()">登录</el-button> |
||||
|
</div> |
||||
|
<p class="login-tips">Tips : 用户名和密码随便填。</p> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import {login} from '../../api/index' |
||||
|
export default { |
||||
|
data: function() { |
||||
|
return { |
||||
|
param: { |
||||
|
uname: '', |
||||
|
upass: '', |
||||
|
}, |
||||
|
rules: { |
||||
|
uname: [{ required: true, message: '请输入用户名', trigger: 'blur' }], |
||||
|
upass: [{ required: true, message: '请输入密码', trigger: 'blur' }], |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
methods: { |
||||
|
submitForm() { |
||||
|
this.$refs.login.validate(valid => { |
||||
|
if (valid) { |
||||
|
login(this.param).then(res=>{ |
||||
|
console.info(res) |
||||
|
if (res.code==100) { |
||||
|
this.$message.success('登录成功'); |
||||
|
localStorage.setItem('ms_username', res.username); |
||||
|
localStorage.setItem('ms_id', res.uid); |
||||
|
localStorage.setItem('token', res.token); |
||||
|
this.$router.push('/'); |
||||
|
}else{ |
||||
|
this.$message.error(res.msg); |
||||
|
} |
||||
|
}) |
||||
|
} else { |
||||
|
this.$message.error('请输入账号和密码'); |
||||
|
console.log('error submit!!'); |
||||
|
return false; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.login-wrap { |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background-image: url(../../assets/img/login-bg.jpg); |
||||
|
background-size: 100%; |
||||
|
} |
||||
|
.ms-title { |
||||
|
width: 100%; |
||||
|
line-height: 50px; |
||||
|
text-align: center; |
||||
|
font-size: 20px; |
||||
|
color: #fff; |
||||
|
border-bottom: 1px solid #ddd; |
||||
|
} |
||||
|
.ms-login { |
||||
|
position: absolute; |
||||
|
left: 50%; |
||||
|
top: 50%; |
||||
|
width: 350px; |
||||
|
margin: -190px 0 0 -175px; |
||||
|
border-radius: 5px; |
||||
|
background: rgba(255, 255, 255, 0.3); |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.ms-content { |
||||
|
padding: 30px 30px; |
||||
|
} |
||||
|
.login-btn { |
||||
|
text-align: center; |
||||
|
} |
||||
|
.login-btn button { |
||||
|
width: 100%; |
||||
|
height: 36px; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
.login-tips { |
||||
|
font-size: 12px; |
||||
|
line-height: 30px; |
||||
|
color: #fff; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,67 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="crumbs"> |
||||
|
<el-breadcrumb separator="/"> |
||||
|
<el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 表单</el-breadcrumb-item> |
||||
|
<el-breadcrumb-item>markdown编辑器</el-breadcrumb-item> |
||||
|
</el-breadcrumb> |
||||
|
</div> |
||||
|
<div class="container"> |
||||
|
<div class="plugins-tips"> |
||||
|
mavonEditor：基于Vue的markdown编辑器。 |
||||
|
访问地址：<a href="https://github.com/hinesboy/mavonEditor" target="_blank">mavonEditor</a> |
||||
|
</div> |
||||
|
<mavon-editor v-model="content" ref="md" @imgAdd="$imgAdd" @change="change" style="min-height: 600px"/> |
||||
|
<el-button class="editor-btn" type="primary" @click="submit">提交</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mavonEditor } from 'mavon-editor' |
||||
|
import 'mavon-editor/dist/css/index.css' |
||||
|
export default { |
||||
|
name: 'markdown', |
||||
|
data: function(){ |
||||
|
return { |
||||
|
content:'', |
||||
|
html:'', |
||||
|
configs: { |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
components: { |
||||
|
mavonEditor |
||||
|
}, |
||||
|
methods: { |
||||
|
// 将图片上传到服务器，返回地址替换到md中 |
||||
|
$imgAdd(pos, $file){ |
||||
|
var formdata = new FormData(); |
||||
|
formdata.append('file', $file); |
||||
|
// 这里没有服务器供大家尝试，可将下面上传接口替换为你自己的服务器接口 |
||||
|
this.$axios({ |
||||
|
url: '/common/upload', |
||||
|
method: 'post', |
||||
|
data: formdata, |
||||
|
headers: { 'Content-Type': 'multipart/form-data' }, |
||||
|
}).then((url) => { |
||||
|
this.$refs.md.$img2Url(pos, url); |
||||
|
}) |
||||
|
}, |
||||
|
change(value, render){ |
||||
|
// render 为 markdown 解析后的结果 |
||||
|
this.html = render; |
||||
|
}, |
||||
|
submit(){ |
||||
|
console.log(this.content); |
||||
|
console.log(this.html); |
||||
|
this.$message.success('提交成功！'); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.editor-btn{ |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,290 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="crumbs"> |
||||
|
<el-breadcrumb separator="/"> |
||||
|
<el-breadcrumb-item> |
||||
|
<i class="el-icon-lx-cascades"></i> 运营管理 |
||||
|
</el-breadcrumb-item> |
||||
|
<el-breadcrumb-item>通知公告配置</el-breadcrumb-item> |
||||
|
</el-breadcrumb> |
||||
|
</div> |
||||
|
<div class="container"> |
||||
|
<div class="handle-box"> |
||||
|
<el-input placeholder="公告标题" class="handle-input mr10" v-model="query.title"></el-input> |
||||
|
<el-input placeholder="发布人员ID" class="handle-input mr10" v-model="query.auditID"></el-input> |
||||
|
<el-date-picker |
||||
|
class="mr10" |
||||
|
v-model="query.time" |
||||
|
type="datetimerange" |
||||
|
:picker-options="pickerOptions" |
||||
|
range-separator="至" |
||||
|
value-format="yyyy-MM-dd HH:mm:ss" |
||||
|
start-placeholder="开始日期" |
||||
|
end-placeholder="结束日期" |
||||
|
align="right" |
||||
|
> |
||||
|
</el-date-picker> |
||||
|
<el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button> |
||||
|
<el-button type="primary" @click="handleEdit(0)">新增通知公告</el-button> |
||||
|
</div> |
||||
|
<el-table |
||||
|
:data="tableData" |
||||
|
border |
||||
|
class="table" |
||||
|
ref="multipleTable" |
||||
|
header-cell-class-name="table-header" |
||||
|
> |
||||
|
<el-table-column prop="id" label="序号" width="55" align="center"></el-table-column> |
||||
|
<el-table-column prop="create_time" label="发布日期" :formatter="formatDate"></el-table-column> |
||||
|
<el-table-column label="公告标题" prop="title"></el-table-column> |
||||
|
<el-table-column label="发布人员" prop="username"></el-table-column> |
||||
|
<el-table-column label="操作" width="280" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
@click="handleEdit(1, scope.row.id)" |
||||
|
>公告内容</el-button> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
@click="handleDelete( scope.row.id)" |
||||
|
>删除公告</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<div class="pagination"> |
||||
|
<el-pagination |
||||
|
background |
||||
|
layout="total, prev, pager, next" |
||||
|
:current-page="query.page" |
||||
|
:page-size="query.limit" |
||||
|
:total="pageTotal" |
||||
|
@current-change="handlePageChange" |
||||
|
></el-pagination> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 编辑弹出框 --> |
||||
|
<el-dialog title="通知公告配置" :visible.sync="editVisible" width="40%" @close="closedialog"> |
||||
|
<el-form ref="form" :model="form" :rules="rules"> |
||||
|
<el-form-item label="公告标题" prop="title" class="form_item"> |
||||
|
<el-input v-model="form.title" placeholder="请输入公告标题"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="公告内容" prop="content" class="form_item"> |
||||
|
<el-input v-model="form.content" type="textarea" :rows="2" placeholder="请输入公告内容"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<span slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="editVisible = false">取 消</el-button> |
||||
|
<el-button type="primary" @click="setNotice">确 定</el-button> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { getNoticeList ,setNotice,getNoticeFind,updateNotice,deleteNotice} from '../../../api/index'; |
||||
|
import moment from 'moment' |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
query: { |
||||
|
auditID: '', |
||||
|
title: '', |
||||
|
page: 1, |
||||
|
limit: 10, |
||||
|
time:'' |
||||
|
}, |
||||
|
noticeType:0, |
||||
|
form:{ |
||||
|
id:'', |
||||
|
title:'', |
||||
|
content:'' |
||||
|
}, |
||||
|
rules:{ |
||||
|
title: [ |
||||
|
{ required: true, message: '请输入公告标题', trigger: 'blur' }, |
||||
|
], |
||||
|
content: [ |
||||
|
{ required: true, message: '请输入公告内容', trigger: 'blur' }, |
||||
|
], |
||||
|
}, |
||||
|
tableData: [], |
||||
|
editVisible: false, |
||||
|
pageTotal: 0, |
||||
|
pickerOptions: { |
||||
|
shortcuts: [ |
||||
|
{ |
||||
|
text: "最近一周", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: "最近一个月", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: "最近三个月", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
this.getData(); |
||||
|
}, |
||||
|
methods: { |
||||
|
search(){ |
||||
|
this.query.page=1 |
||||
|
this.getData(); |
||||
|
}, |
||||
|
closedialog(){ |
||||
|
for(var p in this.form){//遍历json对象的每个key/value对,p为key |
||||
|
this.form[p]='' |
||||
|
} |
||||
|
}, |
||||
|
getNoticeFind(){ |
||||
|
getNoticeFind(this.form).then(res=>{ |
||||
|
console.info(res) |
||||
|
if (res.code==100) { |
||||
|
this.form.title=res.data.title |
||||
|
this.form.content=res.data.content |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
//设置通知公告配置 |
||||
|
setNotice(){ |
||||
|
this.$refs["form"].validate((valid) => { |
||||
|
if (valid) { |
||||
|
if (this.noticeType==0) { |
||||
|
setNotice(this.form).then(res=>{ |
||||
|
console.info(res) |
||||
|
if (res.code==100) { |
||||
|
this.$message.success('新增成功~') |
||||
|
this.editVisible=false |
||||
|
this.getData(); |
||||
|
}else{ |
||||
|
this.$message.error(res.msg) |
||||
|
} |
||||
|
}) |
||||
|
}else{ |
||||
|
updateNotice(this.form).then(res=>{ |
||||
|
console.info(res) |
||||
|
if (res.code==100) { |
||||
|
this.$message.success('修改成功~') |
||||
|
this.editVisible=false |
||||
|
this.getData(); |
||||
|
}else{ |
||||
|
this.$message.error(res.msg) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
//时间戳转换时间 |
||||
|
formatDate(row,colnum){ |
||||
|
return moment(row.create_time*1000).format('YYYY-MM-DD HH:mm:ss') |
||||
|
}, |
||||
|
// 获取 easy-mock 的模拟数据 |
||||
|
getData() { |
||||
|
getNoticeList(this.query).then(res => { |
||||
|
console.log(res); |
||||
|
if (res.code==100) { |
||||
|
this.tableData = res.data.list; |
||||
|
this.pageTotal = res.data.count ; |
||||
|
}else{ |
||||
|
this.$message.error(res.msg) |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 删除操作 |
||||
|
handleDelete(id) { |
||||
|
// 二次确认删除 |
||||
|
this.$confirm('确定要删除吗？', '提示', { |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
let data={id:id} |
||||
|
deleteNotice(data).then(res=>{ |
||||
|
console.info(res) |
||||
|
if (res.code==100) { |
||||
|
this.$message.success('删除成功~') |
||||
|
this.getData(); |
||||
|
} |
||||
|
}) |
||||
|
}).catch(() => {}); |
||||
|
}, |
||||
|
// 编辑操作 |
||||
|
handleEdit(type,id) { |
||||
|
if (type==1) { |
||||
|
this.form.id=id |
||||
|
this.getNoticeFind() |
||||
|
} |
||||
|
this.noticeType=type |
||||
|
this.editVisible = true; |
||||
|
}, |
||||
|
// 分页导航 |
||||
|
handlePageChange(val) { |
||||
|
this.$set(this.query, 'page', val); |
||||
|
this.getData(); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.handle-box { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.handle-select { |
||||
|
width: 120px; |
||||
|
} |
||||
|
|
||||
|
.handle-input { |
||||
|
width: 150px; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
.table { |
||||
|
width: 100%; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.red { |
||||
|
color: #ff0000; |
||||
|
} |
||||
|
.mr10 { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
.table-td-thumb { |
||||
|
display: block; |
||||
|
margin: auto; |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
} |
||||
|
.form_item{ |
||||
|
margin-bottom: 25px; |
||||
|
} |
||||
|
.form_item >>>.el-input { |
||||
|
width: 80%; |
||||
|
} |
||||
|
.form_item >>>.el-textarea{ |
||||
|
width: 80%; |
||||
|
} |
||||
|
.form_item >>>.el-form-item__error{ |
||||
|
left: 75px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,194 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="crumbs"> |
||||
|
<el-breadcrumb separator="/"> |
||||
|
<el-breadcrumb-item> |
||||
|
<i class="el-icon-lx-cascades"></i> 运营管理 |
||||
|
</el-breadcrumb-item> |
||||
|
<el-breadcrumb-item>资产推荐配置</el-breadcrumb-item> |
||||
|
</el-breadcrumb> |
||||
|
</div> |
||||
|
<div class="container banner_title"> |
||||
|
<div class="banner_title_item"> |
||||
|
<img src="../../../assets/img/photo.png" alt="" class="photo"> |
||||
|
<p>图片库</p> |
||||
|
</div> |
||||
|
<div class="banner_title_item"> |
||||
|
<img src="../../../assets/img/preview.png" alt="" class="preview"> |
||||
|
<p>效果预览</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="container banner_content"> |
||||
|
<div class="banner_num"> |
||||
|
<span class="banner_num_span">图片数量：</span> |
||||
|
<el-select placeholder="请选择图片数量" class="handle-select mr10"> |
||||
|
<el-option key="1" label="广东省" value="广东省"></el-option> |
||||
|
<el-option key="2" label="湖南省" value="湖南省"></el-option> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
<div class="feed_item"> |
||||
|
<div class="banner_num"> |
||||
|
<span class="banner_num_span">图片1：</span> |
||||
|
<el-input placeholder="请输入图片名称"></el-input> |
||||
|
<el-input placeholder="请选择图片路径" class="banner_num_input"></el-input> |
||||
|
<span class="banner_num_span1">上传图片</span> |
||||
|
<span class="banner_num_span1">打开图片库</span> |
||||
|
<span class="banner_num_span1">上移</span> |
||||
|
<span class="banner_num_span1">下移</span> |
||||
|
</div> |
||||
|
<el-input |
||||
|
type="textarea" |
||||
|
:rows="4" |
||||
|
placeholder="请输入文案" |
||||
|
v-model="textarea"> |
||||
|
</el-input> |
||||
|
</div> |
||||
|
<div class="feed_item"> |
||||
|
<div class="banner_num"> |
||||
|
<span class="banner_num_span">图片2：</span> |
||||
|
<el-input placeholder="请输入图片名称"></el-input> |
||||
|
<el-input placeholder="请选择图片路径" class="banner_num_input"></el-input> |
||||
|
<span class="banner_num_span1">上传图片</span> |
||||
|
<span class="banner_num_span1">打开图片库</span> |
||||
|
<span class="banner_num_span1">上移</span> |
||||
|
<span class="banner_num_span1">下移</span> |
||||
|
</div> |
||||
|
<el-input |
||||
|
type="textarea" |
||||
|
:rows="4" |
||||
|
placeholder="请输入文案" |
||||
|
v-model="textarea"> |
||||
|
</el-input> |
||||
|
</div> |
||||
|
<div class="feed_item"> |
||||
|
<div class="banner_num"> |
||||
|
<span class="banner_num_span">图片3：</span> |
||||
|
<el-input placeholder="请输入图片名称"></el-input> |
||||
|
<el-input placeholder="请选择图片路径" class="banner_num_input"></el-input> |
||||
|
<span class="banner_num_span1">上传图片</span> |
||||
|
<span class="banner_num_span1">打开图片库</span> |
||||
|
<span class="banner_num_span1">上移</span> |
||||
|
<span class="banner_num_span1">下移</span> |
||||
|
</div> |
||||
|
<el-input |
||||
|
type="textarea" |
||||
|
:rows="4" |
||||
|
placeholder="请输入文案" |
||||
|
v-model="textarea"> |
||||
|
</el-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { getRecommend } from '../../../api/index'; |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
query: { |
||||
|
address: '', |
||||
|
name: '', |
||||
|
pageIndex: 1, |
||||
|
pageSize: 10 |
||||
|
}, |
||||
|
textarea:'' |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
this.getData(); |
||||
|
}, |
||||
|
methods: { |
||||
|
// 获取 easy-mock 的模拟数据 |
||||
|
getData() { |
||||
|
getRecommend().then(res => { |
||||
|
console.log(res); |
||||
|
if (res.code==100) { |
||||
|
}else{ |
||||
|
this.$message.error(res.msg) |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.feed_item{ |
||||
|
margin-bottom: 30px; |
||||
|
} |
||||
|
.banner_num{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
.banner_num_span{ |
||||
|
display: inline-block; |
||||
|
width: 80px; |
||||
|
} |
||||
|
.banner_num_span1{ |
||||
|
color:#4E73E4 ; |
||||
|
text-decoration: underline; |
||||
|
display: inline-block; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
.banner_num_input{ |
||||
|
width: 300px !important; |
||||
|
margin-right: 40px; |
||||
|
} |
||||
|
.banner_num .handle-select{ |
||||
|
width: 200px; |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
.banner_num .el-input{ |
||||
|
width: auto; |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
.banner_content{ |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
.banner_title{ |
||||
|
display: flex; |
||||
|
padding-left: 80px; |
||||
|
} |
||||
|
.banner_title_item { |
||||
|
text-align: center; |
||||
|
margin-right: 100px; |
||||
|
} |
||||
|
.photo{ |
||||
|
width: 60px; |
||||
|
height: 55px; |
||||
|
} |
||||
|
.preview{ |
||||
|
width: 60px; |
||||
|
height: 60px; |
||||
|
} |
||||
|
.handle-box { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.handle-select { |
||||
|
width: 120px; |
||||
|
} |
||||
|
|
||||
|
.handle-input { |
||||
|
width: 150px; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
.table { |
||||
|
width: 100%; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.red { |
||||
|
color: #ff0000; |
||||
|
} |
||||
|
.mr10 { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
.table-td-thumb { |
||||
|
display: block; |
||||
|
margin: auto; |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,235 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="crumbs"> |
||||
|
<el-breadcrumb separator="/"> |
||||
|
<el-breadcrumb-item> |
||||
|
<i class="el-icon-lx-cascades"></i> 运营管理 |
||||
|
</el-breadcrumb-item> |
||||
|
<el-breadcrumb-item>banner配置</el-breadcrumb-item> |
||||
|
</el-breadcrumb> |
||||
|
</div> |
||||
|
<div class="container banner_title"> |
||||
|
<div class="banner_title_item"> |
||||
|
<img src="../../../assets/img/photo.png" alt="" class="photo"> |
||||
|
<p>图片库</p> |
||||
|
</div> |
||||
|
<div class="banner_title_item"> |
||||
|
<img src="../../../assets/img/preview.png" alt="" class="preview"> |
||||
|
<p>效果预览</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="container banner_content"> |
||||
|
<div class="banner_num"> |
||||
|
<span class="banner_num_span">图片数量：</span> |
||||
|
<el-input placeholder="请输入图片数量" v-model.number="banner_num" @input="changeNum()"></el-input> |
||||
|
<!-- <el-select placeholder="请选择图片数量" class="handle-select mr10"> |
||||
|
<el-option key="1" label="广东省" value="广东省"></el-option> |
||||
|
<el-option key="2" label="湖南省" value="湖南省"></el-option> |
||||
|
</el-select> --> |
||||
|
</div> |
||||
|
<template v-if="banner.length !=0"> |
||||
|
<div class="banner_num" v-for="(item,index) in banner.slice(0,banner_num)" :key="index"> |
||||
|
<span class="banner_num_span">图片{{index+1}}：</span> |
||||
|
<el-input placeholder="图片名称" v-model="item.name" readonly></el-input> |
||||
|
<el-input placeholder="图片路径" class="banner_num_input" v-model="item.img" readonly></el-input> |
||||
|
<el-upload |
||||
|
class="upload-demo" |
||||
|
:action="action" |
||||
|
:on-change="fileChange" |
||||
|
:show-file-list="false" |
||||
|
:on-error="handleAvatarError" |
||||
|
list-type="picture" |
||||
|
:on-success="(res,file)=>{handleAvatarSuccess(res,file,index)}" |
||||
|
> |
||||
|
<span class="banner_num_span1">上传图片</span> |
||||
|
</el-upload> |
||||
|
<span class="banner_num_span1">打开图片库</span> |
||||
|
<span class="banner_num_span1" @click="moveUp(index)">上移</span> |
||||
|
<span class="banner_num_span1" @click="moveDown(index)">下移</span> |
||||
|
</div> |
||||
|
</template> |
||||
|
<div v-if="banner_num!='' || banner_num!=0"> |
||||
|
<el-button type="primary" @click="setBanner">保存</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { getBanner,setBanner } from '../../../api/index'; |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
query: { |
||||
|
address: '', |
||||
|
name: '', |
||||
|
pageIndex: 1, |
||||
|
pageSize: 10 |
||||
|
}, |
||||
|
host:'http://rccqapi.szcaee.cn', |
||||
|
action:'http://rccqapi.szcaee.cn/api/Index/uploadimg', |
||||
|
banner_num:'', |
||||
|
banner:[] |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
this.getData(); |
||||
|
}, |
||||
|
methods: { |
||||
|
moveDown(index){ |
||||
|
let length=this.banner.length |
||||
|
if (length!=1) { |
||||
|
let list= this.banner[index + 1]; |
||||
|
this.$set(this.banner, index + 1, this.banner[index]); |
||||
|
this.$set(this.banner, index, list) |
||||
|
} |
||||
|
}, |
||||
|
moveUp(index){ |
||||
|
let length=this.banner.length |
||||
|
if (length!=1) { |
||||
|
let list= this.banner[index - 1]; |
||||
|
this.$set(this.banner, index - 1, this.banner[index]); |
||||
|
this.$set(this.banner, index, list) |
||||
|
} |
||||
|
}, |
||||
|
changeNum(){ |
||||
|
if (this.banner_num>this.banner.length) { |
||||
|
let index=this.banner_num-this.banner.length |
||||
|
for (let i=0;i<index;i++){ |
||||
|
this.banner.push({name:'',img:''}) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
setBanner(){ |
||||
|
setBanner(this.banner).then(res=>{ |
||||
|
console.info(res) |
||||
|
if (res.code==100) { |
||||
|
this.$message.success('文件上传成功！'); |
||||
|
}else{ |
||||
|
this.$message.error(res.msg) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 获取 easy-mock 的模拟数据 |
||||
|
getData() { |
||||
|
getBanner().then(res => { |
||||
|
console.log(res); |
||||
|
if (res.code==100) { |
||||
|
this.banner =res.data.list |
||||
|
if (this.banner.length!=0) { |
||||
|
this.banner_num=this.banner.length |
||||
|
} |
||||
|
}else{ |
||||
|
this.$message.error(res.msg) |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
handleAvatarSuccess(res, file, index,key){ |
||||
|
console.info(res) |
||||
|
console.info(file) |
||||
|
if(res.code==1){ |
||||
|
let data={name:file.name,img:this.host+res.data.img_url} |
||||
|
this.$set(this.banner, index , data); |
||||
|
// this.banner.push() |
||||
|
} |
||||
|
}, |
||||
|
handleAvatarError(){ |
||||
|
this.$message.error('文件上传失败！'); |
||||
|
}, |
||||
|
fileChange(file){ |
||||
|
const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg']; |
||||
|
const isJPG = typeArr.indexOf(file.raw.type) !== -1; |
||||
|
const isLt3M = file.size / 1024 / 1024 < 3; |
||||
|
if (!isJPG) { |
||||
|
this.$message.error('只能是图片!'); |
||||
|
this.$refs.upload.clearFiles(); |
||||
|
return; |
||||
|
} |
||||
|
if (!isLt3M) { |
||||
|
this.$message.error('上传图片大小不能超过 3MB!'); |
||||
|
this.$refs.upload.clearFiles(); |
||||
|
// this.$set(this.query, 'goods_img', ''); |
||||
|
return; |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.banner_num{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 30px; |
||||
|
} |
||||
|
.banner_num_span{ |
||||
|
display: inline-block; |
||||
|
width: 80px; |
||||
|
} |
||||
|
.banner_num_span1{ |
||||
|
color:#4E73E4 ; |
||||
|
text-decoration: underline; |
||||
|
display: inline-block; |
||||
|
margin-right: 20px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.banner_num_input{ |
||||
|
width: 300px !important; |
||||
|
margin-right: 40px; |
||||
|
} |
||||
|
.banner_num .handle-select{ |
||||
|
width: 200px; |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
.banner_num .el-input{ |
||||
|
width: auto; |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
.banner_content{ |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
.banner_title{ |
||||
|
display: flex; |
||||
|
padding-left: 80px; |
||||
|
} |
||||
|
.banner_title_item { |
||||
|
text-align: center; |
||||
|
margin-right: 100px; |
||||
|
} |
||||
|
.photo{ |
||||
|
width: 60px; |
||||
|
height: 55px; |
||||
|
} |
||||
|
.preview{ |
||||
|
width: 60px; |
||||
|
height: 60px; |
||||
|
} |
||||
|
.handle-box { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.handle-select { |
||||
|
width: 120px; |
||||
|
} |
||||
|
|
||||
|
.handle-input { |
||||
|
width: 150px; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
.table { |
||||
|
width: 100%; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.red { |
||||
|
color: #ff0000; |
||||
|
} |
||||
|
.mr10 { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
.table-td-thumb { |
||||
|
display: block; |
||||
|
margin: auto; |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,228 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="crumbs"> |
||||
|
<el-breadcrumb separator="/"> |
||||
|
<el-breadcrumb-item> |
||||
|
<i class="el-icon-lx-cascades"></i> 运营管理 |
||||
|
</el-breadcrumb-item> |
||||
|
<el-breadcrumb-item>客户意见处理</el-breadcrumb-item> |
||||
|
</el-breadcrumb> |
||||
|
</div> |
||||
|
<div class="container"> |
||||
|
<div class="handle-box"> |
||||
|
<el-input placeholder="机构名称" class="handle-input mr10" v-model="query.firm_name"></el-input> |
||||
|
<el-input v-model="query.username" placeholder="法人名称" class="handle-input mr10"></el-input> |
||||
|
<el-input placeholder="意见内容" class="handle-input mr10" v-model="query.message"></el-input> |
||||
|
<el-select placeholder="回复人员" class="handle-select mr10" v-model="query.message"> |
||||
|
<el-option key="1" label="广东省" value="广东省"></el-option> |
||||
|
<el-option key="2" label="湖南省" value="湖南省"></el-option> |
||||
|
</el-select> |
||||
|
<el-date-picker |
||||
|
class="mr10" |
||||
|
v-model="query.time" |
||||
|
type="datetimerange" |
||||
|
:picker-options="pickerOptions" |
||||
|
range-separator="至" |
||||
|
value-format="yyyy-MM-dd h:m:s" |
||||
|
start-placeholder="开始日期" |
||||
|
end-placeholder="结束日期" |
||||
|
align="right" |
||||
|
> |
||||
|
</el-date-picker> |
||||
|
<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button> |
||||
|
</div> |
||||
|
<el-table |
||||
|
:data="tableData" |
||||
|
border |
||||
|
class="table" |
||||
|
ref="multipleTable" |
||||
|
header-cell-class-name="table-header" |
||||
|
> |
||||
|
<el-table-column prop="id" label="序号" width="55" align="center"></el-table-column> |
||||
|
<el-table-column prop="name" label="提交日期"></el-table-column> |
||||
|
<el-table-column label="机构名称" prop="name"></el-table-column> |
||||
|
<el-table-column prop="address" label="法人名称"></el-table-column> |
||||
|
<el-table-column label="意见内容" prop="name"></el-table-column> |
||||
|
<el-table-column label="回复人员" prop="name"></el-table-column> |
||||
|
<el-table-column label="操作" width="280" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
@click="handleEdit(scope.$index, scope.row)" |
||||
|
>资料查看</el-button> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
@click="handleDelete(scope.$index, scope.row)" |
||||
|
>查看附件</el-button> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
@click="handleDelete(scope.$index, scope.row)" |
||||
|
>回复内容</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<div class="pagination"> |
||||
|
<el-pagination |
||||
|
background |
||||
|
layout="total, prev, pager, next" |
||||
|
:current-page="query.page" |
||||
|
:page-size="query.limit" |
||||
|
:total="pageTotal" |
||||
|
@current-change="handlePageChange" |
||||
|
></el-pagination> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 编辑弹出框 --> |
||||
|
<el-dialog title="编辑" :visible.sync="editVisible" width="30%"> |
||||
|
<el-form ref="form" :model="form" label-width="70px"> |
||||
|
<el-form-item label="用户名"> |
||||
|
<el-input v-model="form.name"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="地址"> |
||||
|
<el-input v-model="form.address"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<span slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="editVisible = false">取 消</el-button> |
||||
|
<el-button type="primary" @click="saveEdit">确 定</el-button> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { opinionList } from '../../../api/index'; |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
query: { |
||||
|
firm_name: '', |
||||
|
username: '', |
||||
|
auditID: '', |
||||
|
time: '', |
||||
|
message: '', |
||||
|
page: 1, |
||||
|
limit: 10 |
||||
|
}, |
||||
|
form:{}, |
||||
|
tableData: [], |
||||
|
multipleSelection: [], |
||||
|
delList: [], |
||||
|
editVisible: false, |
||||
|
pageTotal: 0, |
||||
|
pickerOptions: { |
||||
|
shortcuts: [ |
||||
|
{ |
||||
|
text: "最近一周", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: "最近一个月", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: "最近三个月", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
this.getData(); |
||||
|
}, |
||||
|
methods: { |
||||
|
// 获取 easy-mock 的模拟数据 |
||||
|
getData() { |
||||
|
opinionList(this.query).then(res => { |
||||
|
console.log(res); |
||||
|
if (res.code==100) { |
||||
|
this.tableData = res.data.list; |
||||
|
this.pageTotal = res.data.count ; |
||||
|
}else{ |
||||
|
this.$message.error(res.msg) |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 触发搜索按钮 |
||||
|
handleSearch() { |
||||
|
this.$set(this.query, 'page', 1); |
||||
|
this.getData(); |
||||
|
}, |
||||
|
// 删除操作 |
||||
|
handleDelete(index, row) { |
||||
|
// 二次确认删除 |
||||
|
this.$confirm('确定要删除吗？', '提示', { |
||||
|
type: 'warning' |
||||
|
}) |
||||
|
.then(() => { |
||||
|
this.$message.success('删除成功'); |
||||
|
this.tableData.splice(index, 1); |
||||
|
}) |
||||
|
.catch(() => {}); |
||||
|
}, |
||||
|
// 编辑操作 |
||||
|
handleEdit(index, row) { |
||||
|
this.editVisible = true; |
||||
|
}, |
||||
|
// 保存编辑 |
||||
|
saveEdit() { |
||||
|
this.editVisible = false; |
||||
|
this.$message.success(`修改第 ${this.idx + 1} 行成功`); |
||||
|
this.$set(this.tableData, this.idx, this.form); |
||||
|
}, |
||||
|
// 分页导航 |
||||
|
handlePageChange(val) { |
||||
|
this.$set(this.query, 'page', val); |
||||
|
this.getData(); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.handle-box { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.handle-select { |
||||
|
width: 120px; |
||||
|
} |
||||
|
|
||||
|
.handle-input { |
||||
|
width: 150px; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
.table { |
||||
|
width: 100%; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.red { |
||||
|
color: #ff0000; |
||||
|
} |
||||
|
.mr10 { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
.table-td-thumb { |
||||
|
display: block; |
||||
|
margin: auto; |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,236 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="crumbs"> |
||||
|
<el-breadcrumb separator="/"> |
||||
|
<el-breadcrumb-item> |
||||
|
<i class="el-icon-lx-cascades"></i> 运营管理 |
||||
|
</el-breadcrumb-item> |
||||
|
<el-breadcrumb-item>feed配置</el-breadcrumb-item> |
||||
|
</el-breadcrumb> |
||||
|
</div> |
||||
|
<div class="container banner_title"> |
||||
|
<div class="banner_title_item"> |
||||
|
<img src="../../../assets/img/photo.png" alt="" class="photo"> |
||||
|
<p>图片库</p> |
||||
|
</div> |
||||
|
<div class="banner_title_item"> |
||||
|
<img src="../../../assets/img/preview.png" alt="" class="preview"> |
||||
|
<p>效果预览</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="container banner_content"> |
||||
|
<div class="banner_num"> |
||||
|
<span class="banner_num_span">图片数量：</span> |
||||
|
<el-input placeholder="请输入图片数量" v-model.number="banner_num" @input="changeNum()"></el-input> |
||||
|
</div> |
||||
|
<template v-if="banner.length !=0"> |
||||
|
<div class="feed_item" v-for="(item,index) in banner.slice(0,banner_num)" :key="index"> |
||||
|
|
||||
|
<div class="banner_num" > |
||||
|
<span class="banner_num_span">图片{{index+1}}：</span> |
||||
|
<el-input placeholder="请输入图片名称" v-model="item.name" readonly></el-input> |
||||
|
<el-input placeholder="请选择图片路径" class="banner_num_input" v-model="item.img" readonly></el-input> |
||||
|
<el-upload |
||||
|
class="upload-demo" |
||||
|
:action="action" |
||||
|
:on-change="fileChange" |
||||
|
:show-file-list="false" |
||||
|
:on-error="handleAvatarError" |
||||
|
list-type="picture" |
||||
|
:on-success="(res,file)=>{handleAvatarSuccess(res,file,index)}" |
||||
|
> |
||||
|
<span class="banner_num_span1">上传图片</span> |
||||
|
</el-upload> |
||||
|
<span class="banner_num_span1">打开图片库</span> |
||||
|
<span class="banner_num_span1" @click="moveUp(index)">上移</span> |
||||
|
<span class="banner_num_span1" @click="moveDown(index)">下移</span> |
||||
|
</div> |
||||
|
<el-input |
||||
|
type="textarea" |
||||
|
:rows="4" |
||||
|
placeholder="请输入文案" |
||||
|
v-model="item.content"> |
||||
|
</el-input> |
||||
|
</div> |
||||
|
</template> |
||||
|
<div v-if="banner_num!='' || banner_num!=0"> |
||||
|
<el-button type="primary" @click="setBanner">保存</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { getFeed,setFeed } from '../../../api/index'; |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
host:'http://rccqapi.szcaee.cn', |
||||
|
action:'http://rccqapi.szcaee.cn/api/Index/uploadimg', |
||||
|
banner_num:'', |
||||
|
banner:[] |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
this.getData(); |
||||
|
}, |
||||
|
methods: { |
||||
|
moveDown(index){ |
||||
|
let length=this.banner.length |
||||
|
if (length!=1) { |
||||
|
let list= this.banner[index + 1]; |
||||
|
this.$set(this.banner, index + 1, this.banner[index]); |
||||
|
this.$set(this.banner, index, list) |
||||
|
} |
||||
|
}, |
||||
|
moveUp(index){ |
||||
|
let length=this.banner.length |
||||
|
if (length!=1) { |
||||
|
let list= this.banner[index - 1]; |
||||
|
this.$set(this.banner, index - 1, this.banner[index]); |
||||
|
this.$set(this.banner, index, list) |
||||
|
} |
||||
|
}, |
||||
|
changeNum(){ |
||||
|
if (this.banner_num>this.banner.length) { |
||||
|
let index=this.banner_num-this.banner.length |
||||
|
for (let i=0;i<index;i++){ |
||||
|
this.banner.push({name:'',img:''}) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
setBanner(){ |
||||
|
setFeed(this.banner).then(res=>{ |
||||
|
console.info(res) |
||||
|
if (res.code==100) { |
||||
|
this.$message.success('文件上传成功！'); |
||||
|
}else{ |
||||
|
this.$message.error(res.msg) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 获取 easy-mock 的模拟数据 |
||||
|
getData() { |
||||
|
getFeed().then(res => { |
||||
|
console.log(res); |
||||
|
if (res.code==100) { |
||||
|
this.banner =res.data.list |
||||
|
if (this.banner.length!=0) { |
||||
|
this.banner_num=this.banner.length |
||||
|
} |
||||
|
}else{ |
||||
|
this.$message.error(res.msg) |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
handleAvatarSuccess(res, file, index,key){ |
||||
|
console.info(res) |
||||
|
console.info(file) |
||||
|
if(res.code==1){ |
||||
|
let data={name:file.name,img:this.host+res.data.img_url} |
||||
|
this.$set(this.banner, index , data); |
||||
|
// this.banner.push() |
||||
|
} |
||||
|
}, |
||||
|
handleAvatarError(){ |
||||
|
this.$message.error('文件上传失败！'); |
||||
|
}, |
||||
|
fileChange(file){ |
||||
|
const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg']; |
||||
|
const isJPG = typeArr.indexOf(file.raw.type) !== -1; |
||||
|
const isLt3M = file.size / 1024 / 1024 < 3; |
||||
|
if (!isJPG) { |
||||
|
this.$message.error('只能是图片!'); |
||||
|
this.$refs.upload.clearFiles(); |
||||
|
return; |
||||
|
} |
||||
|
if (!isLt3M) { |
||||
|
this.$message.error('上传图片大小不能超过 3MB!'); |
||||
|
this.$refs.upload.clearFiles(); |
||||
|
// this.$set(this.query, 'goods_img', ''); |
||||
|
return; |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.feed_item{ |
||||
|
margin-bottom: 30px; |
||||
|
} |
||||
|
.banner_num{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
.banner_num_span{ |
||||
|
display: inline-block; |
||||
|
width: 80px; |
||||
|
} |
||||
|
.banner_num_span1{ |
||||
|
color:#4E73E4 ; |
||||
|
text-decoration: underline; |
||||
|
display: inline-block; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
.banner_num_input{ |
||||
|
width: 300px !important; |
||||
|
margin-right: 40px; |
||||
|
} |
||||
|
.banner_num .handle-select{ |
||||
|
width: 200px; |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
.banner_num .el-input{ |
||||
|
width: auto; |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
.banner_content{ |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
.banner_title{ |
||||
|
display: flex; |
||||
|
padding-left: 80px; |
||||
|
} |
||||
|
.banner_title_item { |
||||
|
text-align: center; |
||||
|
margin-right: 100px; |
||||
|
} |
||||
|
.photo{ |
||||
|
width: 60px; |
||||
|
height: 55px; |
||||
|
} |
||||
|
.preview{ |
||||
|
width: 60px; |
||||
|
height: 60px; |
||||
|
} |
||||
|
.handle-box { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.handle-select { |
||||
|
width: 120px; |
||||
|
} |
||||
|
|
||||
|
.handle-input { |
||||
|
width: 150px; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
.table { |
||||
|
width: 100%; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.red { |
||||
|
color: #ff0000; |
||||
|
} |
||||
|
.mr10 { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
.table-td-thumb { |
||||
|
display: block; |
||||
|
margin: auto; |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,38 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="crumbs"> |
||||
|
<el-breadcrumb separator="/"> |
||||
|
<el-breadcrumb-item><i class="el-icon-lx-warn"></i> 权限测试</el-breadcrumb-item> |
||||
|
</el-breadcrumb> |
||||
|
</div> |
||||
|
<div class="container"> |
||||
|
<h1>管理员权限页面</h1> |
||||
|
<p>只有用 admin 账号登录的才拥有管理员权限，才能进到这个页面，其他账号想进来都会跳到403页面，重新用管理员账号登录才有权限。</p> |
||||
|
<p>想尝试一下，请<router-link to="/login" class="logout">退出登录</router-link>，随便输入个账号名，再进来试试看。</p> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data: function(){ |
||||
|
return {} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
h1{ |
||||
|
text-align: center; |
||||
|
margin: 30px 0; |
||||
|
} |
||||
|
p{ |
||||
|
line-height: 30px; |
||||
|
margin-bottom: 10px; |
||||
|
text-indent: 2em; |
||||
|
} |
||||
|
.logout{ |
||||
|
color: #409EFF; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,129 @@ |
|||||
|
<template> |
||||
|
<div class=""> |
||||
|
<div class="crumbs"> |
||||
|
<el-breadcrumb separator="/"> |
||||
|
<el-breadcrumb-item><i class="el-icon-lx-copy"></i> tab选项卡</el-breadcrumb-item> |
||||
|
</el-breadcrumb> |
||||
|
</div> |
||||
|
<div class="container"> |
||||
|
<el-tabs v-model="message"> |
||||
|
<el-tab-pane :label="`未读消息(${unread.length})`" name="first"> |
||||
|
<el-table :data="unread" :show-header="false" style="width: 100%"> |
||||
|
<el-table-column> |
||||
|
<template slot-scope="scope"> |
||||
|
<span class="message-title">{{scope.row.title}}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="date" width="180"></el-table-column> |
||||
|
<el-table-column width="120"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button size="small" @click="handleRead(scope.$index)">标为已读</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<div class="handle-row"> |
||||
|
<el-button type="primary">全部标为已读</el-button> |
||||
|
</div> |
||||
|
</el-tab-pane> |
||||
|
<el-tab-pane :label="`已读消息(${read.length})`" name="second"> |
||||
|
<template v-if="message === 'second'"> |
||||
|
<el-table :data="read" :show-header="false" style="width: 100%"> |
||||
|
<el-table-column> |
||||
|
<template slot-scope="scope"> |
||||
|
<span class="message-title">{{scope.row.title}}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="date" width="150"></el-table-column> |
||||
|
<el-table-column width="120"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button type="danger" @click="handleDel(scope.$index)">删除</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<div class="handle-row"> |
||||
|
<el-button type="danger">删除全部</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-tab-pane> |
||||
|
<el-tab-pane :label="`回收站(${recycle.length})`" name="third"> |
||||
|
<template v-if="message === 'third'"> |
||||
|
<el-table :data="recycle" :show-header="false" style="width: 100%"> |
||||
|
<el-table-column> |
||||
|
<template slot-scope="scope"> |
||||
|
<span class="message-title">{{scope.row.title}}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="date" width="150"></el-table-column> |
||||
|
<el-table-column width="120"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button @click="handleRestore(scope.$index)">还原</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<div class="handle-row"> |
||||
|
<el-button type="danger">清空回收站</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-tab-pane> |
||||
|
</el-tabs> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'tabs', |
||||
|
data() { |
||||
|
return { |
||||
|
message: 'first', |
||||
|
showHeader: false, |
||||
|
unread: [{ |
||||
|
date: '2018-04-19 20:00:00', |
||||
|
title: '【系统通知】该系统将于今晚凌晨2点到5点进行升级维护', |
||||
|
},{ |
||||
|
date: '2018-04-19 21:00:00', |
||||
|
title: '今晚12点整发大红包，先到先得', |
||||
|
}], |
||||
|
read: [{ |
||||
|
date: '2018-04-19 20:00:00', |
||||
|
title: '【系统通知】该系统将于今晚凌晨2点到5点进行升级维护' |
||||
|
}], |
||||
|
recycle: [{ |
||||
|
date: '2018-04-19 20:00:00', |
||||
|
title: '【系统通知】该系统将于今晚凌晨2点到5点进行升级维护' |
||||
|
}] |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
handleRead(index) { |
||||
|
const item = this.unread.splice(index, 1); |
||||
|
console.log(item); |
||||
|
this.read = item.concat(this.read); |
||||
|
}, |
||||
|
handleDel(index) { |
||||
|
const item = this.read.splice(index, 1); |
||||
|
this.recycle = item.concat(this.recycle); |
||||
|
}, |
||||
|
handleRestore(index) { |
||||
|
const item = this.recycle.splice(index, 1); |
||||
|
this.read = item.concat(this.read); |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
unreadNum(){ |
||||
|
return this.unread.length; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.message-title{ |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.handle-row{ |
||||
|
margin-top: 30px; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue