460 changed files with 89153 additions and 0 deletions
@ -0,0 +1,14 @@ |
|||
# https://editorconfig.org |
|||
root = true |
|||
|
|||
[*] |
|||
charset = utf-8 |
|||
indent_style = space |
|||
indent_size = 2 |
|||
end_of_line = lf |
|||
insert_final_newline = true |
|||
trim_trailing_whitespace = true |
|||
|
|||
[*.md] |
|||
insert_final_newline = false |
|||
trim_trailing_whitespace = false |
|||
@ -0,0 +1,8 @@ |
|||
# just a flag |
|||
ENV = 'development' |
|||
|
|||
# base api |
|||
#VUE_APP_BASE_API = '/dev-api' |
|||
VUE_APP_BASE_API = '/base' |
|||
VUE_APP_USER_API = '/user' |
|||
VUE_APP_PRINT_API='http://dev.cd-top.com:9097' |
|||
@ -0,0 +1,14 @@ |
|||
# just a flag |
|||
ENV = 'production' |
|||
|
|||
# base api |
|||
#VUE_APP_BASE_API = '/prod-api' |
|||
VUE_APP_BASE_API = '/base' |
|||
VUE_APP_USER_API = '/user' |
|||
VUE_APP_PRINT_API='http://dev.cd-top.com:9097' |
|||
# 杭州 |
|||
#VUE_APP_PRINT_API='http://10.74.150.81:9082' |
|||
# 天津 |
|||
#VUE_APP_PRINT_API='http://10.74.160.70:9082' |
|||
|
|||
|
|||
@ -0,0 +1,8 @@ |
|||
NODE_ENV = production |
|||
|
|||
# just a flag |
|||
ENV = 'staging' |
|||
|
|||
# base api |
|||
VUE_APP_BASE_API = '/stage-api' |
|||
|
|||
@ -0,0 +1,5 @@ |
|||
# build/*.js |
|||
# src/assets |
|||
# public |
|||
# dist |
|||
* |
|||
@ -0,0 +1,198 @@ |
|||
module.exports = { |
|||
root: true, |
|||
parserOptions: { |
|||
parser: 'babel-eslint', |
|||
sourceType: 'module' |
|||
}, |
|||
env: { |
|||
browser: true, |
|||
node: true, |
|||
es6: true, |
|||
}, |
|||
extends: ['plugin:vue/recommended', 'eslint:recommended'], |
|||
|
|||
// add your custom rules here
|
|||
//it is base on https://github.com/vuejs/eslint-config-vue
|
|||
rules: { |
|||
"vue/max-attributes-per-line": [2, { |
|||
"singleline": 10, |
|||
"multiline": { |
|||
"max": 1, |
|||
"allowFirstLine": false |
|||
} |
|||
}], |
|||
"vue/singleline-html-element-content-newline": "off", |
|||
"vue/multiline-html-element-content-newline":"off", |
|||
"vue/name-property-casing": ["error", "PascalCase"], |
|||
"vue/no-v-html": "off", |
|||
'accessor-pairs': 2, |
|||
'arrow-spacing': [2, { |
|||
'before': true, |
|||
'after': true |
|||
}], |
|||
'block-spacing': [2, 'always'], |
|||
'brace-style': [2, '1tbs', { |
|||
'allowSingleLine': true |
|||
}], |
|||
'camelcase': [0, { |
|||
'properties': 'always' |
|||
}], |
|||
'comma-dangle': [2, 'never'], |
|||
'comma-spacing': [2, { |
|||
'before': false, |
|||
'after': true |
|||
}], |
|||
'comma-style': [2, 'last'], |
|||
'constructor-super': 2, |
|||
'curly': [2, 'multi-line'], |
|||
'dot-location': [2, 'property'], |
|||
'eol-last': 2, |
|||
'eqeqeq': ["error", "always", {"null": "ignore"}], |
|||
'generator-star-spacing': [2, { |
|||
'before': true, |
|||
'after': true |
|||
}], |
|||
'handle-callback-err': [2, '^(err|error)$'], |
|||
'indent': [2, 2, { |
|||
'SwitchCase': 1 |
|||
}], |
|||
'jsx-quotes': [2, 'prefer-single'], |
|||
'key-spacing': [2, { |
|||
'beforeColon': false, |
|||
'afterColon': true |
|||
}], |
|||
'keyword-spacing': [2, { |
|||
'before': true, |
|||
'after': true |
|||
}], |
|||
'new-cap': [2, { |
|||
'newIsCap': true, |
|||
'capIsNew': false |
|||
}], |
|||
'new-parens': 2, |
|||
'no-array-constructor': 2, |
|||
'no-caller': 2, |
|||
'no-console': 'off', |
|||
'no-class-assign': 2, |
|||
'no-cond-assign': 2, |
|||
'no-const-assign': 2, |
|||
'no-control-regex': 0, |
|||
'no-delete-var': 2, |
|||
'no-dupe-args': 2, |
|||
'no-dupe-class-members': 2, |
|||
'no-dupe-keys': 2, |
|||
'no-duplicate-case': 2, |
|||
'no-empty-character-class': 2, |
|||
'no-empty-pattern': 2, |
|||
'no-eval': 2, |
|||
'no-ex-assign': 2, |
|||
'no-extend-native': 2, |
|||
'no-extra-bind': 2, |
|||
'no-extra-boolean-cast': 2, |
|||
'no-extra-parens': [2, 'functions'], |
|||
'no-fallthrough': 2, |
|||
'no-floating-decimal': 2, |
|||
'no-func-assign': 2, |
|||
'no-implied-eval': 2, |
|||
'no-inner-declarations': [2, 'functions'], |
|||
'no-invalid-regexp': 2, |
|||
'no-irregular-whitespace': 2, |
|||
'no-iterator': 2, |
|||
'no-label-var': 2, |
|||
'no-labels': [2, { |
|||
'allowLoop': false, |
|||
'allowSwitch': false |
|||
}], |
|||
'no-lone-blocks': 2, |
|||
'no-mixed-spaces-and-tabs': 2, |
|||
'no-multi-spaces': 2, |
|||
'no-multi-str': 2, |
|||
'no-multiple-empty-lines': [2, { |
|||
'max': 1 |
|||
}], |
|||
'no-native-reassign': 2, |
|||
'no-negated-in-lhs': 2, |
|||
'no-new-object': 2, |
|||
'no-new-require': 2, |
|||
'no-new-symbol': 2, |
|||
'no-new-wrappers': 2, |
|||
'no-obj-calls': 2, |
|||
'no-octal': 2, |
|||
'no-octal-escape': 2, |
|||
'no-path-concat': 2, |
|||
'no-proto': 2, |
|||
'no-redeclare': 2, |
|||
'no-regex-spaces': 2, |
|||
'no-return-assign': [2, 'except-parens'], |
|||
'no-self-assign': 2, |
|||
'no-self-compare': 2, |
|||
'no-sequences': 2, |
|||
'no-shadow-restricted-names': 2, |
|||
'no-spaced-func': 2, |
|||
'no-sparse-arrays': 2, |
|||
'no-this-before-super': 2, |
|||
'no-throw-literal': 2, |
|||
'no-trailing-spaces': 2, |
|||
'no-undef': 2, |
|||
'no-undef-init': 2, |
|||
'no-unexpected-multiline': 2, |
|||
'no-unmodified-loop-condition': 2, |
|||
'no-unneeded-ternary': [2, { |
|||
'defaultAssignment': false |
|||
}], |
|||
'no-unreachable': 2, |
|||
'no-unsafe-finally': 2, |
|||
'no-unused-vars': [2, { |
|||
'vars': 'all', |
|||
'args': 'none' |
|||
}], |
|||
'no-useless-call': 2, |
|||
'no-useless-computed-key': 2, |
|||
'no-useless-constructor': 2, |
|||
'no-useless-escape': 0, |
|||
'no-whitespace-before-property': 2, |
|||
'no-with': 2, |
|||
'one-var': [2, { |
|||
'initialized': 'never' |
|||
}], |
|||
'operator-linebreak': [2, 'after', { |
|||
'overrides': { |
|||
'?': 'before', |
|||
':': 'before' |
|||
} |
|||
}], |
|||
'padded-blocks': [2, 'never'], |
|||
'quotes': [2, 'single', { |
|||
'avoidEscape': true, |
|||
'allowTemplateLiterals': true |
|||
}], |
|||
'semi': [2, 'never'], |
|||
'semi-spacing': [2, { |
|||
'before': false, |
|||
'after': true |
|||
}], |
|||
'space-before-blocks': [2, 'always'], |
|||
'space-before-function-paren': [2, 'never'], |
|||
'space-in-parens': [2, 'never'], |
|||
'space-infix-ops': 2, |
|||
'space-unary-ops': [2, { |
|||
'words': true, |
|||
'nonwords': false |
|||
}], |
|||
'spaced-comment': [2, 'always', { |
|||
'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','] |
|||
}], |
|||
'template-curly-spacing': [2, 'never'], |
|||
'use-isnan': 2, |
|||
'valid-typeof': 2, |
|||
'wrap-iife': [2, 'any'], |
|||
'yield-star-spacing': [2, 'both'], |
|||
'yoda': [2, 'never'], |
|||
'prefer-const': 2, |
|||
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, |
|||
'object-curly-spacing': [2, 'always', { |
|||
objectsInObjects: false |
|||
}], |
|||
'array-bracket-spacing': [2, 'never'] |
|||
} |
|||
} |
|||
@ -0,0 +1 @@ |
|||
registry=https://registry.npm.taobao.org/ |
|||
@ -0,0 +1,5 @@ |
|||
language: node_js |
|||
node_js: 10 |
|||
script: npm run test |
|||
notifications: |
|||
email: false |
|||
@ -0,0 +1,21 @@ |
|||
MIT License |
|||
|
|||
Copyright (c) 2017-present PanJiaChen |
|||
|
|||
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,126 @@ |
|||
|
|||
## websocket： |
|||
|
|||
import { sendWebsocket, closeWebsocket } from '@/utils/websocket' |
|||
|
|||
beforeDestroy () { |
|||
// 页面销毁时关闭ws。因为有可能ws连接接收数据尚未完成，用户就跳转了页面 |
|||
// 在需要主动关闭ws的地方都可以调用该方法 |
|||
closeWebsocket() |
|||
}, |
|||
// ws连接成功，后台返回的ws数据，组件要拿数据渲染页面等操作 |
|||
wsMessage (data) { |
|||
const dataJson = data |
|||
console.log(dataJson) |
|||
// 这里写拿到数据后的业务代码 |
|||
}, |
|||
// ws连接失败，组件要执行的代码 |
|||
wsError () { |
|||
// 比如取消页面的loading |
|||
}, |
|||
requstWs () { |
|||
// 防止用户多次连续点击发起请求，所以要先关闭上次的ws请求。 |
|||
closeWebsocket() |
|||
// 跟后端协商，需要什么参数数据给后台 |
|||
const obj = { |
|||
monitorUrl: 'xxxxxxxxxxxxx', |
|||
userName: 'xxxxxxxxxx' |
|||
} |
|||
// 发起ws请求 |
|||
sendWebsocket('ws://test.ws.com', obj, this.wsMessage, this.wsError) |
|||
} |
|||
|
|||
## 组件： |
|||
[主列表：tablePagination] |
|||
currenButtonData 主列表按钮 |
|||
tableData 主列表数据 |
|||
tableLoading 主列表loading |
|||
tableColumns 主列表表头 |
|||
totalCount 主列表数据总条数 |
|||
multipleSelection 主列表选择行数据 |
|||
MaxResultCount 主列表当前页最大条数 |
|||
topbutton 主列表按钮方法 tablePagination ==> TableHeaderMixins.js |
|||
inlineDialog 主列表抽屉展现 tablePagination ==> currenTable |
|||
sortChange 主列表排序 tablePagination ==> currenTable |
|||
alertoldSkipCount 主列表-分页-当前页条数 |
|||
alterResultCount 主列表-分页-每页最大页数 |
|||
handleSelectionChange 主列表-选择-行数据方法 tablePagination ==> currenTable |
|||
<----20230207添加 begin----> |
|||
buttonOperationClick 主列表-操作列按钮点击事件 |
|||
currentPageProps 主列表-当前页码值 |
|||
使用的是@/mixins/TableMixins的oldSkipCount值 |
|||
quicklySearchOption 主表查询-快速搜索数据配置 ==> 通用配置在@/utils/quicklySearchOption/index |
|||
quicklySearchClick 主表查询-快速搜索按钮点击事件（回车事件通用） |
|||
quicklySearchClear 主表查询-快速搜索清除点击事件 |
|||
<----20230207添加 end----> |
|||
<----20230215添加 [全面搜索相关配置] begin----> |
|||
:primarySearchOption 普通查询表单配置项 |
|||
(@utils/primarySearchOption/index.js) |
|||
:primarySearchButton 普通查询表单自定义按钮 |
|||
:showMoreSearch 是否显示高级筛选（默认true） |
|||
:tableColumns 高级筛选数据配置（tableColumns.js） |
|||
@overallSearchFormClick 全面搜索中所有按钮的点击事件汇总,包括普通和高级 |
|||
:httpOverallSearchData 全面筛选组件中当前数据的筛选项 |
|||
(参数目的：使回显与当前接口筛选项同步) |
|||
<----20230215添加 end----> |
|||
<----20230321添加 [字段设置] begin----> |
|||
rowDrop 主表字段设置事件（排序及显隐） |
|||
<----20230321添加 end----> |
|||
|
|||
[普通搜索：searchPrimaryComponent] |
|||
:primarySearchOption 查询表单配置项 |
|||
(@utils/primarySearchOption/index.js) |
|||
具体配置方法见上述文件的示例配置：primarySearchOptionExample |
|||
:primarySearchButton 查询表单自定义按钮（业务线页面内定义） |
|||
@primarySearchButtonClick 普通搜索自定义按钮事件（与primarySearchButton共同设置） |
|||
@primarySearchBaseHandle 普通查询基础按钮点击事件 |
|||
|
|||
|
|||
|
|||
[全面筛选：searchOverall] |
|||
:showSearchOverall 显示全面筛选组件 |
|||
@getShowSearchOverall 全面筛选组件内部显示/隐藏更改触发， |
|||
同步当前业务showSearchOverall与筛选内部是否显示 |
|||
:primarySearchOption 查询表单配置项 |
|||
(@utils/primarySearchOption/index.js) |
|||
:primarySearchButton 其他普通搜索按钮位置配置 |
|||
@overallSearchFormClick 所有按钮操作 |
|||
(包含primarySearchButton设置的按钮) |
|||
:showMoreSearch 是否显示高级筛选（默认true） |
|||
:httpOverallSearchData 全面筛选组件中当前数据的筛选项 |
|||
(参数目的：使回显与当前接口筛选项同步),格式： |
|||
{ |
|||
<!-- 普通数据 --> |
|||
"params": {"code": "12","status": 1}, |
|||
<!-- 高级数据 --> |
|||
"moreList": { |
|||
"filters": [ |
|||
{"logic": "And","column": "abcClass","action": "==","value": "A"}, |
|||
{"logic": "And","column": "Name","action": "Like","value": "A45415"}, |
|||
] |
|||
} |
|||
} |
|||
|
|||
新增编辑：《newAndEdiDialog》 |
|||
loading 抽屉loading |
|||
active 步骤控制 |
|||
pageStatus 结合active控制返回结果 |
|||
|
|||
[字段设置：rowDrop] |
|||
@radio="rowDrop" 数据更新方法 |
|||
:tableColumns="tableColumns" 表头数据 |
|||
:visible="visible" 是否显示 |
|||
@closeRowDrop="closeRowDrop" 关闭方法 |
|||
|
|||
[表单组件补充:currenForm] |
|||
validType type仅等于input时：实时keyUp校验，类型如下： |
|||
1、 number:正整数, |
|||
2、 pointNumber:数字+带小数点(只能输入一个小数点, 小数点后方保留位数见<pointNumberFixed>), |
|||
3、 numberLetter: 数字+字母, |
|||
4、 letter:纯字母, |
|||
5、 letterCn:字母+中文 |
|||
6、 numberLetterBar:字母+中文+横杠(-) |
|||
pointNumberFixed 组合上方validType值仅等于pointNumber时： |
|||
小数点后方保留位数,如不填写默认为100位 |
|||
<validType>+<pointNumberFixed>示例： |
|||
{ type:"input", label:"金额", prop:"money", validType:'pointNumber',pointNumberFixed:2}, |
|||
@ -0,0 +1,14 @@ |
|||
module.exports = { |
|||
presets: [ |
|||
// https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
|
|||
'@vue/cli-plugin-babel/preset' |
|||
], |
|||
'env': { |
|||
'development': { |
|||
// babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
|
|||
// This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
|
|||
// https://panjiachen.github.io/vue-element-admin-site/guide/advanced/lazy-loading.html
|
|||
'plugins': ['dynamic-import-node'] |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,35 @@ |
|||
const { run } = require('runjs') |
|||
const chalk = require('chalk') |
|||
const config = require('../vue.config.js') |
|||
const rawArgv = process.argv.slice(2) |
|||
const args = rawArgv.join(' ') |
|||
|
|||
if (process.env.npm_config_preview || rawArgv.includes('--preview')) { |
|||
const report = rawArgv.includes('--report') |
|||
|
|||
run(`vue-cli-service build ${args}`) |
|||
|
|||
const port = 9526 |
|||
const publicPath = config.publicPath |
|||
|
|||
var connect = require('connect') |
|||
var serveStatic = require('serve-static') |
|||
const app = connect() |
|||
|
|||
app.use( |
|||
publicPath, |
|||
serveStatic('./dist', { |
|||
index: ['index.html', '/'] |
|||
}) |
|||
) |
|||
|
|||
app.listen(port, function () { |
|||
console.log(chalk.green(`> Preview at http://localhost:${port}${publicPath}`)) |
|||
if (report) { |
|||
console.log(chalk.green(`> Report at http://localhost:${port}${publicPath}report.html`)) |
|||
} |
|||
|
|||
}) |
|||
} else { |
|||
run(`vue-cli-service build ${args}`) |
|||
} |
|||
@ -0,0 +1,24 @@ |
|||
module.exports = { |
|||
moduleFileExtensions: ['js', 'jsx', 'json', 'vue'], |
|||
transform: { |
|||
'^.+\\.vue$': 'vue-jest', |
|||
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': |
|||
'jest-transform-stub', |
|||
'^.+\\.jsx?$': 'babel-jest' |
|||
}, |
|||
moduleNameMapper: { |
|||
'^@/(.*)$': '<rootDir>/src/$1' |
|||
}, |
|||
snapshotSerializers: ['jest-serializer-vue'], |
|||
testMatch: [ |
|||
'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)' |
|||
], |
|||
collectCoverageFrom: ['src/utils/**/*.{js,vue}', '!src/utils/auth.js', '!src/utils/request.js', 'src/components/**/*.{js,vue}'], |
|||
coverageDirectory: '<rootDir>/tests/unit/coverage', |
|||
// 'collectCoverage': true,
|
|||
'coverageReporters': [ |
|||
'lcov', |
|||
'text-summary' |
|||
], |
|||
testURL: 'http://localhost/' |
|||
} |
|||
@ -0,0 +1,9 @@ |
|||
{ |
|||
"compilerOptions": { |
|||
"baseUrl": "./", |
|||
"paths": { |
|||
"@/*": ["src/*"] |
|||
} |
|||
}, |
|||
"exclude": ["node_modules", "dist"] |
|||
} |
|||
@ -0,0 +1,116 @@ |
|||
const Mock = require('mockjs') |
|||
|
|||
const List = [] |
|||
const count = 100 |
|||
|
|||
const baseContent = '<p>I am testing data, I am testing data.</p><p><img src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>' |
|||
const image_uri = 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3' |
|||
|
|||
for (let i = 0; i < count; i++) { |
|||
List.push(Mock.mock({ |
|||
id: '@increment', |
|||
timestamp: +Mock.Random.date('T'), |
|||
author: '@first', |
|||
reviewer: '@first', |
|||
title: '@title(5, 10)', |
|||
content_short: 'mock data', |
|||
content: baseContent, |
|||
forecast: '@float(0, 100, 2, 2)', |
|||
importance: '@integer(1, 3)', |
|||
'type|1': ['CN', 'US', 'JP', 'EU'], |
|||
'status|1': ['published', 'draft'], |
|||
display_time: '@datetime', |
|||
comment_disabled: true, |
|||
pageviews: '@integer(300, 5000)', |
|||
image_uri, |
|||
platforms: ['a-platform'] |
|||
})) |
|||
} |
|||
|
|||
module.exports = [ |
|||
{ |
|||
url: '/vue-element-admin/article/list', |
|||
type: 'get', |
|||
response: config => { |
|||
const { importance, type, title, page = 1, limit = 20, sort } = config.query |
|||
|
|||
let mockList = List.filter(item => { |
|||
if (importance && item.importance !== +importance) return false |
|||
if (type && item.type !== type) return false |
|||
if (title && item.title.indexOf(title) < 0) return false |
|||
return true |
|||
}) |
|||
|
|||
if (sort === '-id') { |
|||
mockList = mockList.reverse() |
|||
} |
|||
|
|||
const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1)) |
|||
|
|||
return { |
|||
code: 20000, |
|||
data: { |
|||
total: mockList.length, |
|||
items: pageList |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
|
|||
{ |
|||
url: '/vue-element-admin/article/detail', |
|||
type: 'get', |
|||
response: config => { |
|||
const { id } = config.query |
|||
for (const article of List) { |
|||
if (article.id === +id) { |
|||
return { |
|||
code: 20000, |
|||
data: article |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
|
|||
{ |
|||
url: '/vue-element-admin/article/pv', |
|||
type: 'get', |
|||
response: _ => { |
|||
return { |
|||
code: 20000, |
|||
data: { |
|||
pvData: [ |
|||
{ key: 'PC', pv: 1024 }, |
|||
{ key: 'mobile', pv: 1024 }, |
|||
{ key: 'ios', pv: 1024 }, |
|||
{ key: 'android', pv: 1024 } |
|||
] |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
|
|||
{ |
|||
url: '/vue-element-admin/article/create', |
|||
type: 'post', |
|||
response: _ => { |
|||
return { |
|||
code: 20000, |
|||
data: 'success' |
|||
} |
|||
} |
|||
}, |
|||
|
|||
{ |
|||
url: '/vue-element-admin/article/update', |
|||
type: 'post', |
|||
response: _ => { |
|||
return { |
|||
code: 20000, |
|||
data: 'success' |
|||
} |
|||
} |
|||
} |
|||
] |
|||
|
|||
@ -0,0 +1,60 @@ |
|||
const Mock = require('mockjs') |
|||
const { param2Obj } = require('./utils') |
|||
|
|||
const user = require('./user') |
|||
const role = require('./role') |
|||
const article = require('./article') |
|||
const search = require('./remote-search') |
|||
|
|||
const mocks = [ |
|||
...user, |
|||
...role, |
|||
...article, |
|||
...search |
|||
] |
|||
|
|||
// for front mock
|
|||
// please use it cautiously, it will redefine XMLHttpRequest,
|
|||
// which will cause many of your third-party libraries to be invalidated(like progress event).
|
|||
function mockXHR() { |
|||
// mock patch
|
|||
// https://github.com/nuysoft/Mock/issues/300
|
|||
Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send |
|||
Mock.XHR.prototype.send = function() { |
|||
if (this.custom.xhr) { |
|||
this.custom.xhr.withCredentials = this.withCredentials || false |
|||
|
|||
if (this.responseType) { |
|||
this.custom.xhr.responseType = this.responseType |
|||
} |
|||
} |
|||
this.proxy_send(...arguments) |
|||
} |
|||
|
|||
function XHR2ExpressReqWrap(respond) { |
|||
return function(options) { |
|||
let result = null |
|||
if (respond instanceof Function) { |
|||
const { body, type, url } = options |
|||
// https://expressjs.com/en/4x/api.html#req
|
|||
result = respond({ |
|||
method: type, |
|||
body: JSON.parse(body), |
|||
query: param2Obj(url) |
|||
}) |
|||
} else { |
|||
result = respond |
|||
} |
|||
return Mock.mock(result) |
|||
} |
|||
} |
|||
|
|||
for (const i of mocks) { |
|||
Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response)) |
|||
} |
|||
} |
|||
|
|||
module.exports = { |
|||
mocks, |
|||
mockXHR |
|||
} |
|||
@ -0,0 +1,84 @@ |
|||
const chokidar = require('chokidar') |
|||
const bodyParser = require('body-parser') |
|||
const chalk = require('chalk') |
|||
const path = require('path') |
|||
const Mock = require('mockjs') |
|||
|
|||
const mockDir = path.join(process.cwd(), 'mock') |
|||
|
|||
function registerRoutes(app) { |
|||
let mockLastIndex |
|||
const { mocks } = require('./index.js') |
|||
const mocksForServer = mocks.map(route => { |
|||
return responseFake(route.url, route.type, route.response) |
|||
}) |
|||
for (const mock of mocksForServer) { |
|||
// app[mock.type](mock.url, mock.response)
|
|||
app[mock.type](mock.url, bodyParser.json(),bodyParser.urlencoded({ //添加
|
|||
extended:true |
|||
}),mock.response) |
|||
mockLastIndex = app._router.stack.length |
|||
} |
|||
const mockRoutesLength = Object.keys(mocksForServer).length |
|||
return { |
|||
mockRoutesLength: mockRoutesLength, |
|||
mockStartIndex: mockLastIndex - mockRoutesLength |
|||
} |
|||
} |
|||
|
|||
function unregisterRoutes() { |
|||
Object.keys(require.cache).forEach(i => { |
|||
if (i.includes(mockDir)) { |
|||
delete require.cache[require.resolve(i)] |
|||
} |
|||
}) |
|||
} |
|||
|
|||
// for mock server
|
|||
const responseFake = (url, type, respond) => { |
|||
return { |
|||
url: new RegExp(`${process.env.VUE_APP_BASE_API}${url}`), |
|||
type: type || 'get', |
|||
response(req, res) { |
|||
console.log('request invoke:' + req.path) |
|||
res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond)) |
|||
} |
|||
} |
|||
} |
|||
|
|||
module.exports = app => { |
|||
// parse app.body
|
|||
// https://expressjs.com/en/4x/api.html#req.body
|
|||
// app.use(bodyParser.json())
|
|||
// app.use(bodyParser.urlencoded({
|
|||
// extended: true
|
|||
// }))
|
|||
|
|||
const mockRoutes = registerRoutes(app) |
|||
var mockRoutesLength = mockRoutes.mockRoutesLength |
|||
var mockStartIndex = mockRoutes.mockStartIndex |
|||
|
|||
// watch files, hot reload mock server
|
|||
chokidar.watch(mockDir, { |
|||
ignored: /mock-server/, |
|||
ignoreInitial: true |
|||
}).on('all', (event, path) => { |
|||
if (event === 'change' || event === 'add') { |
|||
try { |
|||
// remove mock routes stack
|
|||
app._router.stack.splice(mockStartIndex, mockRoutesLength) |
|||
|
|||
// clear routes cache
|
|||
unregisterRoutes() |
|||
|
|||
const mockRoutes = registerRoutes(app) |
|||
mockRoutesLength = mockRoutes.mockRoutesLength |
|||
mockStartIndex = mockRoutes.mockStartIndex |
|||
|
|||
console.log(chalk.magentaBright(`\n > Mock Server hot reload success! changed ${path}`)) |
|||
} catch (error) { |
|||
console.log(chalk.redBright(error)) |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
@ -0,0 +1,51 @@ |
|||
const Mock = require('mockjs') |
|||
|
|||
const NameList = [] |
|||
const count = 100 |
|||
|
|||
for (let i = 0; i < count; i++) { |
|||
NameList.push(Mock.mock({ |
|||
name: '@first' |
|||
})) |
|||
} |
|||
NameList.push({ name: 'mock-Pan' }) |
|||
|
|||
module.exports = [ |
|||
// username search
|
|||
{ |
|||
url: '/vue-element-admin/search/user', |
|||
type: 'get', |
|||
response: config => { |
|||
const { name } = config.query |
|||
const mockNameList = NameList.filter(item => { |
|||
const lowerCaseName = item.name.toLowerCase() |
|||
return !(name && lowerCaseName.indexOf(name.toLowerCase()) < 0) |
|||
}) |
|||
return { |
|||
code: 20000, |
|||
data: { items: mockNameList } |
|||
} |
|||
} |
|||
}, |
|||
|
|||
// transaction list
|
|||
{ |
|||
url: '/vue-element-admin/transaction/list', |
|||
type: 'get', |
|||
response: _ => { |
|||
return { |
|||
code: 20000, |
|||
data: { |
|||
total: 20, |
|||
'items|20': [{ |
|||
order_no: '@guid()', |
|||
timestamp: +Mock.Random.date('T'), |
|||
username: '@name()', |
|||
price: '@float(1000, 15000, 0, 2)', |
|||
'status|1': ['success', 'pending'] |
|||
}] |
|||
} |
|||
} |
|||
} |
|||
} |
|||
] |
|||
@ -0,0 +1,98 @@ |
|||
const Mock = require('mockjs') |
|||
const { deepClone } = require('../utils') |
|||
const { asyncRoutes, constantRoutes } = require('./routes.js') |
|||
|
|||
const routes = deepClone([...constantRoutes, ...asyncRoutes]) |
|||
|
|||
const roles = [ |
|||
{ |
|||
key: 'admin', |
|||
name: 'admin', |
|||
description: 'Super Administrator. Have access to view all pages.', |
|||
routes: routes |
|||
}, |
|||
{ |
|||
key: 'editor', |
|||
name: 'editor', |
|||
description: 'Normal Editor. Can see all pages except permission page', |
|||
routes: routes.filter(i => i.path !== '/permission')// just a mock
|
|||
}, |
|||
{ |
|||
key: 'visitor', |
|||
name: 'visitor', |
|||
description: 'Just a visitor. Can only see the home page and the document page', |
|||
routes: [{ |
|||
path: '', |
|||
redirect: 'dashboard', |
|||
children: [ |
|||
{ |
|||
path: 'dashboard', |
|||
name: 'Dashboard', |
|||
meta: { title: 'dashboard', icon: 'dashboard' } |
|||
} |
|||
] |
|||
}] |
|||
} |
|||
] |
|||
|
|||
module.exports = [ |
|||
// mock get all routes form server
|
|||
{ |
|||
url: '/vue-element-admin/routes', |
|||
type: 'get', |
|||
response: _ => { |
|||
return { |
|||
code: 20000, |
|||
data: routes |
|||
} |
|||
} |
|||
}, |
|||
|
|||
// mock get all roles form server
|
|||
{ |
|||
url: '/vue-element-admin/roles', |
|||
type: 'get', |
|||
response: _ => { |
|||
return { |
|||
code: 20000, |
|||
data: roles |
|||
} |
|||
} |
|||
}, |
|||
|
|||
// add role
|
|||
{ |
|||
url: '/vue-element-admin/role', |
|||
type: 'post', |
|||
response: { |
|||
code: 20000, |
|||
data: { |
|||
key: Mock.mock('@integer(300, 5000)') |
|||
} |
|||
} |
|||
}, |
|||
|
|||
// update role
|
|||
{ |
|||
url: '/vue-element-admin/role/[A-Za-z0-9]', |
|||
type: 'put', |
|||
response: { |
|||
code: 20000, |
|||
data: { |
|||
status: 'success' |
|||
} |
|||
} |
|||
}, |
|||
|
|||
// delete role
|
|||
{ |
|||
url: '/vue-element-admin/role/[A-Za-z0-9]', |
|||
type: 'delete', |
|||
response: { |
|||
code: 20000, |
|||
data: { |
|||
status: 'success' |
|||
} |
|||
} |
|||
} |
|||
] |
|||
@ -0,0 +1,530 @@ |
|||
// Just a mock data
|
|||
|
|||
const constantRoutes = [ |
|||
{ |
|||
path: '/redirect', |
|||
component: 'layout/Layout', |
|||
hidden: true, |
|||
children: [ |
|||
{ |
|||
path: '/redirect/:path*', |
|||
component: 'views/redirect/index' |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
path: '/login', |
|||
component: 'views/login/index', |
|||
hidden: true |
|||
}, |
|||
{ |
|||
path: '/auth-redirect', |
|||
component: 'views/login/auth-redirect', |
|||
hidden: true |
|||
}, |
|||
{ |
|||
path: '/404', |
|||
component: 'views/error-page/404', |
|||
hidden: true |
|||
}, |
|||
{ |
|||
path: '/401', |
|||
component: 'views/error-page/401', |
|||
hidden: true |
|||
}, |
|||
{ |
|||
path: '', |
|||
component: 'layout/Layout', |
|||
redirect: 'dashboard', |
|||
children: [ |
|||
{ |
|||
path: 'dashboard', |
|||
component: 'views/dashboard/index', |
|||
name: 'Dashboard', |
|||
meta: { title: 'Dashboard', icon: 'dashboard', affix: true } |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
path: '/documentation', |
|||
component: 'layout/Layout', |
|||
children: [ |
|||
{ |
|||
path: 'index', |
|||
component: 'views/documentation/index', |
|||
name: 'Documentation', |
|||
meta: { title: 'Documentation', icon: 'documentation', affix: true } |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
path: '/guide', |
|||
component: 'layout/Layout', |
|||
redirect: '/guide/index', |
|||
children: [ |
|||
{ |
|||
path: 'index', |
|||
component: 'views/guide/index', |
|||
name: 'Guide', |
|||
meta: { title: 'Guide', icon: 'guide', noCache: true } |
|||
} |
|||
] |
|||
} |
|||
] |
|||
|
|||
const asyncRoutes = [ |
|||
{ |
|||
path: '/permission', |
|||
component: 'layout/Layout', |
|||
redirect: '/permission/index', |
|||
alwaysShow: true, |
|||
meta: { |
|||
title: 'Permission', |
|||
icon: 'lock', |
|||
roles: ['admin', 'editor'] |
|||
}, |
|||
children: [ |
|||
{ |
|||
path: 'page', |
|||
component: 'views/permission/page', |
|||
name: 'PagePermission', |
|||
meta: { |
|||
title: 'Page Permission', |
|||
roles: ['admin'] |
|||
} |
|||
}, |
|||
{ |
|||
path: 'directive', |
|||
component: 'views/permission/directive', |
|||
name: 'DirectivePermission', |
|||
meta: { |
|||
title: 'Directive Permission' |
|||
} |
|||
}, |
|||
{ |
|||
path: 'role', |
|||
component: 'views/permission/role', |
|||
name: 'RolePermission', |
|||
meta: { |
|||
title: 'Role Permission', |
|||
roles: ['admin'] |
|||
} |
|||
} |
|||
] |
|||
}, |
|||
|
|||
{ |
|||
path: '/icon', |
|||
component: 'layout/Layout', |
|||
children: [ |
|||
{ |
|||
path: 'index', |
|||
component: 'views/icons/index', |
|||
name: 'Icons', |
|||
meta: { title: 'Icons', icon: 'icon', noCache: true } |
|||
} |
|||
] |
|||
}, |
|||
|
|||
{ |
|||
path: '/components', |
|||
component: 'layout/Layout', |
|||
redirect: 'noRedirect', |
|||
name: 'ComponentDemo', |
|||
meta: { |
|||
title: 'Components', |
|||
icon: 'component' |
|||
}, |
|||
children: [ |
|||
{ |
|||
path: 'tinymce', |
|||
component: 'views/components-demo/tinymce', |
|||
name: 'TinymceDemo', |
|||
meta: { title: 'Tinymce' } |
|||
}, |
|||
{ |
|||
path: 'markdown', |
|||
component: 'views/components-demo/markdown', |
|||
name: 'MarkdownDemo', |
|||
meta: { title: 'Markdown' } |
|||
}, |
|||
{ |
|||
path: 'json-editor', |
|||
component: 'views/components-demo/json-editor', |
|||
name: 'JsonEditorDemo', |
|||
meta: { title: 'Json Editor' } |
|||
}, |
|||
{ |
|||
path: 'split-pane', |
|||
component: 'views/components-demo/split-pane', |
|||
name: 'SplitpaneDemo', |
|||
meta: { title: 'SplitPane' } |
|||
}, |
|||
{ |
|||
path: 'avatar-upload', |
|||
component: 'views/components-demo/avatar-upload', |
|||
name: 'AvatarUploadDemo', |
|||
meta: { title: 'Avatar Upload' } |
|||
}, |
|||
{ |
|||
path: 'dropzone', |
|||
component: 'views/components-demo/dropzone', |
|||
name: 'DropzoneDemo', |
|||
meta: { title: 'Dropzone' } |
|||
}, |
|||
{ |
|||
path: 'sticky', |
|||
component: 'views/components-demo/sticky', |
|||
name: 'StickyDemo', |
|||
meta: { title: 'Sticky' } |
|||
}, |
|||
{ |
|||
path: 'count-to', |
|||
component: 'views/components-demo/count-to', |
|||
name: 'CountToDemo', |
|||
meta: { title: 'Count To' } |
|||
}, |
|||
{ |
|||
path: 'mixin', |
|||
component: 'views/components-demo/mixin', |
|||
name: 'ComponentMixinDemo', |
|||
meta: { title: 'componentMixin' } |
|||
}, |
|||
{ |
|||
path: 'back-to-top', |
|||
component: 'views/components-demo/back-to-top', |
|||
name: 'BackToTopDemo', |
|||
meta: { title: 'Back To Top' } |
|||
}, |
|||
{ |
|||
path: 'drag-dialog', |
|||
component: 'views/components-demo/drag-dialog', |
|||
name: 'DragDialogDemo', |
|||
meta: { title: 'Drag Dialog' } |
|||
}, |
|||
{ |
|||
path: 'drag-select', |
|||
component: 'views/components-demo/drag-select', |
|||
name: 'DragSelectDemo', |
|||
meta: { title: 'Drag Select' } |
|||
}, |
|||
{ |
|||
path: 'dnd-list', |
|||
component: 'views/components-demo/dnd-list', |
|||
name: 'DndListDemo', |
|||
meta: { title: 'Dnd List' } |
|||
}, |
|||
{ |
|||
path: 'drag-kanban', |
|||
component: 'views/components-demo/drag-kanban', |
|||
name: 'DragKanbanDemo', |
|||
meta: { title: 'Drag Kanban' } |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
path: '/charts', |
|||
component: 'layout/Layout', |
|||
redirect: 'noRedirect', |
|||
name: 'Charts', |
|||
meta: { |
|||
title: 'Charts', |
|||
icon: 'chart' |
|||
}, |
|||
children: [ |
|||
{ |
|||
path: 'keyboard', |
|||
component: 'views/charts/keyboard', |
|||
name: 'KeyboardChart', |
|||
meta: { title: 'Keyboard Chart', noCache: true } |
|||
}, |
|||
{ |
|||
path: 'line', |
|||
component: 'views/charts/line', |
|||
name: 'LineChart', |
|||
meta: { title: 'Line Chart', noCache: true } |
|||
}, |
|||
{ |
|||
path: 'mixchart', |
|||
component: 'views/charts/mixChart', |
|||
name: 'MixChart', |
|||
meta: { title: 'Mix Chart', noCache: true } |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
path: '/nested', |
|||
component: 'layout/Layout', |
|||
redirect: '/nested/menu1/menu1-1', |
|||
name: 'Nested', |
|||
meta: { |
|||
title: 'Nested', |
|||
icon: 'nested' |
|||
}, |
|||
children: [ |
|||
{ |
|||
path: 'menu1', |
|||
component: 'views/nested/menu1/index', |
|||
name: 'Menu1', |
|||
meta: { title: 'Menu1' }, |
|||
redirect: '/nested/menu1/menu1-1', |
|||
children: [ |
|||
{ |
|||
path: 'menu1-1', |
|||
component: 'views/nested/menu1/menu1-1', |
|||
name: 'Menu1-1', |
|||
meta: { title: 'Menu1-1' } |
|||
}, |
|||
{ |
|||
path: 'menu1-2', |
|||
component: 'views/nested/menu1/menu1-2', |
|||
name: 'Menu1-2', |
|||
redirect: '/nested/menu1/menu1-2/menu1-2-1', |
|||
meta: { title: 'Menu1-2' }, |
|||
children: [ |
|||
{ |
|||
path: 'menu1-2-1', |
|||
component: 'views/nested/menu1/menu1-2/menu1-2-1', |
|||
name: 'Menu1-2-1', |
|||
meta: { title: 'Menu1-2-1' } |
|||
}, |
|||
{ |
|||
path: 'menu1-2-2', |
|||
component: 'views/nested/menu1/menu1-2/menu1-2-2', |
|||
name: 'Menu1-2-2', |
|||
meta: { title: 'Menu1-2-2' } |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
path: 'menu1-3', |
|||
component: 'views/nested/menu1/menu1-3', |
|||
name: 'Menu1-3', |
|||
meta: { title: 'Menu1-3' } |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
path: 'menu2', |
|||
name: 'Menu2', |
|||
component: 'views/nested/menu2/index', |
|||
meta: { title: 'Menu2' } |
|||
} |
|||
] |
|||
}, |
|||
|
|||
{ |
|||
path: '/example', |
|||
component: 'layout/Layout', |
|||
redirect: '/example/list', |
|||
name: 'Example', |
|||
meta: { |
|||
title: 'Example', |
|||
icon: 'example' |
|||
}, |
|||
children: [ |
|||
{ |
|||
path: 'create', |
|||
component: 'views/example/create', |
|||
name: 'CreateArticle', |
|||
meta: { title: 'Create Article', icon: 'edit' } |
|||
}, |
|||
{ |
|||
path: 'edit/:id(\\d+)', |
|||
component: 'views/example/edit', |
|||
name: 'EditArticle', |
|||
meta: { title: 'Edit Article', noCache: true }, |
|||
hidden: true |
|||
}, |
|||
{ |
|||
path: 'list', |
|||
component: 'views/example/list', |
|||
name: 'ArticleList', |
|||
meta: { title: 'Article List', icon: 'list' } |
|||
} |
|||
] |
|||
}, |
|||
|
|||
{ |
|||
path: '/tab', |
|||
component: 'layout/Layout', |
|||
children: [ |
|||
{ |
|||
path: 'index', |
|||
component: 'views/tab/index', |
|||
name: 'Tab', |
|||
meta: { title: 'Tab', icon: 'tab' } |
|||
} |
|||
] |
|||
}, |
|||
|
|||
{ |
|||
path: '/error', |
|||
component: 'layout/Layout', |
|||
redirect: 'noRedirect', |
|||
name: 'ErrorPages', |
|||
meta: { |
|||
title: 'Error Pages', |
|||
icon: '404' |
|||
}, |
|||
children: [ |
|||
{ |
|||
path: '401', |
|||
component: 'views/error-page/401', |
|||
name: 'Page401', |
|||
meta: { title: 'Page 401', noCache: true } |
|||
}, |
|||
{ |
|||
path: '404', |
|||
component: 'views/error-page/404', |
|||
name: 'Page404', |
|||
meta: { title: 'Page 404', noCache: true } |
|||
} |
|||
] |
|||
}, |
|||
|
|||
{ |
|||
path: '/error-log', |
|||
component: 'layout/Layout', |
|||
redirect: 'noRedirect', |
|||
children: [ |
|||
{ |
|||
path: 'log', |
|||
component: 'views/error-log/index', |
|||
name: 'ErrorLog', |
|||
meta: { title: 'Error Log', icon: 'bug' } |
|||
} |
|||
] |
|||
}, |
|||
|
|||
{ |
|||
path: '/excel', |
|||
component: 'layout/Layout', |
|||
redirect: '/excel/export-excel', |
|||
name: 'Excel', |
|||
meta: { |
|||
title: 'Excel', |
|||
icon: 'excel' |
|||
}, |
|||
children: [ |
|||
{ |
|||
path: 'export-excel', |
|||
component: 'views/excel/export-excel', |
|||
name: 'ExportExcel', |
|||
meta: { title: 'Export Excel' } |
|||
}, |
|||
{ |
|||
path: 'export-selected-excel', |
|||
component: 'views/excel/select-excel', |
|||
name: 'SelectExcel', |
|||
meta: { title: 'Select Excel' } |
|||
}, |
|||
{ |
|||
path: 'export-merge-header', |
|||
component: 'views/excel/merge-header', |
|||
name: 'MergeHeader', |
|||
meta: { title: 'Merge Header' } |
|||
}, |
|||
{ |
|||
path: 'upload-excel', |
|||
component: 'views/excel/upload-excel', |
|||
name: 'UploadExcel', |
|||
meta: { title: 'Upload Excel' } |
|||
} |
|||
] |
|||
}, |
|||
|
|||
{ |
|||
path: '/zip', |
|||
component: 'layout/Layout', |
|||
redirect: '/zip/download', |
|||
alwaysShow: true, |
|||
meta: { title: 'Zip', icon: 'zip' }, |
|||
children: [ |
|||
{ |
|||
path: 'download', |
|||
component: 'views/zip/index', |
|||
name: 'ExportZip', |
|||
meta: { title: 'Export Zip' } |
|||
} |
|||
] |
|||
}, |
|||
|
|||
{ |
|||
path: '/pdf', |
|||
component: 'layout/Layout', |
|||
redirect: '/pdf/index', |
|||
children: [ |
|||
{ |
|||
path: 'index', |
|||
component: 'views/pdf/index', |
|||
name: 'PDF', |
|||
meta: { title: 'PDF', icon: 'pdf' } |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
path: '/pdf/download', |
|||
component: 'views/pdf/download', |
|||
hidden: true |
|||
}, |
|||
|
|||
{ |
|||
path: '/theme', |
|||
component: 'layout/Layout', |
|||
redirect: 'noRedirect', |
|||
children: [ |
|||
{ |
|||
path: 'index', |
|||
component: 'views/theme/index', |
|||
name: 'Theme', |
|||
meta: { title: 'Theme', icon: 'theme' } |
|||
} |
|||
] |
|||
}, |
|||
|
|||
{ |
|||
path: '/clipboard', |
|||
component: 'layout/Layout', |
|||
redirect: 'noRedirect', |
|||
children: [ |
|||
{ |
|||
path: 'index', |
|||
component: 'views/clipboard/index', |
|||
name: 'ClipboardDemo', |
|||
meta: { title: 'Clipboard Demo', icon: 'clipboard' } |
|||
} |
|||
] |
|||
}, |
|||
|
|||
{ |
|||
path: '/i18n', |
|||
component: 'layout/Layout', |
|||
children: [ |
|||
{ |
|||
path: 'index', |
|||
component: 'views/i18n-demo/index', |
|||
name: 'I18n', |
|||
meta: { title: 'I18n', icon: 'international' } |
|||
} |
|||
] |
|||
}, |
|||
|
|||
{ |
|||
path: 'external-link', |
|||
component: 'layout/Layout', |
|||
children: [ |
|||
{ |
|||
path: 'https://github.com/PanJiaChen/vue-element-admin', |
|||
meta: { title: 'External Link', icon: 'link' } |
|||
} |
|||
] |
|||
}, |
|||
|
|||
{ path: '*', redirect: '/404', hidden: true } |
|||
] |
|||
|
|||
module.exports = { |
|||
constantRoutes, |
|||
asyncRoutes |
|||
} |
|||
@ -0,0 +1,84 @@ |
|||
|
|||
const tokens = { |
|||
admin: { |
|||
token: 'admin-token' |
|||
}, |
|||
editor: { |
|||
token: 'editor-token' |
|||
} |
|||
} |
|||
|
|||
const users = { |
|||
'admin-token': { |
|||
roles: ['admin'], |
|||
introduction: 'I am a super administrator', |
|||
avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', |
|||
name: 'Super Admin' |
|||
}, |
|||
'editor-token': { |
|||
roles: ['editor'], |
|||
introduction: 'I am an editor', |
|||
avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', |
|||
name: 'Normal Editor' |
|||
} |
|||
} |
|||
|
|||
module.exports = [ |
|||
// user login
|
|||
{ |
|||
url: '/vue-element-admin/user/login', |
|||
type: 'post', |
|||
response: config => { |
|||
const { username } = config.body |
|||
const token = tokens[username] |
|||
|
|||
// mock error
|
|||
if (!token) { |
|||
return { |
|||
code: 60204, |
|||
message: 'Account and password are incorrect.' |
|||
} |
|||
} |
|||
|
|||
return { |
|||
code: 20000, |
|||
data: token |
|||
} |
|||
} |
|||
}, |
|||
|
|||
// get user info
|
|||
{ |
|||
url: '/vue-element-admin/user/info\.*', |
|||
type: 'get', |
|||
response: config => { |
|||
const { token } = config.query |
|||
const info = users[token] |
|||
|
|||
// mock error
|
|||
if (!info) { |
|||
return { |
|||
code: 50008, |
|||
message: 'Login failed, unable to get user details.' |
|||
} |
|||
} |
|||
|
|||
return { |
|||
code: 20000, |
|||
data: info |
|||
} |
|||
} |
|||
}, |
|||
|
|||
// user logout
|
|||
{ |
|||
url: '/vue-element-admin/user/logout', |
|||
type: 'post', |
|||
response: _ => { |
|||
return { |
|||
code: 20000, |
|||
data: 'success' |
|||
} |
|||
} |
|||
} |
|||
] |
|||
@ -0,0 +1,48 @@ |
|||
/** |
|||
* @param {string} url |
|||
* @returns {Object} |
|||
*/ |
|||
function param2Obj(url) { |
|||
const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ') |
|||
if (!search) { |
|||
return {} |
|||
} |
|||
const obj = {} |
|||
const searchArr = search.split('&') |
|||
searchArr.forEach(v => { |
|||
const index = v.indexOf('=') |
|||
if (index !== -1) { |
|||
const name = v.substring(0, index) |
|||
const val = v.substring(index + 1, v.length) |
|||
obj[name] = val |
|||
} |
|||
}) |
|||
return obj |
|||
} |
|||
|
|||
/** |
|||
* This is just a simple version of deep copy |
|||
* Has a lot of edge cases bug |
|||
* If you want to use a perfect deep copy, use lodash's _.cloneDeep |
|||
* @param {Object} source |
|||
* @returns {Object} |
|||
*/ |
|||
function deepClone(source) { |
|||
if (!source && typeof source !== 'object') { |
|||
throw new Error('error arguments', 'deepClone') |
|||
} |
|||
const targetObj = source.constructor === Array ? [] : {} |
|||
Object.keys(source).forEach(keys => { |
|||
if (source[keys] && typeof source[keys] === 'object') { |
|||
targetObj[keys] = deepClone(source[keys]) |
|||
} else { |
|||
targetObj[keys] = source[keys] |
|||
} |
|||
}) |
|||
return targetObj |
|||
} |
|||
|
|||
module.exports = { |
|||
param2Obj, |
|||
deepClone |
|||
} |
|||
File diff suppressed because it is too large
@ -0,0 +1,122 @@ |
|||
{ |
|||
"name": "vue-element-admin", |
|||
"version": "4.4.1", |
|||
"description": "A magical vue admin. An out-of-box UI solution for enterprise applications. Newest development stack of vue. Lots of awesome features", |
|||
"author": "Pan <panfree23@gmail.com>", |
|||
"scripts": { |
|||
"dev": "vue-cli-service serve", |
|||
"lint": "eslint --ext .js,.vue src", |
|||
"build": "vue-cli-service build", |
|||
"build:stage": "vue-cli-service build --mode staging", |
|||
"preview": "node build/index.js --preview", |
|||
"new": "plop", |
|||
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml", |
|||
"test:unit": "jest --clearCache && vue-cli-service test:unit", |
|||
"test:ci": "npm run lint && npm run test:unit" |
|||
}, |
|||
"dependencies": { |
|||
"af-table-column": "^1.0.3", |
|||
"axios": "0.18.1", |
|||
"clipboard": "2.0.4", |
|||
"codemirror": "5.45.0", |
|||
"core-js": "3.6.5", |
|||
"driver.js": "0.9.5", |
|||
"dropzone": "5.5.1", |
|||
"echarts": "4.2.1", |
|||
"element-ui": "^2.15.13", |
|||
"file-saver": "2.0.1", |
|||
"fuse.js": "3.4.4", |
|||
"js-cookie": "2.2.0", |
|||
"jsonlint": "1.6.3", |
|||
"jszip": "3.2.1", |
|||
"lodash": "^4.17.21", |
|||
"moment": "^2.29.1", |
|||
"normalize.css": "7.0.0", |
|||
"nprogress": "0.2.0", |
|||
"path-to-regexp": "2.4.0", |
|||
"qs": "^6.10.3", |
|||
"screenfull": "4.2.0", |
|||
"script-loader": "0.7.2", |
|||
"sortable.js": "^0.3.0", |
|||
"sortablejs": "^1.8.4", |
|||
"tui-editor": "1.3.3", |
|||
"umy-ui": "^1.1.6", |
|||
"v-fit-columns": "^0.2.0", |
|||
"vue": "2.6.10", |
|||
"vue-count-to": "1.0.13", |
|||
"vue-grid-layout": "^2.4.0", |
|||
"vue-i18n": "^8.28.2", |
|||
"vue-pdf": "^4.3.0", |
|||
"vue-router": "3.0.2", |
|||
"vue-splitpane": "1.0.4", |
|||
"vuedraggable": "2.20.0", |
|||
"vuex": "3.1.0", |
|||
"xlsx": "0.14.1" |
|||
}, |
|||
"devDependencies": { |
|||
"@vue/cli-plugin-babel": "4.4.4", |
|||
"@vue/cli-plugin-eslint": "4.4.4", |
|||
"@vue/cli-plugin-unit-jest": "4.4.4", |
|||
"@vue/cli-service": "4.4.4", |
|||
"@vue/test-utils": "1.0.0-beta.29", |
|||
"autoprefixer": "9.5.1", |
|||
"babel-eslint": "10.1.0", |
|||
"babel-jest": "23.6.0", |
|||
"babel-plugin-component": "^1.1.1", |
|||
"babel-plugin-dynamic-import-node": "2.3.3", |
|||
"chalk": "2.4.2", |
|||
"chokidar": "2.1.5", |
|||
"connect": "3.6.6", |
|||
"eslint": "6.7.2", |
|||
"eslint-plugin-vue": "6.2.2", |
|||
"html-webpack-plugin": "3.2.0", |
|||
"husky": "1.3.1", |
|||
"lint-staged": "8.1.5", |
|||
"mockjs": "1.0.1-beta3", |
|||
"plop": "2.3.0", |
|||
"runjs": "4.3.2", |
|||
"sass": "~1.26.5", |
|||
"sass-loader": "10.1.0", |
|||
"script-ext-html-webpack-plugin": "2.1.3", |
|||
"serve-static": "1.13.2", |
|||
"svg-sprite-loader": "4.1.3", |
|||
"svgo": "1.2.0", |
|||
"vue-template-compiler": "2.6.10" |
|||
}, |
|||
"browserslist": [ |
|||
"> 1%", |
|||
"last 2 versions" |
|||
], |
|||
"bugs": { |
|||
"url": "https://github.com/PanJiaChen/vue-element-admin/issues" |
|||
}, |
|||
"engines": { |
|||
"node": ">=8.9", |
|||
"npm": ">= 3.0.0" |
|||
}, |
|||
"keywords": [ |
|||
"vue", |
|||
"admin", |
|||
"dashboard", |
|||
"element-ui", |
|||
"boilerplate", |
|||
"admin-template", |
|||
"management-system" |
|||
], |
|||
"license": "MIT", |
|||
"lint-staged": { |
|||
"src/**/*.{js,vue}": [ |
|||
"eslint --fix", |
|||
"git add" |
|||
] |
|||
}, |
|||
"husky": { |
|||
"hooks": { |
|||
"pre-commit": "lint-staged" |
|||
} |
|||
}, |
|||
"repository": { |
|||
"type": "git", |
|||
"url": "git+https://github.com/PanJiaChen/vue-element-admin.git" |
|||
} |
|||
} |
|||
@ -0,0 +1,26 @@ |
|||
{{#if template}} |
|||
<template> |
|||
<div /> |
|||
</template> |
|||
{{/if}} |
|||
|
|||
{{#if script}} |
|||
<script> |
|||
export default { |
|||
name: '{{ properCase name }}', |
|||
props: {}, |
|||
data() { |
|||
return {} |
|||
}, |
|||
created() {}, |
|||
mounted() {}, |
|||
methods: {} |
|||
} |
|||
</script> |
|||
{{/if}} |
|||
|
|||
{{#if style}} |
|||
<style lang="scss" scoped> |
|||
|
|||
</style> |
|||
{{/if}} |
|||
@ -0,0 +1,55 @@ |
|||
const { notEmpty } = require('../utils.js') |
|||
|
|||
module.exports = { |
|||
description: 'generate vue component', |
|||
prompts: [{ |
|||
type: 'input', |
|||
name: 'name', |
|||
message: 'component name please', |
|||
validate: notEmpty('name') |
|||
}, |
|||
{ |
|||
type: 'checkbox', |
|||
name: 'blocks', |
|||
message: 'Blocks:', |
|||
choices: [{ |
|||
name: '<template>', |
|||
value: 'template', |
|||
checked: true |
|||
}, |
|||
{ |
|||
name: '<script>', |
|||
value: 'script', |
|||
checked: true |
|||
}, |
|||
{ |
|||
name: 'style', |
|||
value: 'style', |
|||
checked: true |
|||
} |
|||
], |
|||
validate(value) { |
|||
if (value.indexOf('script') === -1 && value.indexOf('template') === -1) { |
|||
return 'Components require at least a <script> or <template> tag.' |
|||
} |
|||
return true |
|||
} |
|||
} |
|||
], |
|||
actions: data => { |
|||
const name = '{{properCase name}}' |
|||
const actions = [{ |
|||
type: 'add', |
|||
path: `src/components/${name}/index.vue`, |
|||
templateFile: 'plop-templates/component/index.hbs', |
|||
data: { |
|||
name: name, |
|||
template: data.blocks.includes('template'), |
|||
script: data.blocks.includes('script'), |
|||
style: data.blocks.includes('style') |
|||
} |
|||
}] |
|||
|
|||
return actions |
|||
} |
|||
} |
|||
@ -0,0 +1,16 @@ |
|||
{{#if state}} |
|||
const state = {} |
|||
{{/if}} |
|||
|
|||
{{#if mutations}} |
|||
const mutations = {} |
|||
{{/if}} |
|||
|
|||
{{#if actions}} |
|||
const actions = {} |
|||
{{/if}} |
|||
|
|||
export default { |
|||
namespaced: true, |
|||
{{options}} |
|||
} |
|||
@ -0,0 +1,62 @@ |
|||
const { notEmpty } = require('../utils.js') |
|||
|
|||
module.exports = { |
|||
description: 'generate store', |
|||
prompts: [{ |
|||
type: 'input', |
|||
name: 'name', |
|||
message: 'store name please', |
|||
validate: notEmpty('name') |
|||
}, |
|||
{ |
|||
type: 'checkbox', |
|||
name: 'blocks', |
|||
message: 'Blocks:', |
|||
choices: [{ |
|||
name: 'state', |
|||
value: 'state', |
|||
checked: true |
|||
}, |
|||
{ |
|||
name: 'mutations', |
|||
value: 'mutations', |
|||
checked: true |
|||
}, |
|||
{ |
|||
name: 'actions', |
|||
value: 'actions', |
|||
checked: true |
|||
} |
|||
], |
|||
validate(value) { |
|||
if (!value.includes('state') || !value.includes('mutations')) { |
|||
return 'store require at least state and mutations' |
|||
} |
|||
return true |
|||
} |
|||
} |
|||
], |
|||
actions(data) { |
|||
const name = '{{name}}' |
|||
const { blocks } = data |
|||
const options = ['state', 'mutations'] |
|||
const joinFlag = `,
|
|||
` |
|||
if (blocks.length === 3) { |
|||
options.push('actions') |
|||
} |
|||
|
|||
const actions = [{ |
|||
type: 'add', |
|||
path: `src/store/modules/${name}.js`, |
|||
templateFile: 'plop-templates/store/index.hbs', |
|||
data: { |
|||
options: options.join(joinFlag), |
|||
state: blocks.includes('state'), |
|||
mutations: blocks.includes('mutations'), |
|||
actions: blocks.includes('actions') |
|||
} |
|||
}] |
|||
return actions |
|||
} |
|||
} |
|||
@ -0,0 +1,2 @@ |
|||
exports.notEmpty = name => v => |
|||
!v || v.trim() === '' ? `${name} is required` : true |
|||
@ -0,0 +1,26 @@ |
|||
{{#if template}} |
|||
<template> |
|||
<div /> |
|||
</template> |
|||
{{/if}} |
|||
|
|||
{{#if script}} |
|||
<script> |
|||
export default { |
|||
name: '{{ properCase name }}', |
|||
props: {}, |
|||
data() { |
|||
return {} |
|||
}, |
|||
created() {}, |
|||
mounted() {}, |
|||
methods: {} |
|||
} |
|||
</script> |
|||
{{/if}} |
|||
|
|||
{{#if style}} |
|||
<style lang="scss" scoped> |
|||
|
|||
</style> |
|||
{{/if}} |
|||
@ -0,0 +1,55 @@ |
|||
const { notEmpty } = require('../utils.js') |
|||
|
|||
module.exports = { |
|||
description: 'generate a view', |
|||
prompts: [{ |
|||
type: 'input', |
|||
name: 'name', |
|||
message: 'view name please', |
|||
validate: notEmpty('name') |
|||
}, |
|||
{ |
|||
type: 'checkbox', |
|||
name: 'blocks', |
|||
message: 'Blocks:', |
|||
choices: [{ |
|||
name: '<template>', |
|||
value: 'template', |
|||
checked: true |
|||
}, |
|||
{ |
|||
name: '<script>', |
|||
value: 'script', |
|||
checked: true |
|||
}, |
|||
{ |
|||
name: 'style', |
|||
value: 'style', |
|||
checked: true |
|||
} |
|||
], |
|||
validate(value) { |
|||
if (value.indexOf('script') === -1 && value.indexOf('template') === -1) { |
|||
return 'View require at least a <script> or <template> tag.' |
|||
} |
|||
return true |
|||
} |
|||
} |
|||
], |
|||
actions: data => { |
|||
const name = '{{name}}' |
|||
const actions = [{ |
|||
type: 'add', |
|||
path: `src/views/${name}/index.vue`, |
|||
templateFile: 'plop-templates/view/index.hbs', |
|||
data: { |
|||
name: name, |
|||
template: data.blocks.includes('template'), |
|||
script: data.blocks.includes('script'), |
|||
style: data.blocks.includes('style') |
|||
} |
|||
}] |
|||
|
|||
return actions |
|||
} |
|||
} |
|||
@ -0,0 +1,9 @@ |
|||
const viewGenerator = require('./plop-templates/view/prompt') |
|||
const componentGenerator = require('./plop-templates/component/prompt') |
|||
const storeGenerator = require('./plop-templates/store/prompt.js') |
|||
|
|||
module.exports = function(plop) { |
|||
plop.setGenerator('view', viewGenerator) |
|||
plop.setGenerator('component', componentGenerator) |
|||
plop.setGenerator('store', storeGenerator) |
|||
} |
|||
@ -0,0 +1,5 @@ |
|||
module.exports = { |
|||
plugins: { |
|||
autoprefixer: {} |
|||
} |
|||
} |
|||
|
After Width: | Height: | Size: 1.6 KiB |
@ -0,0 +1,33 @@ |
|||
// dev_win
|
|||
window.SITE_CONFIG['base'] = 'http://dev.ccwin-in.com:60068' |
|||
window.SITE_CONFIG['columnsApiNames'] = '/api/abp/application-configuration' |
|||
window.SITE_CONFIG['isAutoLogin'] = true |
|||
window.SITE_CONFIG['isSinglePage'] = false |
|||
window.SITE_CONFIG['userNameOrEmailAddress'] = 'admin' |
|||
window.SITE_CONFIG['client_secret'] = '1q2w3E*' |
|||
// window.SITE_CONFIG['user'] = 'http://dev.ccwin-in.com:60069/api'
|
|||
// // window.SITE_CONFIG['print'] = 'print'21384
|
|||
// window.SITE_CONFIG['print'] = 'http://dev.ccwin-in.com:60074'
|
|||
// window.SITE_CONFIG['largeScreen'] = 'http://dev.ccwin-in.com:60073'
|
|||
// window.SITE_CONFIG['warehouseCode'] = 'T8'
|
|||
// window.SITE_CONFIG['company'] = 'DongYang'
|
|||
// window.SITE_CONFIG['client_secret'] = '1q2w3E*'
|
|||
// window.SITE_CONFIG['reportsUrl'] = 'http://dev.ccwin-in.com:60074/#/reports/'
|
|||
// window.SITE_CONFIG['versionUrl'] = 'http://dev.ccwin-in.com:60070'
|
|||
// window.SITE_CONFIG['companyName'] = '长春一汽富维东阳汽车塑料零部件（安徽）有限公司'
|
|||
// 接口看板地址
|
|||
// window.SITE_CONFIG['interfaceBoardUrl'] = 'http://dev.ccwin-in.com:60090/'
|
|||
// window.SITE_CONFIG['interfaceBoardUrl'] = 'http://dev.ccwin-in.com:60069/'
|
|||
// 接口看板表头获取地址
|
|||
// window.SITE_CONFIG['interfaceBoardColumnsApi'] = 'api/abp/application-configuration'
|
|||
|
|||
// mock
|
|||
// window.SITE_CONFIG['apifoxToken'] = 'NXHNi5mp0dnUHGt0wkCrjvfcidsFKV33'
|
|||
// window.SITE_CONFIG['base'] = 'https://mock.apifox.cn/m1/1773588-0-default'
|
|||
// window.SITE_CONFIG['user'] = 'http://dev.ccwin-in.com:60099/api/auth'
|
|||
// window.SITE_CONFIG['print'] = 'print'
|
|||
// window.SITE_CONFIG['largeScreen'] = 'http://dev.ccwin-in.com:60073'
|
|||
// window.SITE_CONFIG['warehouseCode'] = 'T8'
|
|||
// window.SITE_CONFIG['company'] = 'DongYang'
|
|||
// window.SITE_CONFIG['client_secret'] = '1q2w3E*'
|
|||
// window.SITE_CONFIG['reportsUrl'] = 'http://10.164.0.227:59091/#/reports/'
|
|||
|
After Width: | Height: | Size: 66 KiB |
|
After Width: | Height: | Size: 303 KiB |
@ -0,0 +1,30 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
|
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
|||
<meta name="renderer" content="webkit"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> |
|||
<!-- <meta http-equiv="pragram" content="no-cache"> |
|||
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate"> --> |
|||
<link rel="icon" href="<%= BASE_URL %>WMS.svg"> |
|||
<script> |
|||
// 初始化 |
|||
window.SITE_CONFIG = {}; |
|||
window.SITE_CONFIG['base'] = '' |
|||
window.SITE_CONFIG['user'] = '' |
|||
window.SITE_CONFIG['print'] = '' |
|||
window.SITE_CONFIG['warehouseCode'] = '' |
|||
window.SITE_CONFIG['company'] = '' |
|||
</script> |
|||
<title><%= webpackConfig.name %></title> |
|||
<script src="./config.js"></script> |
|||
</head> |
|||
|
|||
<body> |
|||
<div id="app"></div> |
|||
<!-- built files will be auto injected --> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,3 @@ |
|||
{ |
|||
"version": "1.0.45" |
|||
} |
|||
@ -0,0 +1,84 @@ |
|||
<template> |
|||
<div id="app"> |
|||
<router-view /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'App' |
|||
} |
|||
localStorage.setItem('base',window.SITE_CONFIG['base']) |
|||
localStorage.setItem('columnsApiNames',window.SITE_CONFIG['columnsApiNames']) |
|||
localStorage.setItem('isAutoLogin',window.SITE_CONFIG['isAutoLogin']) |
|||
localStorage.setItem('isSinglePage',window.SITE_CONFIG['isSinglePage']) |
|||
localStorage.setItem('userNameOrEmailAddress',window.SITE_CONFIG['userNameOrEmailAddress']) |
|||
localStorage.setItem('client_secret',window.SITE_CONFIG['client_secret']) |
|||
// localStorage.setItem('user',window.SITE_CONFIG['user']) |
|||
// localStorage.setItem('print',window.SITE_CONFIG['print']) |
|||
// localStorage.setItem('warehouseCode',window.SITE_CONFIG['warehouseCode']) |
|||
// localStorage.setItem('company',window.SITE_CONFIG['company']) |
|||
// localStorage.setItem('largeScreen',window.SITE_CONFIG['largeScreen']) |
|||
// localStorage.setItem('apifoxToken',window.SITE_CONFIG['apifoxToken']) |
|||
// localStorage.setItem('reportsUrl',window.SITE_CONFIG['reportsUrl']) |
|||
// localStorage.setItem('companyName',window.SITE_CONFIG['companyName']) |
|||
// // localStorage.setItem('interfaceBoardUrl',window.SITE_CONFIG['interfaceBoardUrl']) |
|||
// localStorage.setItem('interfaceBoardColumnsApi',window.SITE_CONFIG['interfaceBoardColumnsApi']) |
|||
|
|||
</script> |
|||
<style lang="scss"> |
|||
/* 滚动条 */ |
|||
::-webkit-scrollbar { |
|||
width: 7px; |
|||
height: 7px; |
|||
background: transparent; |
|||
border-radius: 5px; |
|||
} |
|||
|
|||
/* 滚动条两端按钮 */ |
|||
::-webkit-scrollbar-button { |
|||
width: 0; |
|||
height: 0; |
|||
} |
|||
|
|||
/* 外层轨道 */ |
|||
::-webkit-scrollbar-track { |
|||
border-radius: 5px; |
|||
} |
|||
|
|||
/* 内层轨道，它会覆盖外层轨道的样式 */ |
|||
::-webkit-scrollbar-track-piece { |
|||
// background-color: #f3f3f3; |
|||
height: 7px; |
|||
width: 7px; |
|||
margin: 0 -2px 0; |
|||
} |
|||
|
|||
/* 滑块 */ |
|||
::-webkit-scrollbar-thumb { |
|||
background-color: #ccc; |
|||
min-height: 60px; |
|||
min-width: 60px; |
|||
border-radius: 5px; |
|||
} |
|||
|
|||
/* 纵向滑块悬浮 */ |
|||
::-webkit-scrollbar-thumb:vertical:hover { |
|||
background-color: #ccc; |
|||
} |
|||
|
|||
/* 横向滑块悬浮 */ |
|||
::-webkit-scrollbar-thumb:horizontal:hover { |
|||
background-color: #ccc; |
|||
} |
|||
/*横竖滚动条交角图案*/ |
|||
// ::-webkit-resizer { |
|||
// /*background-image: url(/public/img/resizer-inactive.png);*/ |
|||
// background-repeat: no-repeat; |
|||
// background-position: bottom right; |
|||
// } |
|||
/*横竖滚动条交角*/ |
|||
// ::-webkit-scrollbar-corner { |
|||
// background-color: #f3f3f3; |
|||
// } |
|||
</style> |
|||
@ -0,0 +1,604 @@ |
|||
import request from '@/utils/request' |
|||
import store from '@/store' |
|||
// let baseURL = process.env.VUE_APP_BASE_API + '/'
|
|||
let baseURL = localStorage.getItem('base') + '/api/' |
|||
let printURL = localStorage.getItem('print') + '/api/' |
|||
//新建
|
|||
export function postCreate(data, url) { |
|||
if (Object.keys(data).includes('company')) { |
|||
data.company = localStorage.getItem('company') |
|||
} |
|||
if (Object.keys(data).includes('warehouseCode')) { |
|||
data.warehouseCode = localStorage.getItem('warehouseCode') |
|||
} |
|||
if(Object.keys(data).includes('worker')) { |
|||
data.worker = store.getters.name.userName |
|||
} |
|||
return request({ |
|||
url: baseURL + url, |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
//编辑
|
|||
export function postUpdate(data, id, url) { |
|||
return request({ |
|||
url: baseURL + url + '/' + id, |
|||
method: 'put', |
|||
data |
|||
}) |
|||
} |
|||
//申请流程
|
|||
export function processRequest(id, url) { |
|||
return request({ |
|||
url: baseURL + url + id, |
|||
method: 'post', |
|||
}) |
|||
} |
|||
//子表编辑
|
|||
export function postDetailUpdate(data, id, UrlData, url) { |
|||
return request({ |
|||
url: baseURL + url + '/detail/' + id, |
|||
method: 'put', |
|||
params: UrlData, |
|||
data |
|||
}) |
|||
} |
|||
//删除
|
|||
export function postDelete(id, url) { |
|||
return request({ |
|||
url: baseURL + url + '/' + id, |
|||
method: 'delete', |
|||
}) |
|||
} |
|||
//子表删除
|
|||
// export function postDetailDelete(id, UrlData, url) {
|
|||
// return request({
|
|||
// url: baseURL + url + '/detail/' + id,
|
|||
// method: 'delete',
|
|||
// params: UrlData
|
|||
// })
|
|||
// }
|
|||
//分页+筛选【列表】
|
|||
export function getPageList(data, url, includeDetails) { |
|||
let _url = includeDetails ? baseURL + url + '/get-list-page-by-filter?includeDetails='+ includeDetails : baseURL + url + '/get-list-page-by-filter' |
|||
return request({ |
|||
url: _url, |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
//分页+筛选【明细列表】
|
|||
export function getPageListForDetail(data, url, includeDetails) { |
|||
return request({ |
|||
method:'post', |
|||
url: baseURL + url + '/get-list-page-by-filter?includeDetails='+Boolean(includeDetails), |
|||
data |
|||
}) |
|||
} |
|||
|
|||
|
|||
// 根据id获取主表信息
|
|||
export function getListDesById(url,id) { |
|||
return request({ |
|||
method:'get', |
|||
url: baseURL + url + '/' + id |
|||
}) |
|||
} |
|||
|
|||
//导出-获取文件 blobName
|
|||
/** |
|||
* @param {*} data |
|||
* @param {*} url 地址 |
|||
* @param {*} special 是否为特殊，如果是特殊，则直接用url |
|||
* @returns |
|||
*/ |
|||
export function postExport(params,data, url, special) { |
|||
let _url = special ? baseURL + url : baseURL + url + '/export-to-excel' |
|||
return request({ |
|||
url: _url, |
|||
method: 'post', |
|||
data, |
|||
params:params, |
|||
responseType: 'blob' |
|||
}) |
|||
} |
|||
//导出(详情内)-获取文件 blobName | 盘点计划
|
|||
/** |
|||
* @param {*} data |
|||
* @param {*} url 地址 |
|||
* @param {*} params |
|||
* @returns |
|||
*/ |
|||
export function postExportForDetail(data, url,params) { |
|||
return request({ |
|||
url: baseURL + url, |
|||
method: 'post', |
|||
data, |
|||
params: params, |
|||
responseType: 'blob' |
|||
}) |
|||
} |
|||
//导出-文件
|
|||
export function fileStorage(data) { |
|||
return request({ |
|||
url: baseURL + 'filestore/file', |
|||
method: 'get', |
|||
params: data, |
|||
}) |
|||
} |
|||
//导入-新-创建文件
|
|||
export function fileStorageCreate(data) { |
|||
return request({ |
|||
url: baseURL + 'filestore/file/create', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
//导入 isSpecial 是否为特殊接口
|
|||
export function postImport(data, url,isSpecial) { |
|||
let _url = isSpecial ? url : url + '/import' |
|||
return request({ |
|||
url: baseURL + _url, |
|||
method: 'post', |
|||
headers: { |
|||
'Content-Type': 'multipart/form-data;' |
|||
}, |
|||
responseType: 'blob', |
|||
data |
|||
}) |
|||
} |
|||
//导入模板下载
|
|||
export function postImportDown(url) { |
|||
return request({ |
|||
url: baseURL + url + '/import-template', |
|||
method: 'post', |
|||
responseType: 'blob' |
|||
}) |
|||
} |
|||
|
|||
//开始计划 | 盘点计划
|
|||
export function planHandle(id, url, data) { |
|||
return request({ |
|||
url: baseURL + url + '/handle/' + id, |
|||
method: 'post', |
|||
params: data |
|||
}) |
|||
} |
|||
// 取消计划（生产计划为关闭） | 盘点计划
|
|||
export function postCancel(id, url) { |
|||
return request({ |
|||
url: baseURL + url + '/cancel/' + id, |
|||
method: 'post' |
|||
}) |
|||
} |
|||
// 中止 | 盘点计划
|
|||
export function postAbort(id, url) { |
|||
return request({ |
|||
url: baseURL + url + '/abort/' + id, |
|||
method: 'post' |
|||
}) |
|||
} |
|||
//完成 | 盘点计划
|
|||
export function postComplete(id,data,url) { |
|||
return request({ |
|||
url: baseURL + url + '/complete-by-type/' + id, |
|||
method: 'post', |
|||
params:data |
|||
}) |
|||
} |
|||
//阶段 - 校正库存 | 盘点计划
|
|||
export function ChangeStage(data, url) { |
|||
return request({ |
|||
url: baseURL + url + '/change-stage', |
|||
method: 'post', |
|||
params:data |
|||
}) |
|||
} |
|||
//拆分 | 盘点计划
|
|||
export function postCreateWithCondition(data, url) { |
|||
if (Object.keys(data).includes('company')) { |
|||
data.company = localStorage.getItem('company') |
|||
} |
|||
if (Object.keys(data).includes('warehouseCode')) { |
|||
data.warehouseCode =localStorage.getItem('warehouseCode') |
|||
} |
|||
return request({ |
|||
url: baseURL + url + '/create-with-condition', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
//更新可用容量
|
|||
export function postUpdateAvailableCapacity(data, url) { |
|||
return request({ |
|||
url: baseURL + url + '/recalculate', |
|||
method: 'post', |
|||
params: data |
|||
}) |
|||
} |
|||
// 执行调整 | 盘点调整申请
|
|||
// export function ExecuteAdjusted(id) {
|
|||
// return request({
|
|||
// url: baseURL + 'wms/store/count-adjust-note/ExecuteAdjusted/' + id,
|
|||
// method: 'post',
|
|||
// })
|
|||
// }
|
|||
// 生成盘点调整申请 | 盘点记录
|
|||
export function StartAdjust(id) { |
|||
return request({ |
|||
// url: baseURL + 'wms/store/count-note/StartAdjust/' + id,
|
|||
url: baseURL + 'wms/store/count-note/'+ id +'/generate-adjust-request', |
|||
method: 'post' |
|||
}) |
|||
} |
|||
|
|||
//---------------------------通用---------------------------
|
|||
//获取详情
|
|||
export function getDetailed(id, url) { |
|||
return request({ |
|||
url: baseURL + url + '/' + id, |
|||
method: 'get', |
|||
}) |
|||
} |
|||
//获取子表详情
|
|||
export function getDetailedSon(id, UrlData, url) { |
|||
return request({ |
|||
url: baseURL + url + '/detail/' + id, |
|||
method: 'get', |
|||
params: UrlData |
|||
}) |
|||
} |
|||
//---------------------------只查询-------------------------
|
|||
//获取分页+筛选
|
|||
export function getPage(data, url) { |
|||
return request({ |
|||
url: baseURL + url, |
|||
method: 'get', |
|||
params: data |
|||
}) |
|||
} |
|||
//打印标签
|
|||
export function PrintServices(data) { |
|||
return request({ |
|||
url: printURL + 'reporting/PrintServices', |
|||
method: 'post', |
|||
headers: { |
|||
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' |
|||
}, |
|||
transformRequest: [ |
|||
function (data) { |
|||
var ret = '' |
|||
for (var it in data) { |
|||
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&' |
|||
} |
|||
ret = ret.substring(0, ret.lastIndexOf('&')) |
|||
return ret |
|||
} |
|||
], |
|||
data |
|||
}) |
|||
} |
|||
// 修改库存余额过期日期 | 库存余额
|
|||
export function updateExpireDate(data, url) { |
|||
return request({ |
|||
url: baseURL + url + '/update/expire-date', |
|||
method: 'post', |
|||
params: data |
|||
}) |
|||
} |
|||
|
|||
// 详情tabs页 通过code 获取列表
|
|||
export function getListByItemcode(data, url ){ |
|||
return request({ |
|||
url: baseURL + url + '/get-list-by-itemcode', |
|||
method: 'get', |
|||
params: data |
|||
}) |
|||
} |
|||
|
|||
// 详情tabs页 通过code 获取列表
|
|||
export function byItem(itemCode, url ){ |
|||
return request({ |
|||
url: baseURL + url + '/list/by-item/' + itemCode, |
|||
method: 'get' |
|||
}) |
|||
} |
|||
|
|||
// 详情tabs页 通过父物品号 获取列表
|
|||
export function byProduct(product, url ){ |
|||
return request({ |
|||
url: baseURL + url + '/get-list-by-product', |
|||
method: 'get', |
|||
params: product |
|||
}) |
|||
} |
|||
|
|||
// 详情tabs页 通过子物品号 获取列表
|
|||
export function byComponent(component, url ){ |
|||
return request({ |
|||
url: baseURL + url + '/get-list-by-component', |
|||
method: 'get', |
|||
params: component |
|||
}) |
|||
} |
|||
|
|||
// 详情tabs页 通过供应商 获取列表
|
|||
export function bySupplierCode(supplierCode, url ){ |
|||
return request({ |
|||
url: baseURL + url + '/get-list-by-supplier-code', |
|||
method: 'get', |
|||
params: supplierCode |
|||
}) |
|||
} |
|||
|
|||
// 详情tabs页 通过库位 获取列表
|
|||
export function byLocation(locationCode, url ){ |
|||
return request({ |
|||
url: baseURL + url + '/list/by-location/' + locationCode, |
|||
method: 'get', |
|||
}) |
|||
} |
|||
|
|||
// 详情tabs页 通过库位 获取列表
|
|||
export function byLocationCode(locationCode, url ){ |
|||
return request({ |
|||
url: baseURL + url + '/get-by-location-code', |
|||
method: 'get', |
|||
params: locationCode |
|||
}) |
|||
} |
|||
|
|||
// 详情tabs页 通过库位-零件关系 获取列表
|
|||
export function relationByLocationCode(locationCode, url ){ |
|||
return request({ |
|||
url: baseURL + url + '/by-location', |
|||
method: 'get', |
|||
params: locationCode |
|||
}) |
|||
} |
|||
|
|||
// 详情tabs页 通过子物品号 获取子层级列表
|
|||
export function byComponentCJ(component, url ){ |
|||
return request({ |
|||
url: baseURL + url + '/get-list-by-component-with-tree', |
|||
method: 'get', |
|||
params: component |
|||
}) |
|||
} |
|||
|
|||
//消息管理——用户消息类型关系——获取用户已有消息类型
|
|||
export function messageTypeSubscribe(id) { |
|||
return request({ |
|||
url: baseURL + 'message/message-type-subscribe/list/' + id, |
|||
method: 'get', |
|||
// params:id
|
|||
}) |
|||
} |
|||
|
|||
//消息管理——用户消息类型关系——保存用户与消息类型关系
|
|||
export function messageTypeSubscribeCreateMany(data,id) { |
|||
return request({ |
|||
url: baseURL + 'message/message-type-subscribe/create-many', |
|||
method: 'post', |
|||
params:id, |
|||
data |
|||
}) |
|||
} |
|||
|
|||
//首页——获取当前用户未读消息
|
|||
export function userNotifyNotReadList(userId) { |
|||
return request({ |
|||
url: baseURL + 'message/user-notify-message/not-read-list/' + userId, |
|||
method: 'get' |
|||
}) |
|||
} |
|||
|
|||
//首页——获取当前用户已读消息
|
|||
export function userNotifyHasRead(userId) { |
|||
return request({ |
|||
url: baseURL + 'message/user-notify-message/has-read-list/' + userId, |
|||
method: 'get' |
|||
}) |
|||
} |
|||
|
|||
//首页——修改当前用户消息状态
|
|||
export function userNotifyMessageUpdate(id) { |
|||
return request({ |
|||
url: baseURL + 'message/user-notify-message/read/' + id, |
|||
method: 'post' |
|||
}) |
|||
} |
|||
|
|||
//首页——获取当前用户消息详情
|
|||
export function notifyMessage(params, id) { |
|||
return request({ |
|||
url: baseURL + 'message/notify-message/' + id, |
|||
method: 'get', |
|||
params: params, |
|||
}) |
|||
} |
|||
|
|||
// 库存-启用 | 库存余额
|
|||
// export function inventoryBalanceActive(id) {
|
|||
// return request({
|
|||
// url: baseURL + 'wms/inventory/inventory-balance/active?id=' + id,
|
|||
// method: 'post',
|
|||
// })
|
|||
// }
|
|||
|
|||
// 库存列表
|
|||
export function inventoryBalanceList(data) { |
|||
return request({ |
|||
url: baseURL + 'wms/inventory/Inventory-Balance/list', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 库存-启用 | 库存余额 改
|
|||
export function inventoryBalanceActive(params) { |
|||
return request({ |
|||
url: baseURL + 'wms/inventory/inventory-balance/' + params.id + '/active', |
|||
method: 'post', |
|||
params: params, |
|||
}) |
|||
} |
|||
|
|||
//库移——查询 | 库存转移日志
|
|||
export function byBalancesRequestManyParameter(data) { |
|||
return request({ |
|||
url: baseURL + 'wms/inventory/inventory-balance/by-balances-request-many-parameter', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
//库移——提交 | 库存转移日志
|
|||
export function inventoryTransferNote(data) { |
|||
return request({ |
|||
url: baseURL + 'wms/store/inventory-transfer-note', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
//库存管理——已占用库存——删除
|
|||
//库存管理——预填充库存——删除
|
|||
export function remove(id, url) { |
|||
return request({ |
|||
url: baseURL + url + '/remove/' + id, |
|||
method: 'post', |
|||
params: id |
|||
}) |
|||
} |
|||
|
|||
//发料任务——新增 | 自动发料任务 | 人工发料任务
|
|||
export function createAndHandle(data) { |
|||
return request({ |
|||
url: baseURL + 'wms/store/material-request/create-and-handle', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 人工叫料申请 | 人工发料任务 | 人工发料记录 | 自动叫料申请 | 自动发料任务 | 自动发料记录 | 直接发料记录
|
|||
// 完工收货缴库申请 | 线边仓缴库申请 | 线边仓缴库记录 | 线边仓报废申请 | 线边仓报废记录 | 原料报废记录
|
|||
export function materialRequestByType(data, url, params) { |
|||
let _type = params.type?params.type:params.requestType |
|||
return request({ |
|||
url: baseURL + url + '/' + _type, |
|||
method: 'post', |
|||
params: params, |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 采购收货——供应商发货通知——导入——确定（【批量创建】供应商发货通知）
|
|||
export function supplierAsnCreateMany(data) { |
|||
return request({ |
|||
url: baseURL + 'wms/store/supplier-asn/create-many', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 调拨作废
|
|||
// export function transferRequestCancel(url, data ) {
|
|||
// return request({
|
|||
// url: baseURL + url + '/cancel/' + data.id,
|
|||
// method: 'post',
|
|||
// params: data
|
|||
// })
|
|||
// }
|
|||
|
|||
// 打印之后调用 记录打印次数 | 原料直发客户记录
|
|||
export function sumPrint(number, url ) { |
|||
return request({ |
|||
url: baseURL + url + '/sum-print/' + number, |
|||
method: 'post' |
|||
}) |
|||
} |
|||
|
|||
// 线边仓调拨列表 | 上架前退货记录 | 采购上架记录 | 半成品上架记录 | 原料直发
|
|||
export function getPageListWip(data, url) { |
|||
return request({ |
|||
url: baseURL + url, |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 线边仓调拨确认按钮 | 客户调拨确认按钮 | 自动发料记录
|
|||
export function confirm(id, url) { |
|||
return request({ |
|||
url: baseURL + url + '/confirm/' + id, |
|||
method: 'post', |
|||
}) |
|||
} |
|||
|
|||
// 采购收货记录-详情页TAB-不合格品收货明细/合格品收货明细/收货缺料明细
|
|||
export function purRecNoteCustomInfo( url,id ){ |
|||
return request({ |
|||
url: baseURL + 'wms/store/purchase-receipt-note/' + url + id, |
|||
method: 'get', |
|||
}) |
|||
} |
|||
// 质检-不合格转合格
|
|||
export function convertOk(data) { |
|||
return request({ |
|||
url: baseURL + 'wms/store/no-ok-convert-ok-notes', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
// 获取全部供应商（codes）| 上架前退货记录 | 上架后退货记录 | 采购上架记录
|
|||
export function allSupplierByCodes(data) { |
|||
return request({ |
|||
url: baseURL + 'basedata/supplier/by-codes', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 根据code获取当前供应商信息 打印需要获取供应商信息（供应商简称等）相关位置
|
|||
export function getOneSupplierInfoByCode(code) { |
|||
return request({ |
|||
url: baseURL + 'basedata/supplier/by-code/' + code, |
|||
method: 'get' |
|||
}) |
|||
} |
|||
|
|||
// 根据code获取当前客户信息 打印需要获取供应商信息（客户地址等）相关位置
|
|||
export function getOneCustomerInfoByCode(code) { |
|||
return request({ |
|||
url: baseURL + 'basedata/customer/by-code/' + code, |
|||
method: 'get' |
|||
}) |
|||
} |
|||
|
|||
// 获取版本编号
|
|||
export function getVsersion() { |
|||
return request({ |
|||
url: window.SITE_CONFIG['versionUrl'] + `/version.json?t=${new Date().getTime()}`, |
|||
method: 'get' |
|||
}) |
|||
} |
|||
|
|||
// 安全库存预警
|
|||
export function getListPageSafety(data, url) { |
|||
return request({ |
|||
url: baseURL + url, |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 根据编号获取字典信息
|
|||
// export function getDictByCode(code) {
|
|||
// return request({
|
|||
// url: baseURL + 'basedata/dict/by-code/' + code,
|
|||
// method: 'get',
|
|||
// })
|
|||
// }
|
|||
@ -0,0 +1,320 @@ |
|||
import request from '@/utils/request' |
|||
let baseURL = localStorage.getItem('base') + '/api' |
|||
import axios from 'axios' |
|||
|
|||
export function login(data) { |
|||
return request({ |
|||
url: baseURL + '/account/login', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
export function getUsersByUserName(name) { |
|||
return request({ |
|||
url: baseURL + '/identity/users/by-username/'+name, |
|||
method: 'get', |
|||
}) |
|||
} |
|||
|
|||
export function token(data) { |
|||
return request({ |
|||
// url: baseURL + '/token',
|
|||
url: baseURL + '/connect/token', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
export function getInfo() { |
|||
return request({ |
|||
url: baseURL + '/abp/application-configuration', |
|||
method: 'get', |
|||
}) |
|||
} |
|||
|
|||
export function logout() { |
|||
return request({ |
|||
url: baseURL + '/account/logout', |
|||
method: 'get' |
|||
}) |
|||
} |
|||
|
|||
//获取PC菜单
|
|||
export function getWebMenu(params) { |
|||
return request({ |
|||
url: baseURL + '/auth/user-menu/web-menu/' + params.userId, |
|||
method: 'get', |
|||
params: params |
|||
}) |
|||
} |
|||
|
|||
//新建
|
|||
export function postCreate(data) { |
|||
return request({ |
|||
url: baseURL + '/identity/users', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
//获取全部角色 | 用户信息维护
|
|||
export function usersroles() { |
|||
return request({ |
|||
url: baseURL + '/identity/users/assignable-roles', |
|||
method: 'get' |
|||
}) |
|||
} |
|||
//获取当前角色 | 用户信息维护
|
|||
export function getusersID(data) { |
|||
return request({ |
|||
url: baseURL + '/identity/users/' + data + '/roles', |
|||
method: 'get' |
|||
}) |
|||
} |
|||
//编辑
|
|||
export function postUpdate(data, id) { |
|||
return request({ |
|||
url: baseURL + '/identity/users/' + id, |
|||
method: 'put', |
|||
data |
|||
}) |
|||
} |
|||
//删除
|
|||
export function postDelete(id) { |
|||
return request({ |
|||
url: baseURL + '/identity/users/' + id, |
|||
method: 'delete', |
|||
}) |
|||
} |
|||
//分页+筛选
|
|||
export function getPageList(data) { |
|||
return request({ |
|||
url: baseURL + '/identity/users', |
|||
method: 'get', |
|||
params: data |
|||
}) |
|||
} |
|||
//重置密码功能 | 用户信息维护
|
|||
export function putpassword(id) { |
|||
return request({ |
|||
url: baseURL + '/identity/users/reset-password/' + id, |
|||
method: 'post' |
|||
}) |
|||
} |
|||
|
|||
//获取全部权限（包含PDA+pc） | PC菜单信息维护 | PDA菜单信息维护 | PDA用户权限维护 | PC角色权限维护
|
|||
export function menuPermissions(data) { |
|||
return request({ |
|||
url: baseURL + '/auth/menu/list', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
//新建菜单 | PC菜单信息维护 | PDA菜单信息维护
|
|||
export function postCreateMenu(data) { |
|||
return request({ |
|||
url: baseURL + '/auth/menu', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
//编辑菜单 | PC菜单信息维护 | PDA菜单信息维护
|
|||
export function postUpdateMenu(data, id) { |
|||
return request({ |
|||
url: baseURL + '/auth/menu/' + id, |
|||
method: 'put', |
|||
data |
|||
}) |
|||
} |
|||
//删除菜单 | PC菜单信息维护 | PDA菜单信息维护
|
|||
export function postDeleteMenu(id) { |
|||
return request({ |
|||
url: baseURL + '/auth/menu/' + id, |
|||
method: 'delete', |
|||
}) |
|||
} |
|||
//获取菜单详情 | PC菜单信息维护 | PDA菜单信息维护
|
|||
export function getDetailedMenu(id) { |
|||
return request({ |
|||
url: baseURL + '/auth/menu/' + id, |
|||
method: 'get', |
|||
}) |
|||
} |
|||
//获取用户全部工作组 | 用户工作组对应关系
|
|||
// export function workgroupPermissions() {
|
|||
// return request({
|
|||
// url: baseURL + '/auth/user-workgroup/get-list',
|
|||
// method: 'get',
|
|||
// params:{
|
|||
// SkipCount:0,
|
|||
// MaxResultCount:100
|
|||
// }
|
|||
// })
|
|||
// }
|
|||
//获取已有权限 | PDA用户权限维护
|
|||
export function UserPermissions(id, url) { |
|||
return request({ |
|||
url: baseURL + '/' + url + '/' + id.userId, |
|||
method: 'get', |
|||
params:id |
|||
}) |
|||
} |
|||
|
|||
//保存权限 | PDA用户权限维护
|
|||
export function SetUserPermissions(data, id, url) { |
|||
return request({ |
|||
url: baseURL + '/' + url + '/' + id.userId, |
|||
method: 'put', |
|||
params:id, |
|||
data |
|||
}) |
|||
} |
|||
|
|||
//获取用户已有工作组 | 用户工作组对应关系
|
|||
export function userWorkgroupPermissions(id) { |
|||
return request({ |
|||
url: baseURL + '/auth/user-workgroup/get-user-work-group-by-user-id', |
|||
method: 'get', |
|||
params:id |
|||
}) |
|||
} |
|||
|
|||
//保存用户与工作组关系 | 用户工作组对应关系
|
|||
export function SetUserWorkgroupPermissions(data,id) { |
|||
return request({ |
|||
url: baseURL + '/auth/user-workgroup/add-many', |
|||
method: 'post', |
|||
params:id, |
|||
data |
|||
}) |
|||
} |
|||
//加载用户登录信息
|
|||
export function loadLoginUserInfo(id) { |
|||
return request({ |
|||
url: baseURL + '/identity/users/' + id, |
|||
method: 'get' |
|||
}) |
|||
} |
|||
//修改登录用户基本信息
|
|||
export function putLoginUserInfo(data) { |
|||
return request({ |
|||
url: baseURL + '/identity/my-profile', |
|||
method: 'put', |
|||
data |
|||
}) |
|||
} |
|||
//修改登录用户的密码-强密码规则
|
|||
export function postLoginUserInfo(data, id) { |
|||
return request({ |
|||
url: baseURL + '/identity/users/change-password/' + id, |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
//获取部门列表 | 用户信息维护 | 部门信息维护
|
|||
export function departmentList(data) { |
|||
return request({ |
|||
url: baseURL + '/auth/department/list', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
//获取明细列表
|
|||
export function getDetailed(id, url) { |
|||
return request({ |
|||
url: baseURL + url + id, |
|||
method: 'get' |
|||
}) |
|||
} |
|||
|
|||
//新建 | 部门信息维护
|
|||
export function authCreate(data, url) { |
|||
if (Object.keys(data).includes('company')) { |
|||
data.company = localStorage.getItem('company') |
|||
} |
|||
if (Object.keys(data).includes('warehouseCode')) { |
|||
data.warehouseCode = localStorage.getItem('warehouseCode') |
|||
} |
|||
if(Object.keys(data).includes('worker')) { |
|||
data.worker = store.getters.name.userName |
|||
} |
|||
return request({ |
|||
url: baseURL + '/' + url, |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
//编辑 | 部门信息维护
|
|||
export function authUpdate(data, id, url) { |
|||
return request({ |
|||
url: baseURL + '/' + url + '/' + id, |
|||
method: 'put', |
|||
data |
|||
}) |
|||
} |
|||
//删除 | 部门信息维护
|
|||
export function authDelete(id, url) { |
|||
return request({ |
|||
url: baseURL + '/' + url + '/' + id, |
|||
method: 'delete', |
|||
}) |
|||
} |
|||
|
|||
//-------------------------------------
|
|||
// 创建 | PC角色权限维护
|
|||
export function postCreateRoles(data) { |
|||
return request({ |
|||
url: baseURL + '/identity/roles', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
//编辑 | PC角色权限维护
|
|||
export function postUpdateRoles(data, id) { |
|||
return request({ |
|||
url: baseURL+'/identity/roles/' + id, |
|||
method: 'put', |
|||
data |
|||
}) |
|||
} |
|||
//删除 | PC角色权限维护
|
|||
export function postDeleteRoles(id) { |
|||
return request({ |
|||
url: baseURL + '/identity/roles/' + id, |
|||
method: 'delete', |
|||
}) |
|||
} |
|||
// 描述修改 | PC角色权限维护
|
|||
export function saveOrUpdateDescribe(params,id) { |
|||
return request({ |
|||
url: baseURL + '/identity/roles/' + id + '/description', |
|||
method: 'post', |
|||
params: params |
|||
}) |
|||
} |
|||
//分页+筛选 | PC角色权限维护
|
|||
export function getPageListRoles(data) { |
|||
return request({ |
|||
url: baseURL + '/identity/roles', |
|||
method: 'get', |
|||
params: data |
|||
}) |
|||
} |
|||
|
|||
//获取权限模板 | PC角色权限维护
|
|||
export function getpermissionsRoles(data) { |
|||
return request({ |
|||
url: baseURL +'/permission-management/permissions', |
|||
method: 'get', |
|||
params: data |
|||
}) |
|||
} |
|||
//保存权限模板 | PC角色权限维护
|
|||
export function putpermissionsRoles(url, data) { |
|||
return request({ |
|||
url: baseURL+ url, |
|||
method: 'put', |
|||
data |
|||
}) |
|||
} |
|||
@ -0,0 +1,56 @@ |
|||
import request from '@/utils/request' |
|||
// let baseURL = localStorage.getItem('print') + '/api/'
|
|||
let baseURL = localStorage.getItem('base') + '/api/' |
|||
|
|||
// 根据箱码获取标签相关信息 | 补打标签
|
|||
export function getOneInventoryLabelByCode(code) { |
|||
return request({ |
|||
url: baseURL + 'label/inventory-label/by-code/' + code, |
|||
method: 'get' |
|||
}) |
|||
} |
|||
|
|||
// 批量获取箱标签信息 | 到货请求
|
|||
export function getInventoryLabelByCodes(data) { |
|||
return request({ |
|||
url: baseURL + 'label/inventory-label/by-codes', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
//生产、采购生成标签（批量）| 标签管理模块
|
|||
export function postInventoryLabelCode(data) { |
|||
return request({ |
|||
url: baseURL + 'label/Inventory-label/generate-and-create/many', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
//生产、采购生成标签（一次多个）| 标签管理模块
|
|||
export function postInventoryLabelCode_count(params,data) { |
|||
return request({ |
|||
url: baseURL + 'label/inventory-label/generate-and-create/many/'+params.count, |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 拆箱 | 标签管理-拆分箱标签
|
|||
export function postSplitPacking(data) { |
|||
return request({ |
|||
url: baseURL + 'wms/store/transfer-note/split-packing', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 拆箱记录列表
|
|||
export function splitPackingList(data) { |
|||
return request({ |
|||
url: baseURL + 'wms/store/transfer-note/get-split-packing-list', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
@ -0,0 +1,159 @@ |
|||
// 接口监控看板相关api
|
|||
import request from '@/utils/request' |
|||
let base_api = localStorage.getItem('base') |
|||
let colum_url = localStorage.getItem('columnsApiNames') |
|||
// 转义传参
|
|||
const initParams = (data) => { |
|||
return { |
|||
skipCount:data.SkipCount, |
|||
maxResultCount:data.MaxResultCount, |
|||
sorting:data.Sorting |
|||
} |
|||
} |
|||
|
|||
// 获取表头数据
|
|||
export function getInterfaceBoard() { |
|||
return request({ |
|||
method:'get', |
|||
url: base_api + colum_url |
|||
}) |
|||
} |
|||
|
|||
// 获取导出配置信息接口
|
|||
// export function getExportConfigList(name) {
|
|||
// return request({
|
|||
// url: base_api + '/get-by-user-and-table-name',
|
|||
// method: 'post',
|
|||
// params:{
|
|||
// userId:JSON.parse(localStorage.getItem("currentUserInfo")).id,
|
|||
// exportTableName:name
|
|||
// },
|
|||
// })
|
|||
// }
|
|||
|
|||
//外部数据转换
|
|||
// export function dataExchangeFromOut(data) {
|
|||
// return axios({
|
|||
// method:'get',
|
|||
// url: interfaceBoard_api + 'outgoing-to-external',
|
|||
// params:initParams(data)
|
|||
// })
|
|||
// }
|
|||
|
|||
// //归档外部数据转换
|
|||
// export function dataExchangeFromOut_file(data) {
|
|||
// return axios({
|
|||
// method:'get',
|
|||
// url: interfaceBoard_api + 'archived-outgoing-to-external',
|
|||
// params:initParams(data)
|
|||
// })
|
|||
// }
|
|||
|
|||
// //wms数据接收
|
|||
// export function comingToWms(data) {
|
|||
// return axios({
|
|||
// method:'get',
|
|||
// url: interfaceBoard_api + 'incoming-to-wms',
|
|||
// params:initParams(data)
|
|||
// })
|
|||
// }
|
|||
|
|||
// //归档wms数据接收
|
|||
// export function comingToWms_file(data) {
|
|||
// return axios({
|
|||
// method:'get',
|
|||
// url: interfaceBoard_api + 'archived-incoming-to-wms',
|
|||
// params:initParams(data)
|
|||
// })
|
|||
// }
|
|||
|
|||
// //wms数据转换
|
|||
// export function dataExchangeFromWms(data) {
|
|||
// return axios({
|
|||
// method:'get',
|
|||
// url: interfaceBoard_api + 'data-exchange_Outgoing-from-wms',
|
|||
// params:initParams(data)
|
|||
// })
|
|||
// }
|
|||
|
|||
// // 归档wms数据转换
|
|||
// export function dataExchangeFromWms_file(data) {
|
|||
// return axios({
|
|||
// method:'get',
|
|||
// url: interfaceBoard_api + 'data-exchange_Archived-outgoing-from-wms',
|
|||
// params:initParams(data)
|
|||
// })
|
|||
// }
|
|||
|
|||
// //外部数据接收
|
|||
// export function comingFromOut(data) {
|
|||
// return axios({
|
|||
// method:'get',
|
|||
// url: interfaceBoard_api + 'data-exchange_Incoming-from-external',
|
|||
// params:initParams(data)
|
|||
// })
|
|||
// }
|
|||
|
|||
// //归档外部数据接收
|
|||
// export function comingFromOut_file(data) {
|
|||
// return axios({
|
|||
// method:'get',
|
|||
// url: interfaceBoard_api + 'data-exchange_Archived-incoming-from-external',
|
|||
// params:initParams(data)
|
|||
// })
|
|||
// }
|
|||
|
|||
// 测试数据-列表
|
|||
// export function TestSchool(data, includeDetails) {
|
|||
// return request({
|
|||
// method:'post',
|
|||
// url: base_api + '/api/TestSchool/base/get-list-page-by-filter?includeDetails='+Boolean(includeDetails),
|
|||
// data
|
|||
// })
|
|||
// }
|
|||
|
|||
// // 测试数据-列表-根据id获取详情
|
|||
// export function TestSchoolItemById(id) {
|
|||
// return request({
|
|||
// method:'get',
|
|||
// url: base_api + '/api/app/test-school/'+id,
|
|||
// })
|
|||
// }
|
|||
|
|||
// // 测试数据-列表-新增、编辑
|
|||
// export function TestSchool_save(data,isAdd) {
|
|||
// let _type = isAdd ? 'create' : 'update-by-id'
|
|||
// return request({
|
|||
// method:'post',
|
|||
// url: base_api + '/api/TestSchool/base/'+_type,
|
|||
// data:data,
|
|||
// params:{id:data.id}
|
|||
// })
|
|||
// }
|
|||
|
|||
// // 测试数据-列表-删除
|
|||
// export function TestSchool_delete(id) {
|
|||
// return request({
|
|||
// method:'DELETE',
|
|||
// url: base_api + '/api/TestSchool/base/delete-by-id',
|
|||
// params:{id:id}
|
|||
// })
|
|||
// }
|
|||
|
|||
// // 测试数据-明细-列表
|
|||
// export function TestSchoolDetailList(data,includeDetails) {
|
|||
// return request({
|
|||
// method:'post',
|
|||
// url: base_api + '/api/TestStudentDetail/base/get-list-page-by-filter?includeDetails='+Boolean(includeDetails),
|
|||
// data
|
|||
// })
|
|||
// }
|
|||
|
|||
// // 测试数据-明细-删除
|
|||
// export function TestSchoolDetailList_delete(id) {
|
|||
// return request({
|
|||
// method:'DELETE',
|
|||
// url: base_api + '/api/TestStudentDetail/base/delete-by-id',
|
|||
// params:{id:id}
|
|||
// })
|
|||
// }
|
|||
@ -0,0 +1,237 @@ |
|||
import request from '@/utils/request' |
|||
// let baseURL = process.env.VUE_APP_BASE_API + '/'
|
|||
let baseURL = localStorage.getItem('base') + '/api/' |
|||
//分页+筛选
|
|||
export function getPageList(data, url) { |
|||
return request({ |
|||
url: baseURL + url + '/list', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
//分页+筛选
|
|||
export function getPage(data, url) { |
|||
return request({ |
|||
url: baseURL + url + '/count', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
//---------------------------通用---------------------------
|
|||
|
|||
//任务流程——承接
|
|||
export function accept(url, data) { |
|||
return request({ |
|||
url: baseURL + url + '/accept/'+data.id, |
|||
method: 'post', |
|||
// params: data
|
|||
}) |
|||
} |
|||
|
|||
//任务流程——关闭
|
|||
export function close(url, data) { |
|||
return request({ |
|||
url: baseURL + url + '/close/'+data.id, |
|||
method: 'post', |
|||
// params: data
|
|||
}) |
|||
} |
|||
|
|||
//任务流程——取消
|
|||
export function cancel(url, data) { |
|||
return request({ |
|||
url: baseURL + url + '/cancel/'+data.id, |
|||
method: 'post', |
|||
// params: data
|
|||
}) |
|||
} |
|||
|
|||
//任务流程——取消承接 | 采购收货任务
|
|||
export function cancelAccept(url, data) { |
|||
return request({ |
|||
url: baseURL + url + '/cancel-accept/'+data.id, |
|||
method: 'post', |
|||
// params: data
|
|||
}) |
|||
} |
|||
|
|||
//任务流程——执行
|
|||
export function handle(data, params, url) { |
|||
return request({ |
|||
url: baseURL + url + '/handle/'+params.id, |
|||
method: 'post', |
|||
// params: params,
|
|||
data |
|||
}) |
|||
} |
|||
|
|||
//任务流程——打开
|
|||
export function open(url, data) { |
|||
return request({ |
|||
url: baseURL + url + '/open/'+data.id, |
|||
method: 'post', |
|||
// params: data
|
|||
}) |
|||
} |
|||
|
|||
|
|||
//获取详情
|
|||
export function getDetailed(id, url) { |
|||
return request({ |
|||
url: baseURL + url + '/' + id, |
|||
method: 'get', |
|||
}) |
|||
} |
|||
//获取子表详情
|
|||
export function getDetailedSon(id, UrlData, url) { |
|||
return request({ |
|||
url: baseURL + url + '/detail/' + id, |
|||
method: 'get', |
|||
params: UrlData |
|||
}) |
|||
} |
|||
|
|||
//收货任务-执行 - 目检
|
|||
export function visualInspection( params,data) { |
|||
return request({ |
|||
url: baseURL + 'wms/job/purchase-receipt-job/save-detail-inspect/' + params.id, |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
// 收货任务-执行-待处理全部转合格
|
|||
export function AllPendingToQualified( id,params) { |
|||
return request({ |
|||
// url: baseURL + 'wms/job/purchase-receipt-job/set-inspect-status-with-not-inspect/' + id,
|
|||
url: baseURL + 'wms/job/purchase-receipt-job/set-inspect-status-ok-by-inspect/' + id, |
|||
method: 'post', |
|||
params: params, |
|||
}) |
|||
} |
|||
// 收货任务-执行-重置目检状态
|
|||
export function resetSelectToInspect( id,data) { |
|||
return request({ |
|||
url: baseURL + 'wms/job/purchase-receipt-job/reset-many-detail-inspect/' + id, |
|||
method: 'post', |
|||
data: data, |
|||
}) |
|||
} |
|||
|
|||
//作废任务
|
|||
export function Invalid(url, id) { |
|||
return request({ |
|||
url: baseURL + url + '/invalid', |
|||
method: 'post', |
|||
params: id, |
|||
}) |
|||
} |
|||
//检查任务
|
|||
export function Check(url, id, data) { |
|||
return request({ |
|||
url: baseURL + url + '/check', |
|||
method: 'post', |
|||
params: id, |
|||
data |
|||
}) |
|||
} |
|||
|
|||
|
|||
//上架任务——执行
|
|||
export function HandleJob(data, id, url) { |
|||
return request({ |
|||
url: baseURL + url + '/handle-job', |
|||
method: 'post', |
|||
params: id, |
|||
data |
|||
}) |
|||
} |
|||
|
|||
//质检执行任务
|
|||
export function InspectJobHandle(data, params, url) { |
|||
return request({ |
|||
url: baseURL + url + '/handle', |
|||
method: 'post', |
|||
params: params, |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// //发料任务——执行
|
|||
// export function issueJobHandle(data, params, url) {
|
|||
// return request({
|
|||
// url: baseURL + url + '/handle',
|
|||
// method: 'post',
|
|||
// params: params,
|
|||
// data
|
|||
// })
|
|||
// }
|
|||
|
|||
//人工发料任务 | 自动发料任务
|
|||
export function materialRequestByType(data, url, params,includeDetails) { |
|||
let _type = params.type?params.type:params.requestType |
|||
return request({ |
|||
url: baseURL + url + '/' + _type + '?includeDetails=' + (includeDetails || false), |
|||
method: 'post', |
|||
params: params, |
|||
data |
|||
}) |
|||
} |
|||
|
|||
//生产计划——更新备料计划
|
|||
export function productionPlanUpdate(data, detailId, id) { |
|||
return request({ |
|||
url: baseURL + 'wms/store/preparation-plan/details/' + id, |
|||
method: 'put', |
|||
params: detailId, |
|||
data |
|||
}) |
|||
} |
|||
|
|||
//生产计划——生产备料计划后查询乐观锁
|
|||
export function preparationPlanByNumber(params) { |
|||
return request({ |
|||
url: baseURL + 'wms/store/preparation-plan/by-number', |
|||
method: 'get', |
|||
params: params, |
|||
}) |
|||
} |
|||
|
|||
//质检——完成质检
|
|||
export function completeSummaryDetailStatus(params, data) { |
|||
return request({ |
|||
url: baseURL + 'wms/store/inspect-job/complete-summary-detail-status/' + params.id, |
|||
method: 'post', |
|||
params: params, |
|||
data |
|||
}) |
|||
} |
|||
|
|||
//质检——设置默认状态（清除质检）
|
|||
export function setDetailDefaultOkStatus(params, id, data) { |
|||
return request({ |
|||
url: baseURL + 'wms/store/inspect-job/set-detail-default-ok-status/' + id, |
|||
method: 'post', |
|||
params: params, |
|||
data |
|||
}) |
|||
} |
|||
|
|||
//质检——设置详情为合格
|
|||
export function setDetailOkStatus(params, id, data) { |
|||
return request({ |
|||
url: baseURL + 'wms/store/inspect-job/set-detail-ok-status/' + id, |
|||
method: 'post', |
|||
params: params, |
|||
data |
|||
}) |
|||
} |
|||
|
|||
//质检——设置详情为不合格
|
|||
export function setDetailNookStatus(params, id, data) { |
|||
return request({ |
|||
url: baseURL + 'wms/store/inspect-job/set-detail-nook-status/' + id, |
|||
method: 'post', |
|||
params: params, |
|||
data |
|||
}) |
|||
} |
|||
|
After Width: | Height: | Size: 160 KiB |
|
After Width: | Height: | Size: 96 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,85 @@ |
|||
<template> |
|||
<el-breadcrumb class="app-breadcrumb" separator="/"> |
|||
<transition-group name="breadcrumb"> |
|||
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path"> |
|||
<span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span> |
|||
<a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a> |
|||
</el-breadcrumb-item> |
|||
</transition-group> |
|||
</el-breadcrumb> |
|||
</template> |
|||
|
|||
<script> |
|||
import pathToRegexp from 'path-to-regexp' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
levelList: null |
|||
} |
|||
}, |
|||
watch: { |
|||
$route(route) { |
|||
// if you go to the redirect page, do not update the breadcrumbs |
|||
if (route.path.startsWith('/redirect/')) { |
|||
return |
|||
} |
|||
this.getBreadcrumb() |
|||
} |
|||
}, |
|||
created() { |
|||
this.getBreadcrumb() |
|||
}, |
|||
methods: { |
|||
getBreadcrumb() { |
|||
// only show routes with meta.title |
|||
let matched = this.$route.matched.filter(item => item.meta && item.meta.title) |
|||
const first = matched[0] |
|||
|
|||
if (!this.isDashboard(first)) { |
|||
matched = [].concat(matched) |
|||
// matched = [{ path: '/dashboard', meta: { title: '系统首页' }}].concat(matched) |
|||
// matched = [{ path: '/inventoryManage/InventoryBalance', meta: { title: '库存余额' }}].concat(matched) |
|||
} |
|||
|
|||
this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false) |
|||
}, |
|||
isDashboard(route) { |
|||
const name = route && route.name |
|||
if (!name) { |
|||
return false |
|||
} |
|||
return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase() |
|||
}, |
|||
pathCompile(path) { |
|||
// To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561 |
|||
const { params } = this.$route |
|||
var toPath = pathToRegexp.compile(path) |
|||
return toPath(params) |
|||
}, |
|||
handleLink(item) { |
|||
const { redirect, path } = item |
|||
if (redirect) { |
|||
this.$router.push(redirect) |
|||
return |
|||
} |
|||
this.$router.push(this.pathCompile(path)) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import '../../styles/variables.scss'; |
|||
.app-breadcrumb.el-breadcrumb { |
|||
display: inline-block; |
|||
font-size: 14px; |
|||
line-height: $navHeight; |
|||
margin-left: 8px; |
|||
|
|||
.no-redirect { |
|||
color: #97a8be; |
|||
cursor: text; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,78 @@ |
|||
<template> |
|||
<div v-if="errorLogs.length>0"> |
|||
<el-badge :is-dot="true" style="line-height: 25px;margin-top: -5px;" @click.native="dialogTableVisible=true"> |
|||
<el-button style="padding: 8px 10px;" size="small" type="danger"> |
|||
<svg-icon icon-class="bug" /> |
|||
</el-button> |
|||
</el-badge> |
|||
|
|||
<el-dialog :visible.sync="dialogTableVisible" width="80%" append-to-body> |
|||
<div slot="title"> |
|||
<span style="padding-right: 10px;">Error Log</span> |
|||
<el-button size="mini" type="primary" icon="el-icon-delete" @click="clearAll">Clear All</el-button> |
|||
</div> |
|||
<el-table :data="errorLogs" border> |
|||
<el-table-column label="Message"> |
|||
<template slot-scope="{row}"> |
|||
<div> |
|||
<span class="message-title">Msg:</span> |
|||
<el-tag type="danger"> |
|||
{{ row.err.message }} |
|||
</el-tag> |
|||
</div> |
|||
<br> |
|||
<div> |
|||
<span class="message-title" style="padding-right: 10px;">Info: </span> |
|||
<el-tag type="warning"> |
|||
{{ row.vm.$vnode.tag }} error in {{ row.info }} |
|||
</el-tag> |
|||
</div> |
|||
<br> |
|||
<div> |
|||
<span class="message-title" style="padding-right: 16px;">Url: </span> |
|||
<el-tag type="success"> |
|||
{{ row.url }} |
|||
</el-tag> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="Stack"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.err.stack }} |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'ErrorLog', |
|||
data() { |
|||
return { |
|||
dialogTableVisible: false |
|||
} |
|||
}, |
|||
computed: { |
|||
errorLogs() { |
|||
return this.$store.getters.errorLogs |
|||
} |
|||
}, |
|||
methods: { |
|||
clearAll() { |
|||
this.dialogTableVisible = false |
|||
this.$store.dispatch('errorLog/clearErrorLog') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.message-title { |
|||
font-size: 16px; |
|||
color: #333; |
|||
font-weight: bold; |
|||
padding-right: 8px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,44 @@ |
|||
<template> |
|||
<div style="padding: 0 15px;" @click="toggleClick"> |
|||
<svg |
|||
:class="{'is-active':isActive}" |
|||
class="hamburger" |
|||
viewBox="0 0 1024 1024" |
|||
xmlns="http://www.w3.org/2000/svg" |
|||
width="64" |
|||
height="64" |
|||
> |
|||
<path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" /> |
|||
</svg> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'Hamburger', |
|||
props: { |
|||
isActive: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
methods: { |
|||
toggleClick() { |
|||
this.$emit('toggleClick') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.hamburger { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
width: 20px; |
|||
height: 20px; |
|||
} |
|||
|
|||
.hamburger.is-active { |
|||
transform: rotate(180deg); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,190 @@ |
|||
<template> |
|||
<div :class="{ show: show }" class="header-search"> |
|||
<svg-icon |
|||
class-name="search-icon" |
|||
icon-class="search" |
|||
@click.stop="click" |
|||
/> |
|||
<el-select |
|||
ref="headerSearchSelect" |
|||
v-model="search" |
|||
:remote-method="querySearch" |
|||
filterable |
|||
default-first-option |
|||
remote |
|||
placeholder="搜索导航栏" |
|||
class="header-search-select" |
|||
@change="change" |
|||
> |
|||
<el-option |
|||
v-for="item in options" |
|||
:key="item.path" |
|||
:value="item" |
|||
:label="item.title.join(' > ')" |
|||
/> |
|||
</el-select> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
// fuse is a lightweight fuzzy-search module |
|||
// make search results more in line with expectations |
|||
import Fuse from 'fuse.js' |
|||
import path from 'path' |
|||
|
|||
export default { |
|||
name: 'HeaderSearch', |
|||
data () { |
|||
return { |
|||
search: '', |
|||
options: [], |
|||
searchPool: [], |
|||
show: false, |
|||
fuse: undefined |
|||
} |
|||
}, |
|||
computed: { |
|||
routes () { |
|||
return this.$store.getters.permission_routes |
|||
} |
|||
}, |
|||
watch: { |
|||
routes () { |
|||
this.searchPool = this.generateRoutes(this.routes) |
|||
}, |
|||
searchPool (list) { |
|||
this.initFuse(list) |
|||
}, |
|||
show (value) { |
|||
if (value) { |
|||
document.body.addEventListener('click', this.close) |
|||
} else { |
|||
document.body.removeEventListener('click', this.close) |
|||
} |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.searchPool = this.generateRoutes(this.routes) |
|||
}, |
|||
methods: { |
|||
click () { |
|||
this.show = !this.show |
|||
if (this.show) { |
|||
this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus() |
|||
} |
|||
}, |
|||
close () { |
|||
this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.blur() |
|||
this.options = [] |
|||
this.show = false |
|||
}, |
|||
change (val) { |
|||
this.$router.push(val.path) |
|||
this.search = '' |
|||
this.options = [] |
|||
this.$nextTick(() => { |
|||
this.show = false |
|||
}) |
|||
}, |
|||
initFuse (list) { |
|||
this.fuse = new Fuse(list, { |
|||
shouldSort: true, |
|||
threshold: 0.4, |
|||
location: 0, |
|||
distance: 100, |
|||
maxPatternLength: 32, |
|||
minMatchCharLength: 1, |
|||
keys: [{ |
|||
name: 'title', |
|||
weight: 0.7 |
|||
}, { |
|||
name: 'path', |
|||
weight: 0.3 |
|||
}] |
|||
}) |
|||
}, |
|||
// Filter out the routes that can be displayed in the sidebar |
|||
// And generate the internationalized title |
|||
generateRoutes (routes, basePath = '/', prefixTitle = []) { |
|||
let res = [] |
|||
|
|||
for (const router of routes) { |
|||
// skip hidden router |
|||
if (router.hidden) { continue } |
|||
|
|||
const data = { |
|||
path: path.resolve(basePath, router.path), |
|||
title: [...prefixTitle] |
|||
} |
|||
|
|||
if (router.meta && router.meta.title) { |
|||
data.title = [...data.title, router.meta.title] |
|||
|
|||
if (router.redirect !== 'noRedirect') { |
|||
// only push the routes with title |
|||
// special case: need to exclude parent router without redirect |
|||
res.push(data) |
|||
} |
|||
} |
|||
|
|||
// recursive child routes |
|||
if (router.children) { |
|||
const tempRoutes = this.generateRoutes(router.children, data.path, data.title) |
|||
if (tempRoutes.length >= 1) { |
|||
res = [...res, ...tempRoutes] |
|||
} |
|||
} |
|||
} |
|||
return res |
|||
}, |
|||
querySearch (query) { |
|||
if (query !== '') { |
|||
this.options = this.fuse.search(query) |
|||
} else { |
|||
this.options = [] |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.header-search { |
|||
font-size: 0 !important; |
|||
|
|||
.search-icon { |
|||
cursor: pointer; |
|||
font-size: 18px; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
.header-search-select { |
|||
font-size: 18px; |
|||
transition: width 0.2s; |
|||
width: 0; |
|||
overflow: hidden; |
|||
background: transparent; |
|||
border-radius: 0; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
|
|||
::v-deep .el-input__inner { |
|||
border-radius: 0; |
|||
border: 0; |
|||
padding-left: 0; |
|||
padding-right: 0; |
|||
box-shadow: none !important; |
|||
border-bottom: 1px solid #d9d9d9; |
|||
vertical-align: middle; |
|||
background: transparent; |
|||
} |
|||
} |
|||
|
|||
&.show { |
|||
.header-search-select { |
|||
width: 210px; |
|||
margin-left: 10px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,337 @@ |
|||
<template> |
|||
<!-- v-if="errorLogs.length>0" --> |
|||
<div> |
|||
<el-dialog :visible.sync="dialogVisible" width="80%" top="8vh" append-to-body> |
|||
<div slot="title"> |
|||
<span style="padding-right: 10px;">消息列表</span> |
|||
</div> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="12"> |
|||
<el-table |
|||
v-loading="hasReadLoading" |
|||
:data="tableDataHasRead" |
|||
height="400" |
|||
style="width: 100%" |
|||
@sort-change="sortChange" |
|||
@row-click="handleRowHasReadClick" |
|||
> |
|||
<el-table-column |
|||
prop="title" |
|||
label="标题" |
|||
width="180" |
|||
align="center" |
|||
sortable="custom" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
<el-table-column |
|||
prop="hasRead" |
|||
label="状态" |
|||
align="center" |
|||
sortable="custom" |
|||
> |
|||
<template slot-scope="scope" > |
|||
<span v-if="scope.row.hasRead == true">已读</span> |
|||
<span v-else-if="scope.row.hasRead == false">未读</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="readTime" |
|||
label="已读时间" |
|||
width="180" |
|||
align="center" |
|||
sortable="custom" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
</el-table> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-table |
|||
v-loading="notReadLoading" |
|||
:data="tableData" |
|||
height="400" |
|||
style="width: 100%" |
|||
@sort-change="sortChange" |
|||
@row-click="handleRowClick" |
|||
> |
|||
<el-table-column |
|||
prop="title" |
|||
label="标题" |
|||
width="180" |
|||
align="center" |
|||
sortable="custom" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
<el-table-column |
|||
prop="hasRead" |
|||
label="状态" |
|||
align="center" |
|||
sortable="custom" |
|||
> |
|||
<template slot-scope="scope" > |
|||
<span v-if="scope.row.hasRead == true">已读</span> |
|||
<span v-else-if="scope.row.hasRead == false">未读</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="creationTime" |
|||
label="创建时间" |
|||
width="180" |
|||
align="center" |
|||
sortable="custom" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
</el-table> |
|||
</el-col> |
|||
</el-row> |
|||
<!-- <div class="Footer"> |
|||
<el-pagination |
|||
background |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page="queryInfo.currentPage" |
|||
:page-sizes="[10, 15, 20]" |
|||
:page-size="queryInfo.pagesize" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="total" |
|||
> |
|||
</el-pagination> |
|||
<el-button |
|||
type="primary" |
|||
size="mini" |
|||
style="margin-left: 10px; background-color: #409eff" |
|||
>确定</el-button |
|||
> |
|||
</div> --> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" @click="close">关 闭</el-button> |
|||
<!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> --> |
|||
</span> |
|||
<el-dialog |
|||
width="30%" |
|||
:title="details.titleDialog" |
|||
:visible.sync="innerVisible" |
|||
append-to-body> |
|||
<el-descriptions direction="vertical" :column="2" border v-loading="DialogLoading"> |
|||
<el-descriptions-item label="消息标题">{{details.title}}</el-descriptions-item> |
|||
<el-descriptions-item label="内容">{{details.content}}</el-descriptions-item> |
|||
<el-descriptions-item label="消息类别">{{details.messageType}}</el-descriptions-item> |
|||
<el-descriptions-item label="创建时间">{{details.sendTime}}</el-descriptions-item> |
|||
</el-descriptions> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" @click="innerVisible = false">关 闭</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { userNotifyNotReadList, userNotifyHasRead, userNotifyMessageUpdate, notifyMessage, getPageList } from "@/api/wms-api" |
|||
import { formatTimeStrToStr } from "@/utils/formatTime" |
|||
export default { |
|||
name: 'News', |
|||
data() { |
|||
return { |
|||
userId: '', |
|||
innerVisible: false, |
|||
details: { |
|||
titleDialog: '', |
|||
title: '', |
|||
content: '', |
|||
messageType: '', |
|||
sendTime: '' |
|||
}, |
|||
hasReadLoading: false, |
|||
notReadLoading: false, |
|||
DialogLoading: false, |
|||
//总条数 |
|||
total: 0, |
|||
//分页器 |
|||
queryInfo: { |
|||
//当前页数 |
|||
currentPage: 1, |
|||
//每页条数 |
|||
pagesize: 20, |
|||
Sorting: "", |
|||
}, |
|||
tableData: [], |
|||
tableDataHasRead:[], |
|||
} |
|||
}, |
|||
props:{ |
|||
dialogVisible: { |
|||
type: Boolean, |
|||
default: () => { |
|||
return false |
|||
} |
|||
}, |
|||
}, |
|||
computed: { |
|||
errorLogs() { |
|||
return this.$store.getters.errorLogs |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.userId = this.$store.getters.name.id |
|||
// todo-new: |
|||
// this.getList() |
|||
}, |
|||
methods: { |
|||
getList(){ |
|||
// --------未读列表------- |
|||
this.notReadLoading = true |
|||
userNotifyNotReadList(this.userId).then(res => { |
|||
this.tableData = res |
|||
this.tableData.forEach(item => { |
|||
if (item.creationTime) { |
|||
item.creationTime = formatTimeStrToStr(item.creationTime) |
|||
} |
|||
}) |
|||
this.notReadLoading = false |
|||
}).catch(err => { |
|||
console.log(err) |
|||
this.notReadLoading = false |
|||
}) |
|||
// --------已读列表------- |
|||
this.hasReadLoading = true |
|||
userNotifyHasRead(this.userId).then(res => { |
|||
this.tableDataHasRead = res |
|||
this.tableDataHasRead.forEach(item => { |
|||
if (item.readTime) { |
|||
item.readTime = formatTimeStrToStr(item.readTime) |
|||
} |
|||
}) |
|||
this.hasReadLoading = false |
|||
}).catch(err => { |
|||
console.log(err) |
|||
this.hasReadLoading = false |
|||
}) |
|||
|
|||
}, |
|||
//选择每页条数分页 |
|||
handleSizeChange(val) { |
|||
this.queryInfo.pagesize = val; |
|||
this.getList(); |
|||
}, |
|||
//选择当前页分页 |
|||
handleCurrentChange(val) { |
|||
this.queryInfo.currentPage = val; |
|||
this.getList(); |
|||
}, |
|||
//排序 |
|||
sortChange(data) { |
|||
const { prop, order } = data; |
|||
if (!prop || !order) { |
|||
this.queryInfo.Sorting = ""; |
|||
this.handleFilter(); |
|||
return; |
|||
} |
|||
this.queryInfo.Sorting = prop + " " + order; |
|||
this.handleFilter(); |
|||
}, |
|||
//点击table行渲染权限模板 |
|||
handleRowClick(row, column, event) { |
|||
let that = this |
|||
this.innerVisible = true |
|||
this.details.titleDialog = row.title |
|||
this.DialogLoading = true |
|||
notifyMessage({id: row.messageId}, row.messageId).then(res => { |
|||
this.details.title = res.title |
|||
this.details.content = res.content |
|||
this.details.messageType = res.messageType |
|||
this.details.sendTime = formatTimeStrToStr(res.sendTime) |
|||
// 查询消息类型对应数据 |
|||
let params = { |
|||
sorting: null, |
|||
maxResultCount: 1000, |
|||
skipCount: 0, |
|||
condition: { |
|||
filters: null |
|||
} |
|||
} |
|||
getPageList(params,'message/message-type').then(resType => { |
|||
resType.items.forEach(item => { |
|||
if (item.messageTypeCode == res.messageType) { |
|||
that.details.messageType = item.messageTypeName |
|||
} |
|||
}) |
|||
this.DialogLoading = false |
|||
}).catch(err => { |
|||
this.DialogLoading = false |
|||
console.log(err) |
|||
}) |
|||
userNotifyMessageUpdate(row.id).then(res => { |
|||
that.getList(); |
|||
that.$emit('getNoReadCount', that.userId) |
|||
}).catch(err => { |
|||
this.notReadLoading = false |
|||
console.log(err) |
|||
}) |
|||
|
|||
}).catch(err => { |
|||
console.log(err) |
|||
this.DialogLoading = false |
|||
}) |
|||
// this.$router.push('/taskManage/InspectJob') |
|||
}, |
|||
handleRowHasReadClick(row, column, event) { |
|||
let that = this |
|||
this.innerVisible = true |
|||
this.details.titleDialog = row.title |
|||
this.DialogLoading = true |
|||
notifyMessage({id: row.messageId}, row.messageId).then(res => { |
|||
this.details.title = res.title |
|||
this.details.content = res.content |
|||
this.details.messageType = res.messageType |
|||
this.details.sendTime = formatTimeStrToStr(res.sendTime) |
|||
// 查询消息类型对应数据 |
|||
let params = { |
|||
sorting: null, |
|||
maxResultCount: 1000, |
|||
skipCount: 0, |
|||
condition: { |
|||
filters: null |
|||
} |
|||
} |
|||
getPageList(params,'message/message-type').then(resType => { |
|||
resType.items.forEach(item => { |
|||
if (item.messageTypeCode == res.messageType) { |
|||
that.details.messageType = item.messageTypeName |
|||
} |
|||
}) |
|||
this.DialogLoading = false |
|||
}).catch(err => { |
|||
console.log(err) |
|||
this.DialogLoading = false |
|||
}) |
|||
}).catch(err => { |
|||
console.log(err) |
|||
this.DialogLoading = false |
|||
}) |
|||
}, |
|||
close() { |
|||
this.$emit('close') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.message-title { |
|||
font-size: 16px; |
|||
color: #333; |
|||
font-weight: bold; |
|||
padding-right: 8px; |
|||
} |
|||
.Footer { |
|||
padding: 40px 40px; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
::v-deep button { |
|||
background-color: #fff; |
|||
} |
|||
::v-deep .number { |
|||
background-color: #fff; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,64 @@ |
|||
<template> |
|||
<!-- v-if="errorLogs.length>0" --> |
|||
<div> |
|||
<el-badge v-if="this.noReadCount > 0" :value="this.noReadCount" :max="99" style="line-height: 10px;margin-right:10px" @click.native="dialogClick"> |
|||
<svg-icon icon-class="email" /> |
|||
</el-badge> |
|||
<svg-icon icon-class="email" v-if="this.noReadCount == 0" @click.native="dialogClick"/> |
|||
<dialogIndex :dialogVisible="dialogVisible" @close="close" @getNoReadCount="getNoReadCount"></dialogIndex> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { userNotifyHasRead, userNotifyNotReadList, userNotifyMessageUpdate, notifyMessage, getPageList } from "@/api/wms-api" |
|||
import dialogIndex from "@/components/News/dialogIndex" |
|||
import { updateVersion } from '@/utils/upDateVersion' |
|||
export default { |
|||
name: 'News', |
|||
data() { |
|||
return { |
|||
dialogVisible: false, |
|||
noReadCount: 0 |
|||
} |
|||
}, |
|||
components: { |
|||
dialogIndex |
|||
}, |
|||
mounted () { |
|||
this.userId = this.$store.getters.name.id |
|||
this.getNoReadCount(this.userId) |
|||
this.getSetInterval() |
|||
// 检测版本是否有更新 |
|||
updateVersion() |
|||
}, |
|||
methods: { |
|||
getSetInterval() { |
|||
let that = this |
|||
setInterval(function () { |
|||
that.getNoReadCount(that.userId) |
|||
// 检测版本是否有更新 |
|||
updateVersion() |
|||
},120000) |
|||
}, |
|||
getNoReadCount(userId) { |
|||
let that = this |
|||
// todo-new: |
|||
that.noReadCount = 0 |
|||
// userNotifyNotReadList(userId).then(res => { |
|||
// that.noReadCount = res.length |
|||
// }).catch(err => { |
|||
// console.log(err) |
|||
// }) |
|||
}, |
|||
dialogClick(){ |
|||
this.dialogVisible=true |
|||
}, |
|||
close() { |
|||
this.dialogVisible = false |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
</style> |
|||
|
|||
@ -0,0 +1,82 @@ |
|||
<template> |
|||
<div class="pagination elPaginationOuter"> |
|||
<el-pagination |
|||
background |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page="currentPage" |
|||
:page-sizes="trendTotalCount" |
|||
:page-size="pagesize" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="totalCount" |
|||
> |
|||
</el-pagination> |
|||
<el-button |
|||
class="goPageBtn" |
|||
type="primary" |
|||
size="mini" |
|||
>跳转</el-button> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
// import { setResultCount } from "@/utils/auth" |
|||
export default { |
|||
name: 'pagination', |
|||
props: { |
|||
totalCount: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
pagesizeProps: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
currentPageProps: { |
|||
type: Number, |
|||
default: 1 |
|||
} |
|||
}, |
|||
computed:{ |
|||
trendTotalCount(){ |
|||
return [20,50,100] |
|||
} |
|||
}, |
|||
watch:{ |
|||
currentPageProps(n,o){ |
|||
this.currentPage = n |
|||
} |
|||
}, |
|||
data () { |
|||
return { |
|||
currentPage: 1, |
|||
pagesize: 0 |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.pagesize = this.pagesizeProps |
|||
this.currentPage = this.currentPageProps |
|||
}, |
|||
methods: { |
|||
//每页最大条数改变提交emit |
|||
handleSizeChange (val) { |
|||
// setResultCount(val) |
|||
this.pagesize = val |
|||
this.$emit('SizeChange', val) |
|||
}, |
|||
//当前页改变提交emit |
|||
handleCurrentChange (val) { |
|||
this.currentPage = val |
|||
this.$emit('CurrentChange', val) |
|||
}, |
|||
} |
|||
|
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.goPageBtn{ |
|||
margin-left: 20px; |
|||
background: #e8f4ff; |
|||
color:#409EFF; |
|||
border:none |
|||
} |
|||
</style> |
|||
@ -0,0 +1,142 @@ |
|||
<template> |
|||
<div :style="{zIndex:zIndex,height:height,width:width}" class="pan-item"> |
|||
<div class="pan-info"> |
|||
<div class="pan-info-roles-container"> |
|||
<slot /> |
|||
</div> |
|||
</div> |
|||
<!-- eslint-disable-next-line --> |
|||
<div :style="{backgroundImage: `url(${image})`}" class="pan-thumb"></div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'PanThumb', |
|||
props: { |
|||
image: { |
|||
type: String, |
|||
required: true |
|||
}, |
|||
zIndex: { |
|||
type: Number, |
|||
default: 1 |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: '150px' |
|||
}, |
|||
height: { |
|||
type: String, |
|||
default: '150px' |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.pan-item { |
|||
width: 200px; |
|||
height: 200px; |
|||
border-radius: 50%; |
|||
display: inline-block; |
|||
position: relative; |
|||
cursor: default; |
|||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
.pan-info-roles-container { |
|||
padding: 20px; |
|||
text-align: center; |
|||
} |
|||
|
|||
.pan-thumb { |
|||
width: 100%; |
|||
height: 100%; |
|||
background-position: center center; |
|||
background-size: cover; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
position: absolute; |
|||
transform-origin: 95% 40%; |
|||
transition: all 0.3s ease-in-out; |
|||
} |
|||
|
|||
/* .pan-thumb:after { |
|||
content: ''; |
|||
width: 8px; |
|||
height: 8px; |
|||
position: absolute; |
|||
border-radius: 50%; |
|||
top: 40%; |
|||
left: 95%; |
|||
margin: -4px 0 0 -4px; |
|||
background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%); |
|||
box-shadow: 0 0 1px rgba(255, 255, 255, 0.9); |
|||
} */ |
|||
|
|||
.pan-info { |
|||
position: absolute; |
|||
width: inherit; |
|||
height: inherit; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05); |
|||
} |
|||
|
|||
.pan-info h3 { |
|||
color: #fff; |
|||
text-transform: uppercase; |
|||
position: relative; |
|||
letter-spacing: 2px; |
|||
font-size: 18px; |
|||
margin: 0 60px; |
|||
padding: 22px 0 0 0; |
|||
height: 85px; |
|||
font-family: 'Open Sans', Arial, sans-serif; |
|||
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3); |
|||
} |
|||
|
|||
.pan-info p { |
|||
color: #fff; |
|||
padding: 10px 5px; |
|||
font-style: italic; |
|||
margin: 0 30px; |
|||
font-size: 12px; |
|||
border-top: 1px solid rgba(255, 255, 255, 0.5); |
|||
} |
|||
|
|||
.pan-info p a { |
|||
display: block; |
|||
color: #333; |
|||
width: 80px; |
|||
height: 80px; |
|||
background: rgba(255, 255, 255, 0.3); |
|||
border-radius: 50%; |
|||
color: #fff; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
text-transform: uppercase; |
|||
font-size: 9px; |
|||
letter-spacing: 1px; |
|||
padding-top: 24px; |
|||
margin: 7px auto 0; |
|||
font-family: 'Open Sans', Arial, sans-serif; |
|||
opacity: 0; |
|||
transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s; |
|||
transform: translateX(60px) rotate(90deg); |
|||
} |
|||
|
|||
.pan-info p a:hover { |
|||
background: rgba(255, 255, 255, 0.5); |
|||
} |
|||
|
|||
.pan-item:hover .pan-thumb { |
|||
transform: rotate(-110deg); |
|||
} |
|||
|
|||
.pan-item:hover .pan-info p a { |
|||
opacity: 1; |
|||
transform: translateX(0px) rotate(0deg); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,149 @@ |
|||
<template> |
|||
<div ref="rightPanel" :class="{ show: show }" class="rightPanel-container"> |
|||
<div class="rightPanel-background" /> |
|||
<div class="rightPanel"> |
|||
<div |
|||
class="handle-button" |
|||
:style="{ top: buttonTop + 'px', 'background-color': theme }" |
|||
@click="show = !show" |
|||
> |
|||
<i :class="show?'el-icon-close':'el-icon-setting'" /> |
|||
</div> |
|||
<div class="rightPanel-items"> |
|||
<slot /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { addClass, removeClass } from '@/utils' |
|||
|
|||
export default { |
|||
name: 'RightPanel', |
|||
props: { |
|||
clickNotClose: { |
|||
default: false, |
|||
type: Boolean |
|||
}, |
|||
buttonTop: { |
|||
default: 250, |
|||
type: Number |
|||
} |
|||
}, |
|||
data () { |
|||
return { |
|||
show: false |
|||
} |
|||
}, |
|||
computed: { |
|||
theme () { |
|||
return this.$store.state.settings.theme |
|||
} |
|||
}, |
|||
watch: { |
|||
show (value) { |
|||
if (value && !this.clickNotClose) { |
|||
this.addEventClick() |
|||
} |
|||
if (value) { |
|||
addClass(document.body, 'showRightPanel') |
|||
} else { |
|||
removeClass(document.body, 'showRightPanel') |
|||
} |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.insertToBody() |
|||
}, |
|||
beforeDestroy () { |
|||
const elx = this.$refs.rightPanel |
|||
elx.remove() |
|||
}, |
|||
methods: { |
|||
addEventClick () { |
|||
window.addEventListener('click', this.closeSidebar) |
|||
}, |
|||
closeSidebar (evt) { |
|||
const parent = evt.target.closest('.rightPanel') |
|||
if (!parent) { |
|||
this.show = false |
|||
window.removeEventListener('click', this.closeSidebar) |
|||
} |
|||
}, |
|||
insertToBody () { |
|||
const elx = this.$refs.rightPanel |
|||
const body = document.querySelector('body') |
|||
body.insertBefore(elx, body.firstChild) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.showRightPanel { |
|||
overflow: hidden; |
|||
position: relative; |
|||
width: calc(100% - 15px); |
|||
} |
|||
</style> |
|||
|
|||
<style lang="scss" scoped> |
|||
.rightPanel-background { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
opacity: 0; |
|||
transition: opacity 0.3s cubic-bezier(0.7, 0.3, 0.1, 1); |
|||
background: rgba(0, 0, 0, 0.2); |
|||
z-index: -1; |
|||
} |
|||
|
|||
.rightPanel { |
|||
width: 100%; |
|||
max-width: 260px; |
|||
height: 100vh; |
|||
position: fixed; |
|||
top: 0; |
|||
right: 0; |
|||
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05); |
|||
transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1); |
|||
transform: translate(100%); |
|||
background: #fff; |
|||
z-index: 40000; |
|||
} |
|||
|
|||
.show { |
|||
transition: all 0.3s cubic-bezier(0.7, 0.3, 0.1, 1); |
|||
|
|||
.rightPanel-background { |
|||
z-index: 20000; |
|||
opacity: 1; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.rightPanel { |
|||
transform: translate(0); |
|||
} |
|||
} |
|||
|
|||
.handle-button { |
|||
width: 48px; |
|||
height: 48px; |
|||
position: absolute; |
|||
left: -48px; |
|||
text-align: center; |
|||
font-size: 24px; |
|||
border-radius: 6px 0 0 6px !important; |
|||
z-index: 0; |
|||
pointer-events: auto; |
|||
cursor: pointer; |
|||
color: #fff; |
|||
line-height: 48px; |
|||
i { |
|||
font-size: 24px; |
|||
line-height: 48px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,60 @@ |
|||
<template> |
|||
<div> |
|||
<svg-icon |
|||
:icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" |
|||
@click="click" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import screenfull from 'screenfull' |
|||
|
|||
export default { |
|||
name: 'Screenfull', |
|||
data () { |
|||
return { |
|||
isFullscreen: false |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.init() |
|||
}, |
|||
beforeDestroy () { |
|||
this.destroy() |
|||
}, |
|||
methods: { |
|||
click () { |
|||
if (!screenfull.enabled) { |
|||
this.$warningMsg('you browser can not work') |
|||
return false |
|||
} |
|||
screenfull.toggle() |
|||
}, |
|||
change () { |
|||
this.isFullscreen = screenfull.isFullscreen |
|||
}, |
|||
init () { |
|||
if (screenfull.enabled) { |
|||
screenfull.on('change', this.change) |
|||
} |
|||
}, |
|||
destroy () { |
|||
if (screenfull.enabled) { |
|||
screenfull.off('change', this.change) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.screenfull-svg { |
|||
display: inline-block; |
|||
cursor: pointer; |
|||
fill: #5a5e66; |
|||
width: 20px; |
|||
height: 20px; |
|||
vertical-align: 10px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,58 @@ |
|||
<template> |
|||
<el-dropdown trigger="click" @command="handleSetSize"> |
|||
<div> |
|||
<svg-icon class-name="size-icon" icon-class="size" /> |
|||
</div> |
|||
<el-dropdown-menu slot="dropdown"> |
|||
<el-dropdown-item |
|||
v-for="item of sizeOptions" |
|||
:key="item.value" |
|||
:disabled="size === item.value" |
|||
:command="item.value" |
|||
> |
|||
{{ item.label }} |
|||
</el-dropdown-item> |
|||
</el-dropdown-menu> |
|||
</el-dropdown> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data () { |
|||
return { |
|||
sizeOptions: [ |
|||
{ label: 'Default', value: 'default' }, |
|||
{ label: 'Medium', value: 'medium' }, |
|||
{ label: 'Small', value: 'small' }, |
|||
{ label: 'Mini', value: 'mini' } |
|||
] |
|||
} |
|||
}, |
|||
computed: { |
|||
size () { |
|||
return this.$store.getters.size |
|||
} |
|||
}, |
|||
methods: { |
|||
handleSetSize (size) { |
|||
this.$ELEMENT.size = size |
|||
this.$store.dispatch('app/setSize', size) |
|||
this.refreshView() |
|||
this.$successMsg('Switch Size Success') |
|||
}, |
|||
refreshView () { |
|||
// In order to make the cached page re-rendered |
|||
this.$store.dispatch('tagsView/delAllCachedViews', this.$route) |
|||
|
|||
const { fullPath } = this.$route |
|||
|
|||
this.$nextTick(() => { |
|||
this.$router.replace({ |
|||
path: '/redirect' + fullPath |
|||
}) |
|||
}) |
|||
} |
|||
} |
|||
|
|||
} |
|||
</script> |
|||
@ -0,0 +1,654 @@ |
|||
<template> |
|||
<el-dialog |
|||
:title="formTitle" |
|||
v-if="displayDialog.newDialog" |
|||
:visible="true" |
|||
:fullscreen="true" |
|||
:append-to-body="false" |
|||
:modal="false" |
|||
:modal-append-to-body="false" |
|||
:show-close="false" |
|||
> |
|||
<div id="stepsForm"> |
|||
<el-steps |
|||
:active="active" |
|||
process-status="finish" |
|||
finish-status="success" |
|||
:align-center="true" |
|||
> |
|||
<el-step |
|||
v-for="(item, index) in stepFilters" |
|||
:key="index" |
|||
:title="item" |
|||
></el-step> |
|||
</el-steps> |
|||
<!-- "总体信息" --> |
|||
<curren-Form |
|||
v-if="active == 0" |
|||
class="page1" |
|||
size="medium" |
|||
ref="page1" |
|||
:searchData="CreateFormData" |
|||
:searchForm="CreateForm" |
|||
:searchOptions="Options" |
|||
:searchHandle="editHandle" |
|||
:rules="Rules" |
|||
:loading="loading" |
|||
@push="DataPush(arguments)" |
|||
@submitForm="editFormClick(arguments)" |
|||
> |
|||
</curren-Form> |
|||
<!-- "物品参数" --> |
|||
<searchPage |
|||
ref="searchTable" |
|||
:tableLoading="tableLoading" |
|||
:advancedFilter="advancedFilter( |
|||
'basedata/item-basic', |
|||
pageListItemBasic, |
|||
'totalCountItemBasic', |
|||
'itemBasicData', |
|||
oldSkipCountItemBasic |
|||
)" |
|||
:filterPageListParams="[]" |
|||
:formTitle="''" |
|||
:displayDialog="active == 1" |
|||
:selectionTable="false" |
|||
:editHandle="editHandle" |
|||
:searchTableData="locationData" |
|||
:searchTableColumns="$isTableColumns.Location" |
|||
:searchTotalCount="totalCountLocation" |
|||
:supplierItemPage="pageListLocation" |
|||
@SizeChange="AddNewAlterResultCount( |
|||
$event, |
|||
'basedata/item-basic', |
|||
pageListItemBasic, |
|||
'totalCountItemBasic', |
|||
'itemBasicData', |
|||
oldSkipCountItemBasic |
|||
)" |
|||
@CurrentChange="AddNewAlertoldSkipCount( |
|||
$event, |
|||
'basedata/item-basic', |
|||
pageListItemBasic, |
|||
'totalCountItemBasic', |
|||
'itemBasicData', |
|||
oldSkipCountItemBasic |
|||
)" |
|||
@tableButtonClick="addFormData(arguments)" |
|||
></searchPage> |
|||
<!-- "库位参数" --> |
|||
<searchPage |
|||
ref="searchTable" |
|||
:tableLoading="tableLoading" |
|||
:advancedFilter="advancedFilter( |
|||
'basedata/location', |
|||
pageListLocation, |
|||
'totalCountLocation', |
|||
'locationData', |
|||
oldSkipCountLocation |
|||
)" |
|||
:filterPageListParams="[]" |
|||
:formTitle="''" |
|||
:displayDialog="active == 2" |
|||
:selectionTable="false" |
|||
:editHandle="editHandle" |
|||
:searchTableData="locationData" |
|||
:searchTableColumns="$isTableColumns.Location" |
|||
:searchTotalCount="totalCountLocation" |
|||
:supplierItemPage="pageListLocation" |
|||
@SizeChange="AddNewAlterResultCount( |
|||
$event, |
|||
'basedata/location', |
|||
pageListLocation, |
|||
'totalCountLocation', |
|||
'locationData', |
|||
oldSkipCountLocation |
|||
)" |
|||
@CurrentChange="AddNewAlertoldSkipCount( |
|||
$event, |
|||
'basedata/location', |
|||
pageListLocation, |
|||
'totalCountLocation', |
|||
'locationData', |
|||
oldSkipCountLocation |
|||
)" |
|||
@tableButtonClick="addFormData(arguments)" |
|||
></searchPage> |
|||
<!-- "其他参数" --> |
|||
<curren-Form |
|||
v-loading="loading" |
|||
v-if="active == 3" |
|||
class="page1" |
|||
size="medium" |
|||
ref="page1" |
|||
:searchData="other" |
|||
:searchForm="otherForm" |
|||
:searchOptions="Options" |
|||
:searchHandle="editHandle" |
|||
:rules="Rules" |
|||
:loading="loading" |
|||
@push="DataPush(arguments)" |
|||
@submitForm="editFormClick(arguments)" |
|||
> |
|||
</curren-Form> |
|||
<!-- <curren-Form |
|||
v-if="active === 4" |
|||
size="medium" |
|||
class="page3" |
|||
:searchData="previewFormData" |
|||
:searchForm="CreateForm | formData" |
|||
:searchHandle="editHandle" |
|||
:rules="Rules" |
|||
:loading="loading" |
|||
@submitForm="editFormClick(arguments)" |
|||
> |
|||
<template> |
|||
<el-form-item class="formTable-box" prop="details"> |
|||
<currenTable |
|||
:tableData="previewFormData.details" |
|||
:tableColumns="detailsTableColumns | formDataDetails" |
|||
:selectionTable="false" |
|||
> |
|||
</currenTable> |
|||
</el-form-item> |
|||
</template> |
|||
</curren-Form> --> |
|||
<!-- "结果" --> |
|||
<div |
|||
v-if="active === step.length - 1 && pageStatus === 'success'" |
|||
class="page4" |
|||
> |
|||
<el-result icon="success" title="成功提示" subTitle="新增成功"> |
|||
<template slot="extra"> |
|||
<!-- <el-button type="primary" size="medium" @click="tuoFormPrint" |
|||
>打印托标签</el-button |
|||
> |
|||
<el-button type="primary" size="medium" @click="xbqFormPrint" |
|||
>打印箱标签</el-button |
|||
> --> |
|||
<el-button |
|||
v-for="item in successHandle" |
|||
:key="item.label" |
|||
:type="item.type" |
|||
size="medium" |
|||
@click="item.click()" |
|||
>{{ item.label }}</el-button |
|||
> |
|||
<el-button type="primary" size="medium" @click="close(1)" |
|||
>退出</el-button |
|||
> |
|||
</template> |
|||
</el-result> |
|||
</div> |
|||
<div |
|||
v-if="active === step.length - 1 && pageStatus === 'error'" |
|||
class="page4" |
|||
> |
|||
<el-result icon="error" title="错误提示" subTitle="新增失败"> |
|||
<template slot="extra"> |
|||
<el-button type="primary" size="medium" @click="close(1)" |
|||
>退出</el-button |
|||
> |
|||
</template> |
|||
</el-result> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
<script> |
|||
import currenForm from "@/components/currenForm"; |
|||
import currenTable from "@/components/currenTable"; |
|||
import { |
|||
getPageList, |
|||
postCreateWithCondition, |
|||
postCreate, |
|||
} from "@/api/wms-api"; |
|||
export default { |
|||
name: "stepsForm", |
|||
components: { |
|||
currenForm, |
|||
currenTable, |
|||
}, |
|||
watch: { |
|||
active(val) { |
|||
if (val != 0) { |
|||
this.editHandle[0].label = "上一步"; |
|||
} else { |
|||
this.editHandle[0].label = "取消"; |
|||
} |
|||
}, |
|||
}, |
|||
filters: { |
|||
formData(val) { |
|||
let data = JSON.parse(JSON.stringify(val)); |
|||
val.forEach((key, index) => { |
|||
data[index].disabled = "true"; |
|||
delete data[index].focus; |
|||
if (key.type == "autocomplete" || key.type == "import") { |
|||
data[index].type = "input"; |
|||
} |
|||
}); |
|||
return data; |
|||
}, |
|||
formDataDetails(val) { |
|||
let data = JSON.parse(JSON.stringify(val)); |
|||
val.forEach((key, index) => { |
|||
data[index].disabled = "true"; |
|||
delete data[index].focus; |
|||
delete data[index].rules; |
|||
if (key.type == "autocomplete" || key.type == "import") { |
|||
data[index].type = "input"; |
|||
} else if (key.type == "objectAutocomplete") { |
|||
data[index].type = "objectInput"; |
|||
} else if (key.prop == "containerCode") data[index].disabled = "false"; |
|||
}); |
|||
return data; |
|||
}, |
|||
}, |
|||
props: { |
|||
//名称 |
|||
formTitle: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
//是否弹窗 |
|||
displayDialog: { |
|||
type: Object, |
|||
default: () => { |
|||
return { |
|||
newDialog: false, |
|||
}; |
|||
}, |
|||
}, |
|||
//主表提交数据 |
|||
CreateFormData: { |
|||
type: Object, |
|||
default: () => { |
|||
return {}; |
|||
}, |
|||
}, |
|||
//主表显示form |
|||
CreateForm: { |
|||
type: Array, |
|||
default: () => { |
|||
return []; |
|||
}, |
|||
}, |
|||
//预览数据 |
|||
// previewFormData: { |
|||
// type: Object, |
|||
// default: () => { |
|||
// return {} |
|||
// } |
|||
// }, |
|||
//检验 |
|||
Rules: { |
|||
type: Object, |
|||
default: () => { |
|||
return {}; |
|||
}, |
|||
}, |
|||
//下拉选择 |
|||
Options: { |
|||
type: Object, |
|||
default: () => { |
|||
return {}; |
|||
}, |
|||
}, |
|||
//子表table显示 |
|||
detailsTableColumns: { |
|||
type: Array, |
|||
default: () => { |
|||
return []; |
|||
}, |
|||
}, |
|||
//子表提交数据 |
|||
childTableData: { |
|||
type: Array, |
|||
default: () => { |
|||
return []; |
|||
}, |
|||
}, |
|||
//成功后的操作 |
|||
successHandle: { |
|||
type: Array, |
|||
default: () => { |
|||
return []; |
|||
}, |
|||
}, |
|||
}, |
|||
computed: { |
|||
stepFilters() { |
|||
let stepFilters = []; |
|||
const routeName = this.$route.meta.title; |
|||
this.step.forEach((key) => { |
|||
stepFilters.push(routeName.concat(key)); |
|||
}); |
|||
return stepFilters; |
|||
}, |
|||
// autoAdvanced () { |
|||
// if (this.active == 1) { |
|||
// return this.advancedFilter( |
|||
// 'item-basic', |
|||
// this.pageListItemBasic, |
|||
// 'totalCountItemBasic', |
|||
// 'itemBasicData', |
|||
// this.oldSkipCountItemBasic |
|||
// ) |
|||
// } else if (this.active == 2) { |
|||
// return this.advancedFilter( |
|||
// 'location', |
|||
// this.pageListLocation, |
|||
// 'totalCountLocation', |
|||
// 'locationData', |
|||
// this.oldSkipCountLocation |
|||
// ) |
|||
// } |
|||
// }, |
|||
}, |
|||
data() { |
|||
return { |
|||
active: 0, |
|||
formReveal: 1, |
|||
pageStatus: "", |
|||
filterListParams: [], |
|||
itemBasicData: [], |
|||
isItemBasicData: [], |
|||
previewFormData: [], |
|||
totalCountItemBasic: 0, |
|||
oldSkipCountItemBasic: 1, |
|||
pageListItemBasic: { |
|||
condition: { |
|||
filters: [], |
|||
}, |
|||
Sorting: "", |
|||
SkipCount: 0, |
|||
MaxResultCount: 100, |
|||
}, |
|||
locationData: [], |
|||
isLocationData: [], |
|||
totalCountLocation: 0, |
|||
oldSkipCountLocation: 1, |
|||
pageListLocation: { |
|||
condition: { |
|||
filters: [], |
|||
}, |
|||
Sorting: "", |
|||
SkipCount: 0, |
|||
MaxResultCount: 100, |
|||
}, |
|||
other: { |
|||
otherParam: [], |
|||
}, |
|||
otherForm: [ |
|||
{ |
|||
label: "状态", |
|||
prop: "otherParam", |
|||
type: "checkbox", |
|||
indeterminate:"true", |
|||
checkboxs: "radios", |
|||
}, |
|||
], |
|||
otherFormData: { |
|||
countMethod: 0, |
|||
// type: 0,//盘点类型 |
|||
company: null, |
|||
description: null, |
|||
// beginTime: null, |
|||
// endTime: null, |
|||
planTime: null, |
|||
partCondition: {}, |
|||
locCondition: {}, |
|||
statusList: [], |
|||
worker: null, |
|||
warehouseCode: null, |
|||
remark: null, |
|||
}, |
|||
loading: false, |
|||
tableLoading: false, |
|||
session: null, |
|||
step: ["总体信息", "物品参数", "库位参数", "其他参数", "结果"], |
|||
editHandle: [ |
|||
{ label: "取消", name: "cancel" }, |
|||
{ label: "下一步", type: "primary", name: "determine" }, |
|||
], |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.session = JSON.parse(JSON.stringify(this.CreateFormData)); |
|||
}, |
|||
methods: { |
|||
//结束退出 |
|||
close(val) { |
|||
this.active = 0; |
|||
const filter ={ |
|||
condition: { |
|||
filters: [], |
|||
}, |
|||
Sorting: "", |
|||
SkipCount: 0, |
|||
MaxResultCount: 100, |
|||
} |
|||
this.pageListItemBasic = JSON.parse(JSON.stringify(filter)) |
|||
this.pageListLocation = JSON.parse(JSON.stringify(filter)) |
|||
const data = JSON.parse(JSON.stringify(this.session)); |
|||
this.itemBasicData = [] |
|||
this.locationData = [] |
|||
this.$emit("close", data, val); |
|||
}, |
|||
//autoComplete主表 |
|||
DataPush(val) { |
|||
this.$emit("DataPush", val); |
|||
}, |
|||
//autoComplete子表 |
|||
detailsDataPush(val) { |
|||
this.$emit("detailsDataPush", val); |
|||
}, |
|||
//确定筛选 |
|||
advancedFilter(url, list, TotalCount, data, oldSkipCount) { |
|||
return () => { |
|||
list.SkipCount = (oldSkipCount - 1) * list.MaxResultCount; |
|||
this.tableLoading = true; |
|||
getPageList(list, url) |
|||
.then((res) => { |
|||
this[data] = res.items; |
|||
this[TotalCount] = res.totalCount; |
|||
this.tableLoading = false; |
|||
}) |
|||
.catch(() => { |
|||
this.tableLoading = false; |
|||
}); |
|||
}; |
|||
}, |
|||
//选择子表(接收分页组件emit改变每页最大页数) |
|||
AddNewAlterResultCount(val, url, list, TotalCount, data, oldSkipCount) { |
|||
list.MaxResultCount = val; |
|||
const Function = this.advancedFilter( |
|||
url, |
|||
list, |
|||
TotalCount, |
|||
data, |
|||
oldSkipCount |
|||
); |
|||
Function(); |
|||
}, |
|||
//选择子表(接收分页组件emit改变当前页) |
|||
AddNewAlertoldSkipCount(val, url, list, TotalCount, data, oldSkipCount) { |
|||
oldSkipCount = val; |
|||
const Function = this.advancedFilter( |
|||
url, |
|||
list, |
|||
TotalCount, |
|||
data, |
|||
oldSkipCount |
|||
); |
|||
Function(); |
|||
}, |
|||
//打印托标签 |
|||
tuoFormPrint() { |
|||
this.$emit("tuoFormPrint"); |
|||
}, |
|||
//打印箱标签 |
|||
xbqFormPrint() { |
|||
this.$emit("xbqFormPrint"); |
|||
}, |
|||
// //添加封装 |
|||
// addNew (url, list, TotalCount, data, MaxResultItem) { |
|||
// list.SkipCount = 0 |
|||
// list.MaxResultCount = JSON.parse(TotalCount) |
|||
// getPageList(list, url).then((res) => { |
|||
// this[data] = res.items |
|||
// list.MaxResultCount = MaxResultItem |
|||
// }) |
|||
// }, |
|||
//添加明细 |
|||
addFormData(val) { |
|||
if (val[0] == "cancel") { |
|||
this.active--; |
|||
} else { |
|||
if (this.active == 1) { |
|||
const MaxResultItem = JSON.parse( |
|||
this.pageListItemBasic.MaxResultCount |
|||
); |
|||
// this.addNew('item-basic', this.pageListItemBasic, this.totalCountItemBasic, 'isItemBasicData', MaxResultItem) |
|||
// this.pageListItemBasic.MaxResultCount = MaxResultItem |
|||
const Function = this.advancedFilter( |
|||
"basedata/location", |
|||
this.pageListLocation, |
|||
"totalCountLocation", |
|||
"locationData", |
|||
this.oldSkipCountLocation |
|||
); |
|||
Function(); |
|||
this.$nextTick(()=>{ |
|||
this.active++; |
|||
}) |
|||
} else if (this.active == 2) { |
|||
const MaxResultLocation = JSON.parse( |
|||
this.pageListLocation.MaxResultCount |
|||
); |
|||
// this.addNew('location', this.pageListLocation, this.totalCountLocation, 'isLocationData', MaxResultLocation) |
|||
// this.pageListLocation.MaxResultCount = MaxResultLocation |
|||
this.active++; |
|||
} |
|||
} |
|||
}, |
|||
//拆分 |
|||
splitFormData(val) { |
|||
return new Promise((resolve, reject) => { |
|||
postCreateWithCondition(val, "wms/store/count-plan") |
|||
.then((res) => { |
|||
this.previewFormData = JSON.parse( |
|||
JSON.stringify(this.CreateFormData) |
|||
); |
|||
// delete this.previewFormData.details |
|||
this.$listAssign(this.previewFormData, res); |
|||
this.previewFormData.details = []; |
|||
res.details.forEach((item) => { |
|||
const details = JSON.parse( |
|||
JSON.stringify(...this.childTableData) |
|||
); |
|||
this.$listAssign(details, item); |
|||
this.previewFormData.details.push(details); |
|||
}); |
|||
resolve(); |
|||
}) |
|||
.catch((err) => { |
|||
reject(); |
|||
}); |
|||
}); |
|||
}, |
|||
editFormClick(val) { |
|||
// Moment(this.CreateFormData.arriveTime).format() |
|||
if (val[0] == 0) { |
|||
if (this.active == 0) { |
|||
this.close(0); |
|||
} else { |
|||
this.active--; |
|||
} |
|||
} else { |
|||
val[1].validate((valid) => { |
|||
if (valid) { |
|||
if (this.active == 0) { |
|||
const Function = this.advancedFilter( |
|||
"basedata/item-basic", |
|||
this.pageListItemBasic, |
|||
"totalCountItemBasic", |
|||
"itemBasicData", |
|||
this.oldSkipCountItemBasic |
|||
); |
|||
Function(); |
|||
this.active++; |
|||
} else if (this.active == 3) { |
|||
this.$listAssign(this.otherFormData, this.CreateFormData); |
|||
this.otherFormData.partCondition = |
|||
this.pageListItemBasic.condition; |
|||
this.otherFormData.locCondition = this.pageListLocation.condition; |
|||
this.otherFormData.statusList = []; |
|||
let checkboxArray = [] |
|||
this.other.otherParam.forEach(item => { |
|||
if (item == '待检') { |
|||
checkboxArray.push(1) |
|||
} else if (item == '合格') { |
|||
checkboxArray.push(2) |
|||
} else if (item == '不合格') { |
|||
checkboxArray.push(3) |
|||
} else if (item == '隔离') { |
|||
checkboxArray.push(4) |
|||
} else if (item == '破坏') { |
|||
checkboxArray.push(5) |
|||
} else if (item == '冻结') { |
|||
checkboxArray.push(6) |
|||
} |
|||
}) |
|||
// 待检', '合格', '不合格', '隔离', '破坏', '冻结' |
|||
this.otherFormData.statusList = checkboxArray; |
|||
this.otherFormData.vendCondition = { |
|||
filters:[] |
|||
} |
|||
this.loading = true; |
|||
this.otherFormData.requestType = 2 |
|||
this.splitFormData(this.otherFormData).then( |
|||
(resolve) => { |
|||
this.pageStatus = "success"; |
|||
this.active++; |
|||
this.loading = false; |
|||
}, |
|||
(reject) => { |
|||
this.pageStatus = "error"; |
|||
this.active++; |
|||
this.loading = false; |
|||
} |
|||
); |
|||
} |
|||
// else if (this.active == 4) { |
|||
// postCreate(this.previewFormData, 'count-plan').then(res => { |
|||
// this.pageStatus = 'success' |
|||
// this.active++ |
|||
// this.loading = false |
|||
// }).catch(err => { |
|||
// this.pageStatus = 'error' |
|||
// this.active++ |
|||
// this.loading = false |
|||
// }) |
|||
// } |
|||
else { |
|||
this.$errorMsg("请检查表单"); |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "./style/index.scss"; |
|||
</style> |
|||
<style lang="scss"> |
|||
#stepsForm{ |
|||
.formButton{ |
|||
text-align: right; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,723 @@ |
|||
<template> |
|||
<el-dialog |
|||
:title="formTitle" |
|||
v-if="displayDialog.newDialog" |
|||
:visible="true" |
|||
:fullscreen="true" |
|||
:append-to-body="false" |
|||
:modal="false" |
|||
:modal-append-to-body="false" |
|||
:show-close="false" |
|||
> |
|||
<div id="stepsForm"> |
|||
<el-steps |
|||
:active="active" |
|||
process-status="finish" |
|||
finish-status="success" |
|||
:align-center="true" |
|||
> |
|||
<el-step |
|||
v-for="(item, index) in stepFilters" |
|||
:key="index" |
|||
:title="item" |
|||
></el-step> |
|||
</el-steps> |
|||
<!-- 总体信息 --> |
|||
<curren-Form |
|||
v-if="active == 0" |
|||
class="page1" |
|||
size="medium" |
|||
ref="page1" |
|||
:searchData="CreateFormData" |
|||
:searchForm="CreateForm" |
|||
:searchOptions="Options" |
|||
:searchHandle="editHandle" |
|||
:rules="Rules" |
|||
:loading="loading" |
|||
@push="DataPush(arguments)" |
|||
@submitForm="editFormClick(arguments)" |
|||
> |
|||
</curren-Form> |
|||
<!-- 库位参数 --> |
|||
<!-- 搜索按钮——窗体组件LocationForPADPlan --> |
|||
<searchPage |
|||
v-if="active == 1" |
|||
@sxBtnClickHandle="sxBtnClickHandle" |
|||
ref="searchTable" |
|||
:tableLoading="tableLoading" |
|||
:filterActionOptions="filterActionOptions" |
|||
:advancedFilter="advancedFilter( |
|||
'basedata/location', |
|||
pageListLocation, |
|||
'totalCountLocation', |
|||
'locationData', |
|||
oldSkipCountLocation |
|||
)" |
|||
:setUTableHeight="355" |
|||
:filterPageListParams="[]" |
|||
:formTitle="''" |
|||
:displayDialog="active == 1" |
|||
:selectionTable="false" |
|||
:editHandle="editHandle" |
|||
:buttonsAllIsRight="true" |
|||
:searchTableData="locationData" |
|||
:searchTableColumns="initSearchPageTableColums()" |
|||
:searchTotalCount="totalCountLocation" |
|||
:supplierItemPage="pageListLocation" |
|||
@SizeChange="AddNewAlterResultCount( |
|||
$event, |
|||
'basedata/location', |
|||
pageListLocation, |
|||
'totalCountLocation', |
|||
'locationData', |
|||
oldSkipCountLocation |
|||
)" |
|||
@CurrentChange="AddNewAlertoldSkipCount( |
|||
$event, |
|||
'basedata/location', |
|||
pageListLocation, |
|||
'totalCountLocation', |
|||
'locationData', |
|||
oldSkipCountLocation |
|||
)" |
|||
@tableButtonClick="addFormData(arguments)" |
|||
></searchPage> |
|||
<!-- @filterBtnClickHandle="filterBtnClickHandle" --> |
|||
<!-- 其他参数 --> |
|||
<curren-Form |
|||
v-loading="loading" |
|||
v-if="active == 2" |
|||
class="page1" |
|||
size="medium" |
|||
ref="page1" |
|||
:searchData="other" |
|||
:searchForm="otherForm" |
|||
:searchOptions="Options" |
|||
:searchHandle="editHandle" |
|||
:rules="Rules" |
|||
:loading="loading" |
|||
@push="DataPush(arguments)" |
|||
@submitForm="editFormClick(arguments)" |
|||
> |
|||
</curren-Form> |
|||
<!-- <curren-Form |
|||
v-if="active === 4" |
|||
size="medium" |
|||
class="page3" |
|||
:searchData="previewFormData" |
|||
:searchForm="CreateForm | formData" |
|||
:searchHandle="editHandle" |
|||
:rules="Rules" |
|||
:loading="loading" |
|||
@submitForm="editFormClick(arguments)" |
|||
> |
|||
<template> |
|||
<el-form-item class="formTable-box" prop="details"> |
|||
<currenTable |
|||
:tableData="previewFormData.details" |
|||
:tableColumns="detailsTableColumns | formDataDetails" |
|||
:selectionTable="false" |
|||
> |
|||
</currenTable> |
|||
</el-form-item> |
|||
</template> |
|||
</curren-Form> --> |
|||
<div |
|||
v-if="active === step.length - 1 && pageStatus === 'success'" |
|||
class="page4" |
|||
> |
|||
<el-result icon="success" title="成功提示" subTitle="新增成功"> |
|||
<template slot="extra"> |
|||
<!-- <el-button type="primary" size="medium" @click="tuoFormPrint" |
|||
>打印托标签</el-button |
|||
> |
|||
<el-button type="primary" size="medium" @click="xbqFormPrint" |
|||
>打印箱标签</el-button |
|||
> --> |
|||
<el-button |
|||
v-for="item in successHandle" |
|||
:key="item.label" |
|||
:type="item.type" |
|||
size="medium" |
|||
@click="item.click()" |
|||
>{{ item.label }}</el-button |
|||
> |
|||
<el-button type="primary" size="medium" @click="close(1)" |
|||
>退出</el-button |
|||
> |
|||
</template> |
|||
</el-result> |
|||
</div> |
|||
<div |
|||
v-if="active === step.length - 1 && pageStatus === 'error'" |
|||
class="page4" |
|||
> |
|||
<el-result icon="error" title="错误提示" subTitle="新增失败"> |
|||
<template slot="extra"> |
|||
<el-button type="primary" size="medium" @click="close(1)" |
|||
>退出</el-button |
|||
> |
|||
</template> |
|||
</el-result> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
<script> |
|||
import currenForm from "@/components/currenForm"; |
|||
import currenTable from "@/components/currenTable"; |
|||
import { |
|||
getPageList, |
|||
postCreateWithCondition, |
|||
postCreate, |
|||
} from "@/api/wms-api"; |
|||
export default { |
|||
name: "stepsForm", |
|||
components: { |
|||
currenForm, |
|||
currenTable, |
|||
}, |
|||
watch: { |
|||
active(val) { |
|||
if (val != 0) { |
|||
this.editHandle[0].label = "上一步"; |
|||
} else { |
|||
this.editHandle[0].label = "取消"; |
|||
} |
|||
}, |
|||
}, |
|||
filters: { |
|||
formData(val) { |
|||
let data = JSON.parse(JSON.stringify(val)); |
|||
val.forEach((key, index) => { |
|||
data[index].disabled = "true"; |
|||
delete data[index].focus; |
|||
if (key.type == "autocomplete" || key.type == "import") { |
|||
data[index].type = "input"; |
|||
} |
|||
}); |
|||
return data; |
|||
}, |
|||
formDataDetails(val) { |
|||
let data = JSON.parse(JSON.stringify(val)); |
|||
val.forEach((key, index) => { |
|||
data[index].disabled = "true"; |
|||
delete data[index].focus; |
|||
delete data[index].rules; |
|||
if (key.type == "autocomplete" || key.type == "import") { |
|||
data[index].type = "input"; |
|||
} else if (key.type == "objectAutocomplete") { |
|||
data[index].type = "objectInput"; |
|||
} else if (key.prop == "containerCode") data[index].disabled = "false"; |
|||
}); |
|||
return data; |
|||
}, |
|||
}, |
|||
props: { |
|||
//名称 |
|||
formTitle: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
//是否弹窗 |
|||
displayDialog: { |
|||
type: Object, |
|||
default: () => { |
|||
return { |
|||
newDialog: false, |
|||
}; |
|||
}, |
|||
}, |
|||
//主表提交数据 |
|||
CreateFormData: { |
|||
type: Object, |
|||
default: () => { |
|||
return {}; |
|||
}, |
|||
}, |
|||
//主表显示form |
|||
CreateForm: { |
|||
type: Array, |
|||
default: () => { |
|||
return []; |
|||
}, |
|||
}, |
|||
//预览数据 |
|||
// previewFormData: { |
|||
// type: Object, |
|||
// default: () => { |
|||
// return {} |
|||
// } |
|||
// }, |
|||
//检验 |
|||
Rules: { |
|||
type: Object, |
|||
default: () => { |
|||
return {}; |
|||
}, |
|||
}, |
|||
//下拉选择 |
|||
Options: { |
|||
type: Object, |
|||
default: () => { |
|||
return {}; |
|||
}, |
|||
}, |
|||
//子表table显示 |
|||
detailsTableColumns: { |
|||
type: Array, |
|||
default: () => { |
|||
return []; |
|||
}, |
|||
}, |
|||
//子表提交数据 |
|||
childTableData: { |
|||
type: Array, |
|||
default: () => { |
|||
return []; |
|||
}, |
|||
}, |
|||
//成功后的操作 |
|||
successHandle: { |
|||
type: Array, |
|||
default: () => { |
|||
return []; |
|||
}, |
|||
}, |
|||
}, |
|||
computed: { |
|||
stepFilters() { |
|||
let stepFilters = []; |
|||
const routeName = this.$route.meta.title; |
|||
this.step.forEach((key) => { |
|||
stepFilters.push(routeName.concat(key)); |
|||
}); |
|||
return stepFilters; |
|||
}, |
|||
// autoAdvanced () { |
|||
// if (this.active == 1) { |
|||
// return this.advancedFilter( |
|||
// 'item-basic', |
|||
// this.pageListItemBasic, |
|||
// 'totalCountItemBasic', |
|||
// 'itemBasicData', |
|||
// this.oldSkipCountItemBasic |
|||
// ) |
|||
// } else if (this.active == 2) { |
|||
// return this.advancedFilter( |
|||
// 'location', |
|||
// this.pageListLocation, |
|||
// 'totalCountLocation', |
|||
// 'locationData', |
|||
// this.oldSkipCountLocation |
|||
// ) |
|||
// } |
|||
// }, |
|||
}, |
|||
data() { |
|||
return { |
|||
active: 0, |
|||
formReveal: 1, |
|||
pageStatus: "", |
|||
filterListParams: [], |
|||
itemBasicData: [], |
|||
isItemBasicData: [], |
|||
previewFormData: [], |
|||
totalCountItemBasic: 0, |
|||
oldSkipCountItemBasic: 1, |
|||
pageListItemBasic: { |
|||
condition: { |
|||
filters: [], |
|||
}, |
|||
Sorting: "", |
|||
SkipCount: 0, |
|||
MaxResultCount: 100, |
|||
}, |
|||
locationData: [], |
|||
isLocationData: [], |
|||
totalCountLocation: 0, |
|||
oldSkipCountLocation: 1, |
|||
pageListLocation: { |
|||
condition: { |
|||
filters: [], |
|||
}, |
|||
Sorting: "", |
|||
SkipCount: 0, |
|||
MaxResultCount: 100, |
|||
}, |
|||
other: { |
|||
otherParam: [], |
|||
}, |
|||
otherForm: [ |
|||
{ |
|||
label: "状态", |
|||
prop: "otherParam", |
|||
type: "checkbox", |
|||
indeterminate:"true", |
|||
checkboxs: "radios", |
|||
}, |
|||
], |
|||
otherFormData: { |
|||
countMethod: 0, |
|||
// type: 0,//盘点类型 |
|||
company: null, |
|||
description: null, |
|||
// beginTime: null, |
|||
// endTime: null, |
|||
planTime: null, |
|||
partCondition: {}, |
|||
locCondition: {}, |
|||
statusList: [], |
|||
worker: null, |
|||
warehouseCode: null, |
|||
remark: null, |
|||
requestType: null, |
|||
}, |
|||
loading: false, |
|||
tableLoading: false, |
|||
session: null, |
|||
// step: ["总体信息", "物品参数", "库位参数", "其他参数", "结果"], |
|||
step: ["总体信息", "库位参数", "其他参数", "结果"], |
|||
editHandle: [ |
|||
{ label: "取消", name: "cancel" }, |
|||
{ label: "下一步", type: "primary", name: "determine" }, |
|||
], |
|||
filterActionOptions:[{ |
|||
value: '==', |
|||
label: '等于' |
|||
}, { |
|||
value: '!=', |
|||
label: '不等于' |
|||
}], |
|||
// 用户筛选暂存(如果筛选是code：value值为数组的格式) |
|||
filterOptionCopyForMutiple:[], |
|||
// 库位筛选，默认去掉的库位代码 |
|||
filterCodeExclude:'INSPECT,HOLD,TRANSFERONTHEWAY', |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.session = JSON.parse(JSON.stringify(this.CreateFormData)); |
|||
}, |
|||
methods: { |
|||
// 初始化库位筛选列表数据，目的：pda的库位类型不可以选择线边库位 |
|||
initSearchPageTableColums(){ |
|||
// let _list = JSON.parse(JSON.stringify(this.$isTableColumns.Location)); |
|||
let _list = JSON.parse(JSON.stringify(this.$isTableColumns.CountPlanByAddLocation)); |
|||
_list.forEach(item => { |
|||
// 如果是pda类型盘点，库位类型 则使用 locationTypeForPADPlan 枚举（区别为线边库位为不可选） |
|||
// 如果是Excel类型盘点，库位类型 则使用 locationTypeForExcelPlan 枚举（区别为原材料库位为不可选） |
|||
if(item.prop == 'type'){ |
|||
item.filters = this.CreateFormData.requestType == 2 ? 'locationTypeForPADPlan' : 'locationTypeForExcelPlan' |
|||
} |
|||
}); |
|||
return _list |
|||
}, |
|||
//结束退出 |
|||
close(val) { |
|||
this.active = 0; |
|||
const filter ={ |
|||
condition: { |
|||
filters: [], |
|||
}, |
|||
Sorting: "", |
|||
SkipCount: 0, |
|||
MaxResultCount: 100, |
|||
} |
|||
this.pageListItemBasic = JSON.parse(JSON.stringify(filter)) |
|||
this.pageListLocation = JSON.parse(JSON.stringify(filter)) |
|||
const data = JSON.parse(JSON.stringify(this.session)); |
|||
this.itemBasicData = [] |
|||
this.locationData = [] |
|||
this.$emit("close", data, val); |
|||
}, |
|||
//autoComplete主表 |
|||
DataPush(val) { |
|||
this.$emit("DataPush", val); |
|||
}, |
|||
//autoComplete子表 |
|||
detailsDataPush(val) { |
|||
this.$emit("detailsDataPush", val); |
|||
}, |
|||
// 点击筛选按钮 20230704 |
|||
sxBtnClickHandle(data){ |
|||
// 合并code多选，进行回显 20230705更新 |
|||
this.$refs.searchTable.setScreenDataFilters(this.filterOptionCopyForMutiple) |
|||
}, |
|||
//确定筛选 |
|||
advancedFilter(url, list, TotalCount, data, oldSkipCount) { |
|||
return () => { |
|||
list.SkipCount = (oldSkipCount - 1) * list.MaxResultCount; |
|||
this.tableLoading = true; |
|||
// 盘点库存 过滤线边仓数据 20230703更新 |
|||
// 如果是Excel盘点类型(this.CreateFormData.requestType == 1)，过滤原材料2 |
|||
// 如果不是Excel盘点类型(this.CreateFormData.requestType != 1)，过滤线边仓数据5 |
|||
let type_value = this.CreateFormData.requestType == 1 ? '2' : '5' |
|||
let _filter = { |
|||
action: "!=", |
|||
column: "type", |
|||
logic: "And", |
|||
value: type_value, |
|||
hide:true |
|||
} |
|||
// 库位筛选，默认去掉的库位代码 |
|||
let _filter_code = { |
|||
action: "!=", |
|||
column: "code", |
|||
logic: "And", |
|||
value: this.filterCodeExclude, |
|||
hide: true |
|||
} |
|||
if(this.pageListLocation.condition.filters.length <= 0){ |
|||
this.pageListLocation.condition.filters.push(_filter) |
|||
this.pageListLocation.condition.filters.push(_filter_code) |
|||
} |
|||
// code多选处理 20230705更新 |
|||
this.filterOptionCopyForMutiple = JSON.parse(JSON.stringify(list.condition.filters)) |
|||
let _filters = [] |
|||
// 拆分code多选，回传给接口 |
|||
this.filterOptionCopyForMutiple.forEach((option)=>{ |
|||
if(option.column == 'code'){ |
|||
option.value.split(',').forEach((val,val_index)=>{ |
|||
// 如果是第一位 则是用户选择的条件 否则判断是否为!= (And) 还是 == （Or） |
|||
let _logic = val_index == 0 ? option.logic : (option.action == '!=' ? 'And' : 'Or') |
|||
if((val || val == 0) && val.length > 0){ |
|||
let _item = { |
|||
action: option.action, |
|||
column: option.column, |
|||
logic: _logic, |
|||
value: val, |
|||
} |
|||
_filters.push(_item) |
|||
} |
|||
}) |
|||
}else{ |
|||
_filters.push(option) |
|||
} |
|||
}) |
|||
list.condition.filters = _filters |
|||
getPageList(list, url) |
|||
.then((res) => { |
|||
this[data] = res.items; |
|||
this[TotalCount] = res.totalCount; |
|||
this.tableLoading = false; |
|||
}) |
|||
.catch(() => { |
|||
this.tableLoading = false; |
|||
}); |
|||
}; |
|||
}, |
|||
//选择子表(接收分页组件emit改变每页最大页数) |
|||
AddNewAlterResultCount(val, url, list, TotalCount, data, oldSkipCount) { |
|||
list.MaxResultCount = val; |
|||
const Function = this.advancedFilter( |
|||
url, |
|||
list, |
|||
TotalCount, |
|||
data, |
|||
oldSkipCount |
|||
); |
|||
Function(); |
|||
}, |
|||
//选择子表(接收分页组件emit改变当前页) |
|||
AddNewAlertoldSkipCount(val, url, list, TotalCount, data, oldSkipCount) { |
|||
oldSkipCount = val; |
|||
const Function = this.advancedFilter( |
|||
url, |
|||
list, |
|||
TotalCount, |
|||
data, |
|||
oldSkipCount |
|||
); |
|||
Function(); |
|||
}, |
|||
//打印托标签 |
|||
tuoFormPrint() { |
|||
this.$emit("tuoFormPrint"); |
|||
}, |
|||
//打印箱标签 |
|||
xbqFormPrint() { |
|||
this.$emit("xbqFormPrint"); |
|||
}, |
|||
// //添加封装 |
|||
// addNew (url, list, TotalCount, data, MaxResultItem) { |
|||
// list.SkipCount = 0 |
|||
// list.MaxResultCount = JSON.parse(TotalCount) |
|||
// getPageList(list, url).then((res) => { |
|||
// this[data] = res.items |
|||
// list.MaxResultCount = MaxResultItem |
|||
// }) |
|||
// }, |
|||
//添加明细（上一步） |
|||
addFormData(val) { |
|||
if (val[0] == "cancel") { |
|||
this.active--; |
|||
} else { |
|||
// 物品参数 |
|||
// if (this.active == 1) { |
|||
// const MaxResultItem = JSON.parse( |
|||
// this.pageListItemBasic.MaxResultCount |
|||
// ); |
|||
// // this.addNew('item-basic', this.pageListItemBasic, this.totalCountItemBasic, 'isItemBasicData', MaxResultItem) |
|||
// // this.pageListItemBasic.MaxResultCount = MaxResultItem |
|||
// const Function = this.advancedFilter( |
|||
// "basedata/location", |
|||
// this.pageListLocation, |
|||
// "totalCountLocation", |
|||
// "locationData", |
|||
// this.oldSkipCountLocation |
|||
// ); |
|||
// Function(); |
|||
// this.$nextTick(()=>{ |
|||
// this.active++; |
|||
// }) |
|||
// } |
|||
// 库位参数 |
|||
if (this.active == 1) { |
|||
const MaxResultLocation = JSON.parse( |
|||
this.pageListLocation.MaxResultCount |
|||
); |
|||
// this.addNew('location', this.pageListLocation, this.totalCountLocation, 'isLocationData', MaxResultLocation) |
|||
// this.pageListLocation.MaxResultCount = MaxResultLocation |
|||
this.active++; |
|||
} |
|||
} |
|||
}, |
|||
//拆分 |
|||
splitFormData(val) { |
|||
return new Promise((resolve, reject) => { |
|||
postCreateWithCondition(val, "wms/store/count-plan") |
|||
.then((res) => { |
|||
this.previewFormData = JSON.parse( |
|||
JSON.stringify(this.CreateFormData) |
|||
); |
|||
// delete this.previewFormData.details |
|||
this.$listAssign(this.previewFormData, res); |
|||
this.previewFormData.details = []; |
|||
res.details.forEach((item) => { |
|||
const details = JSON.parse( |
|||
JSON.stringify(...this.childTableData) |
|||
); |
|||
this.$listAssign(details, item); |
|||
this.previewFormData.details.push(details); |
|||
}); |
|||
resolve(); |
|||
}) |
|||
.catch((err) => { |
|||
reject(); |
|||
}); |
|||
}); |
|||
}, |
|||
// 下一步 |
|||
editFormClick(val) { |
|||
// Moment(this.CreateFormData.arriveTime).format() |
|||
if (val[0] == 0) { |
|||
if (this.active == 0) { |
|||
this.close(0); |
|||
} else { |
|||
this.active--; |
|||
} |
|||
} else { |
|||
val[1].validate((valid) => { |
|||
if (valid) { |
|||
// 总体信息 |
|||
if (this.active == 0) { |
|||
this.pageListLocation.condition.filters = [] |
|||
const Function = this.advancedFilter( |
|||
// "basedata/item-basic", |
|||
// this.pageListItemBasic, |
|||
// "totalCountItemBasic", |
|||
// "itemBasicData", |
|||
// this.oldSkipCountItemBasic |
|||
'basedata/location', |
|||
this.pageListLocation, |
|||
'totalCountLocation', |
|||
'locationData', |
|||
this.oldSkipCountLocation |
|||
); |
|||
Function(); |
|||
this.active++; |
|||
} |
|||
// 其他参数 |
|||
else if (this.active == 2) { |
|||
this.$listAssign(this.otherFormData, this.CreateFormData); |
|||
this.otherFormData.partCondition = |
|||
this.pageListItemBasic.condition; |
|||
this.otherFormData.locCondition = this.pageListLocation.condition; |
|||
this.otherFormData.statusList = []; |
|||
let checkboxArray = [] |
|||
this.other.otherParam.forEach(item => { |
|||
if (item == '待检') { |
|||
checkboxArray.push(1) |
|||
} else if (item == '合格') { |
|||
checkboxArray.push(2) |
|||
} else if (item == '不合格') { |
|||
checkboxArray.push(3) |
|||
} else if (item == '隔离') { |
|||
checkboxArray.push(4) |
|||
} else if (item == '破坏') { |
|||
checkboxArray.push(5) |
|||
} else if (item == '冻结') { |
|||
checkboxArray.push(6) |
|||
} |
|||
}) |
|||
// 待检', '合格', '不合格', '隔离', '破坏', '冻结' |
|||
this.otherFormData.statusList = checkboxArray; |
|||
this.otherFormData.vendCondition = { |
|||
filters:[] |
|||
} |
|||
if(this.otherFormData.statusList.length <= 0){ |
|||
this.$warningMsg("请选择状态"); |
|||
return |
|||
} |
|||
this.loading = true; |
|||
// this.otherFormData.requestType = 2 |
|||
this.splitFormData(this.otherFormData).then( |
|||
(resolve) => { |
|||
this.pageStatus = "success"; |
|||
this.active++; |
|||
this.loading = false; |
|||
}, |
|||
(reject) => { |
|||
this.pageStatus = "error"; |
|||
this.active++; |
|||
this.loading = false; |
|||
} |
|||
); |
|||
} |
|||
// else if (this.active == 4) { |
|||
// postCreate(this.previewFormData, 'count-plan').then(res => { |
|||
// this.pageStatus = 'success' |
|||
// this.active++ |
|||
// this.loading = false |
|||
// }).catch(err => { |
|||
// this.pageStatus = 'error' |
|||
// this.active++ |
|||
// this.loading = false |
|||
// }) |
|||
// } |
|||
else { |
|||
this.$errorMsg("请检查表单"); |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "./style/index.scss"; |
|||
</style> |
|||
<style lang="scss"> |
|||
#stepsForm{ |
|||
.formButton{ |
|||
text-align: right; |
|||
} |
|||
.searchPageComponents{ |
|||
top: 130px !important; |
|||
} |
|||
.el-dialog__wrapper{ |
|||
height: unset; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,86 @@ |
|||
#stepsForm { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
::v-deep .el-steps { |
|||
padding-bottom: 15px; |
|||
|
|||
.el-step__main { |
|||
.el-step__title { |
|||
line-height: 24px; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.page1 { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.page2 { |
|||
flex: 1; |
|||
overflow: hidden; |
|||
position: relative; |
|||
|
|||
::v-deep & >.el-dialog { |
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
& >.el-dialog__header { |
|||
padding: 0 !important; |
|||
} |
|||
|
|||
& > .el-dialog__body { |
|||
padding-top: 0; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.page3 { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
padding-bottom: 54px; |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
|
|||
::v-deep .el-form { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.el-row { |
|||
flex: 1; |
|||
flex-wrap: wrap; |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.formTable-box { |
|||
flex: 1; |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
|
|||
.el-form-item__content { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
margin: 0 !important; |
|||
} |
|||
} |
|||
} |
|||
::v-deep .formButton { |
|||
position: absolute; |
|||
bottom: 0; |
|||
right: 0; |
|||
z-index: 3; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,459 @@ |
|||
<template> |
|||
<el-dialog |
|||
:title="formTitle" |
|||
v-loading="loading" |
|||
v-if="displayDialog.newDialog" |
|||
:visible="true" |
|||
:fullscreen="true" |
|||
:append-to-body="false" |
|||
:modal="false" |
|||
:modal-append-to-body="false" |
|||
:show-close="false" |
|||
> |
|||
<div id="stepsForm"> |
|||
<el-steps |
|||
:active="active" |
|||
process-status="finish" |
|||
finish-status="success" |
|||
:align-center="true" |
|||
> |
|||
<el-step |
|||
v-for="(item, index) in stepFilters" |
|||
:key="index" |
|||
:title="item" |
|||
></el-step> |
|||
</el-steps> |
|||
<curren-Form |
|||
v-if="active == 0" |
|||
class="page1" |
|||
size="medium" |
|||
ref="page1" |
|||
:searchData="CreateFormData" |
|||
:searchForm="CreateForm" |
|||
:searchOptions="Options" |
|||
:searchHandle="editHandle" |
|||
:rules="Rules" |
|||
@changeInput="changeInput" |
|||
@changeSelect="changeSelect" |
|||
@push="DataPush(arguments)" |
|||
@submitForm="editFormClick(arguments)" |
|||
> |
|||
</curren-Form> |
|||
<curren-Form |
|||
v-if="active === 1" |
|||
class="page2" |
|||
size="medium" |
|||
:searchData="CreateFormData" |
|||
:searchHandle="editHandle" |
|||
:rules="Rules" |
|||
@submitForm="editFormClick(arguments)" |
|||
> |
|||
<template> |
|||
<el-form-item class="formTable-box" prop="details" v-if="active == 1"> |
|||
<div class="heder" v-if="addClick"> |
|||
<span @click="openAddNew">添加一行</span> |
|||
</div> |
|||
<currenTable |
|||
:tableData="CreateFormData.details" |
|||
:searchOptions="Options" |
|||
:tableColumns="detailsTableColumns" |
|||
:selectionTable="false" |
|||
@push="detailsDataPush(arguments)" |
|||
> |
|||
<template v-if="showDeleteButton"> |
|||
<el-table-column |
|||
label="操作" |
|||
align="center" |
|||
fixed="right" |
|||
width="100px" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<div class="childTable" @click="childTable($event, scope)"> |
|||
<span>删除</span> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</template> |
|||
</currenTable> |
|||
</el-form-item> |
|||
</template> |
|||
</curren-Form> |
|||
<curren-Form |
|||
v-if="active === 2" |
|||
size="medium" |
|||
class="page3" |
|||
:searchData="previewFormData" |
|||
:searchForm="CreateForm | formData" |
|||
:searchHandle="editHandle" |
|||
:rules="Rules" |
|||
@submitForm="editFormClick(arguments)" |
|||
> |
|||
<template> |
|||
<el-form-item class="formTable-box" prop="details"> |
|||
<currenTable |
|||
:tableData="previewFormData.details" |
|||
:tableColumns="detailsTableColumns | formDataDetails" |
|||
:selectionTable="false" |
|||
> |
|||
</currenTable> |
|||
</el-form-item> |
|||
</template> |
|||
</curren-Form> |
|||
<div |
|||
v-if="active === step.length - 1 && pageStatus === 'success'" |
|||
class="page4" |
|||
> |
|||
<el-result |
|||
icon="success" |
|||
title="成功提示" |
|||
:subTitle="formTitle + '成功'" |
|||
> |
|||
<template slot="extra"> |
|||
<!-- <el-button type="primary" size="medium" @click="tuoFormPrint" |
|||
>打印托标签</el-button |
|||
> |
|||
<el-button type="primary" size="medium" @click="xbqFormPrint" |
|||
>打印箱标签</el-button |
|||
> --> |
|||
<el-button |
|||
v-for="item in successHandle" |
|||
:key="item.label" |
|||
:type="item.type" |
|||
size="medium" |
|||
@click="successClick(item.click())" |
|||
>{{ item.label }}</el-button |
|||
> |
|||
<el-button type="primary" size="medium" @click="close(1)" |
|||
>退出</el-button |
|||
> |
|||
</template> |
|||
</el-result> |
|||
</div> |
|||
<div |
|||
v-if="active === step.length - 1 && pageStatus === 'error'" |
|||
class="page4" |
|||
> |
|||
<el-result icon="error" title="错误提示" :subTitle="formTitle + '失败'"> |
|||
<template slot="extra"> |
|||
<el-button type="primary" size="medium" @click="close(1)" |
|||
>退出</el-button |
|||
> |
|||
</template> |
|||
</el-result> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
<script> |
|||
import currenForm from "@/components/currenForm" |
|||
import currenTable from "@/components/currenTable" |
|||
export default { |
|||
name: 'stepsForm', |
|||
components: { |
|||
currenForm, |
|||
currenTable |
|||
}, |
|||
watch: { |
|||
active (val) { |
|||
if (val != 0) { |
|||
this.editHandle[0].label = '上一步' |
|||
} else { |
|||
this.editHandle[0].label = '取消' |
|||
} |
|||
}, |
|||
stepArray(newVal, oldVal){ |
|||
this.step = newVal |
|||
} |
|||
}, |
|||
filters: { |
|||
formData (val) { |
|||
let data = JSON.parse(JSON.stringify(val)) |
|||
val.forEach((key, index) => { |
|||
data[index].disabled = "true" |
|||
delete data[index].focus |
|||
if (key.type == "autocomplete" || key.type == "import") { |
|||
data[index].type = "input" |
|||
} |
|||
}); |
|||
return data |
|||
}, |
|||
formDataDetails (val) { |
|||
let data = JSON.parse(JSON.stringify(val)) |
|||
val.forEach((key, index) => { |
|||
data[index].disabled = true |
|||
delete data[index].focus |
|||
delete data[index].rules |
|||
if (key.type == "autocomplete" || key.type == "import") { |
|||
delete data[index].type |
|||
} else if (key.type == "objectAutocomplete") { |
|||
data[index].type = "object" |
|||
} else if (key.prop == "containerCode" && key.type == "input") { |
|||
data[index].disabled = false |
|||
} else if (key.isChange) { |
|||
// 针对第三步预览特殊情况处理 |
|||
data[index].disabled = false |
|||
} |
|||
}); |
|||
return data |
|||
} |
|||
}, |
|||
props: { |
|||
//名称 |
|||
formTitle: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
//是否弹窗 |
|||
displayDialog: { |
|||
type: Object, |
|||
default: () => { |
|||
return { |
|||
newDialog: false |
|||
} |
|||
} |
|||
}, |
|||
//主表提交数据 |
|||
CreateFormData: { |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
} |
|||
}, |
|||
//主表显示form |
|||
CreateForm: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
//预览数据 |
|||
previewFormData: { |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
} |
|||
}, |
|||
//检验 |
|||
Rules: { |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
} |
|||
}, |
|||
//下拉选择 |
|||
Options: { |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
} |
|||
}, |
|||
//子表table显示 |
|||
detailsTableColumns: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
//子表提交数据 |
|||
childTableData: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
//成功后的操作 |
|||
successHandle: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
//步骤标题 |
|||
stepArray: { |
|||
type: Array, |
|||
default: () => { |
|||
return ["总体信息", "明细", "预览", "结果"] |
|||
} |
|||
}, |
|||
//添加一行 |
|||
addClickButton: { |
|||
type: Boolean, |
|||
default: () => { |
|||
return true |
|||
} |
|||
}, |
|||
//删除行记录 |
|||
isShowDeleteButton: { |
|||
type: Boolean, |
|||
default: () => { |
|||
return true |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
stepFilters () { |
|||
let stepFilters = [] |
|||
const routeName = this.$route.meta.title |
|||
this.step.forEach(key => { |
|||
stepFilters.push(routeName.concat(key)) |
|||
}) |
|||
return stepFilters |
|||
}, |
|||
}, |
|||
data () { |
|||
return { |
|||
active: 0, |
|||
formReveal: 1, |
|||
activeStep: 1, |
|||
pageStatus: '', |
|||
addClick: this.addClickButton, |
|||
showDeleteButton: this.isShowDeleteButton, |
|||
loading: false, |
|||
session: null, |
|||
step: this.stepArray, |
|||
editHandle: [ |
|||
{ label: "取消", name: "cancel" }, |
|||
{ label: "下一步", type: "primary", name: "determine" }, |
|||
], |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.session = JSON.parse(JSON.stringify(this.CreateFormData)) |
|||
}, |
|||
methods: { |
|||
//结束退出 |
|||
close (val) { |
|||
this.active = 0 |
|||
// const pageRef = this.Refs[1] |
|||
const data = JSON.parse(JSON.stringify(this.session)) |
|||
this.$emit('close', data, val) |
|||
}, |
|||
//autoComplete主表 |
|||
DataPush (val) { |
|||
this.$emit("DataPush", val) |
|||
}, |
|||
//autoComplete子表 |
|||
detailsDataPush (val) { |
|||
this.$emit("detailsDataPush", val) |
|||
}, |
|||
// //打印托标签 |
|||
// tuoFormPrint () { |
|||
// this.$emit('tuoFormPrint') |
|||
// }, |
|||
// //打印箱标签 |
|||
// xbqFormPrint () { |
|||
// this.$emit('xbqFormPrint') |
|||
// }, |
|||
successClick (val) { |
|||
this.loading = true |
|||
val.then(res => { |
|||
this.loading = false |
|||
}, reason => { |
|||
this.loading = false |
|||
}) |
|||
}, |
|||
editFormClick (val) { |
|||
// Moment(this.CreateFormData.arriveTime).format() |
|||
if (val[0] == 0) { |
|||
if (this.active == 0) { |
|||
// debugger |
|||
// this.active = '' |
|||
this.close(0) |
|||
} else { |
|||
if (this.active == 2) { |
|||
this.active = this.active - this.activeStep |
|||
} else { |
|||
this.active-- |
|||
} |
|||
} |
|||
} else { |
|||
val[1].validate((valid) => { |
|||
if (valid) { |
|||
const parent = this.$parent |
|||
if (this.active < this.step.length - 1) { |
|||
this.loading = true |
|||
if (this.active == this.step.length - 2) { |
|||
parent.stepsSubmit().then(res => { |
|||
if (res == '质检校验返回') { |
|||
this.loading = false |
|||
} else { |
|||
this.pageStatus = 'success' |
|||
this.active++ |
|||
this.loading = false |
|||
} |
|||
}, reason => { |
|||
this.pageStatus = 'error' |
|||
this.active++ |
|||
this.loading = false |
|||
}).catch(err=>{ |
|||
this.loading = false |
|||
}) |
|||
} else if (this.active == this.step.length - 3) { |
|||
parent.PalletlFunction().then(res => { |
|||
// 针对特殊环境 跳过步骤 直接到最后完成 |
|||
if (res == '质检任务跳过详情') { |
|||
parent.stepsSubmit().then(res => { |
|||
this.pageStatus = 'success' |
|||
this.active = this.active + 2 |
|||
this.loading = false |
|||
}, reason => { |
|||
this.pageStatus = 'error' |
|||
this.active = this.active + 2 |
|||
this.loading = false |
|||
}).catch(err=>{ |
|||
this.loading = false |
|||
}) |
|||
} else { |
|||
this.active++ |
|||
} |
|||
this.loading = false |
|||
}, reason => { |
|||
this.loading = false |
|||
}).catch(err=>{ |
|||
this.loading = false |
|||
}) |
|||
} else { |
|||
parent.stepsHandelOne().then(res => { |
|||
if (res) { |
|||
this.addClick = res.open |
|||
this.active = this.active + res.index |
|||
this.activeStep = res.index |
|||
} else { |
|||
this.activeStep = 1 |
|||
this.active++ |
|||
} |
|||
this.loading = false |
|||
}, reason => { |
|||
this.loading = false |
|||
}).catch(err=>{ |
|||
this.loading = false |
|||
}) |
|||
} |
|||
} |
|||
} else { |
|||
this.$errorMsg('请检查表单') |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
//添加子表 |
|||
openAddNew () { |
|||
const parent = this.$parent |
|||
parent.openAddNew() |
|||
}, |
|||
childTable (e, val) { |
|||
const parent = this.$parent |
|||
parent.childTable(e, val) |
|||
}, |
|||
changeInput(prop,val){ |
|||
this.$emit("changeInput", prop, val) |
|||
}, |
|||
changeSelect(prop,val){ |
|||
this.$emit("changeSelect", prop, val) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "./style/index.scss"; |
|||
</style> |
|||
@ -0,0 +1,551 @@ |
|||
<template> |
|||
<el-dialog |
|||
:title="formTitle" |
|||
v-loading="loading" |
|||
v-if="displayDialog.newDialog" |
|||
:visible="true" |
|||
:fullscreen="true" |
|||
:append-to-body="false" |
|||
:modal="false" |
|||
:modal-append-to-body="false" |
|||
:show-close="false" |
|||
> |
|||
<div id="stepsForm"> |
|||
<el-steps |
|||
:active="active" |
|||
process-status="finish" |
|||
finish-status="success" |
|||
:align-center="true" |
|||
> |
|||
<el-step |
|||
v-for="(item, index) in stepFilters" |
|||
:key="index" |
|||
:title="item" |
|||
></el-step> |
|||
</el-steps> |
|||
<curren-Form |
|||
v-if="active == 0" |
|||
class="page1" |
|||
size="medium" |
|||
ref="page1" |
|||
:searchData="CreateFormData" |
|||
:searchForm="CreateForm" |
|||
:searchOptions="Options" |
|||
:searchHandle="editHandle" |
|||
:rules="Rules" |
|||
@changeInput="changeInput" |
|||
@changeSelect="changeSelect" |
|||
@push="DataPush(arguments)" |
|||
@submitForm="editFormClick(arguments)" |
|||
> |
|||
</curren-Form> |
|||
<curren-Form |
|||
v-if="active === 1" |
|||
class="page2" |
|||
size="medium" |
|||
:searchData="CreateFormData" |
|||
:searchHandle="editHandle" |
|||
:rules="Rules" |
|||
@submitForm="editFormClick(arguments)" |
|||
> |
|||
<template> |
|||
<el-form-item class="formTable-box" prop="details" v-if="active == 1"> |
|||
<div class="heder"> |
|||
<el-button |
|||
v-if="addClick" |
|||
type="primary" |
|||
@click="openAddNew" |
|||
icon="el-icon-plus" |
|||
size="mini" |
|||
>添加一行</el-button> |
|||
|
|||
<el-button |
|||
v-if="importFormButton" |
|||
type="success" |
|||
icon="el-icon-download" |
|||
@click="openImportForm" |
|||
size="mini" |
|||
>导入</el-button> |
|||
</div> |
|||
<currenTable |
|||
:tableData="CreateFormData.details" |
|||
:searchOptions="Options" |
|||
:tableColumns="detailsTableColumns" |
|||
:selectionTable="false" |
|||
@push="detailsDataPush(arguments)" |
|||
> |
|||
<template v-if="showDeleteButton"> |
|||
<el-table-column |
|||
label="操作" |
|||
align="center" |
|||
fixed="right" |
|||
width="100px" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<div class="childTable" @click="childTable($event, scope)"> |
|||
<span>删除</span> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</template> |
|||
</currenTable> |
|||
</el-form-item> |
|||
</template> |
|||
</curren-Form> |
|||
<curren-Form |
|||
v-if="active === 2" |
|||
size="medium" |
|||
class="page3" |
|||
:searchData="previewFormData" |
|||
:searchForm="CreateForm | formData" |
|||
:searchHandle="editHandle" |
|||
:rules="Rules" |
|||
@submitForm="editFormClick(arguments)" |
|||
> |
|||
<template> |
|||
<el-form-item class="formTable-box" prop="details"> |
|||
<currenTable |
|||
:tableData="previewFormData.details" |
|||
:tableColumns="detailsTableColumns | formDataDetails" |
|||
:selectionTable="false" |
|||
> |
|||
<template v-if="showPreviewFormDeleteButton"> |
|||
<el-table-column |
|||
label="操作" |
|||
align="center" |
|||
fixed="right" |
|||
width="100px" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<div @click="previewChildRemove($event, scope)"> |
|||
<span style="color:red">删除</span> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</template> |
|||
</currenTable> |
|||
</el-form-item> |
|||
</template> |
|||
</curren-Form> |
|||
<div |
|||
v-if="active === step.length - 1 && pageStatus === 'success'" |
|||
class="page4" |
|||
> |
|||
<el-result |
|||
icon="success" |
|||
title="成功提示" |
|||
:subTitle="formTitle + '成功'" |
|||
> |
|||
<template slot="extra"> |
|||
<!-- <el-button type="primary" size="medium" @click="tuoFormPrint" |
|||
>打印托标签</el-button |
|||
> |
|||
<el-button type="primary" size="medium" @click="xbqFormPrint" |
|||
>打印箱标签</el-button |
|||
> --> |
|||
<el-button |
|||
v-for="item in successHandle" |
|||
:key="item.label" |
|||
:type="item.type" |
|||
size="medium" |
|||
@click="successClick(item.click())" |
|||
>{{ item.label }}</el-button |
|||
> |
|||
<el-button type="primary" size="medium" @click="close(1)" |
|||
>退出</el-button |
|||
> |
|||
</template> |
|||
</el-result> |
|||
</div> |
|||
<div |
|||
v-if="active === step.length - 1 && pageStatus === 'error'" |
|||
class="page4" |
|||
> |
|||
<el-result icon="error" title="错误提示" :subTitle="formTitle + '失败'"> |
|||
<template slot="extra"> |
|||
<el-button type="primary" size="medium" @click="close(1)" |
|||
>退出</el-button |
|||
> |
|||
</template> |
|||
</el-result> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
<script> |
|||
import currenForm from "@/components/currenForm" |
|||
import currenTable from "@/components/currenTable" |
|||
export default { |
|||
name: 'stepsForm', |
|||
components: { |
|||
currenForm, |
|||
currenTable |
|||
}, |
|||
watch: { |
|||
active (val) { |
|||
if (val != 0) { |
|||
this.editHandle=[ |
|||
{ label: "上一步", name: "cancel" }, |
|||
{ label: "下一步", type: "primary", name: "determine" }, |
|||
]; |
|||
} else { |
|||
if(this.hideFirstActiveCancel){ |
|||
this.editHandle=[ |
|||
{ label: "下一步", type: "primary", name: "determine" }, |
|||
]; |
|||
}else{ |
|||
this.editHandle=[ |
|||
{ label: "取消", name: "cancel" }, |
|||
{ label: "下一步", type: "primary", name: "determine" }, |
|||
]; |
|||
} |
|||
} |
|||
}, |
|||
stepArray(newVal, oldVal){ |
|||
this.step = newVal |
|||
} |
|||
}, |
|||
filters: { |
|||
formData (val) { |
|||
let data = JSON.parse(JSON.stringify(val)) |
|||
val.forEach((key, index) => { |
|||
data[index].disabled = "true" |
|||
delete data[index].focus |
|||
if (key.type == "autocomplete" || key.type == "import") { |
|||
data[index].type = "input" |
|||
} |
|||
}); |
|||
return data |
|||
}, |
|||
formDataDetails (val) { |
|||
let data = JSON.parse(JSON.stringify(val)) |
|||
val.forEach((key, index) => { |
|||
data[index].disabled = true |
|||
delete data[index].focus |
|||
delete data[index].rules |
|||
if (key.type == "autocomplete" || key.type == "import") { |
|||
delete data[index].type |
|||
} else if (key.type == "objectAutocomplete") { |
|||
data[index].type = "object" |
|||
} else if (key.prop == "containerCode" && key.type == "input") { |
|||
data[index].disabled = false |
|||
} else if (key.isChange) { |
|||
// 针对第三步预览特殊情况处理 |
|||
data[index].disabled = false |
|||
} |
|||
}); |
|||
return data |
|||
} |
|||
}, |
|||
props: { |
|||
//名称 |
|||
formTitle: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
//是否弹窗 |
|||
displayDialog: { |
|||
type: Object, |
|||
default: () => { |
|||
return { |
|||
newDialog: false |
|||
} |
|||
} |
|||
}, |
|||
//主表提交数据 |
|||
CreateFormData: { |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
} |
|||
}, |
|||
//主表显示form |
|||
CreateForm: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
//预览数据 |
|||
previewFormData: { |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
} |
|||
}, |
|||
//检验 |
|||
Rules: { |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
} |
|||
}, |
|||
//下拉选择 |
|||
Options: { |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
} |
|||
}, |
|||
//子表table显示 |
|||
detailsTableColumns: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
//子表提交数据 |
|||
childTableData: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
//成功后的操作 |
|||
successHandle: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
//步骤标题 |
|||
stepArray: { |
|||
type: Array, |
|||
default: () => { |
|||
return ["总体信息", "明细", "预览", "结果"] |
|||
} |
|||
}, |
|||
//添加一行 |
|||
addClickButton: { |
|||
type: Boolean, |
|||
default: () => { |
|||
return true |
|||
} |
|||
}, |
|||
//导入按钮 |
|||
importFormButton: { |
|||
type: Boolean, |
|||
default: () => { |
|||
return false |
|||
} |
|||
}, |
|||
//删除行记录 |
|||
isShowDeleteButton: { |
|||
type: Boolean, |
|||
default: () => { |
|||
return true |
|||
} |
|||
}, |
|||
// 隐藏第一步骤的取消按钮 |
|||
isHideFirstActiveCancel:{ |
|||
type: Boolean, |
|||
default: () => { |
|||
return false |
|||
} |
|||
}, |
|||
// 预览视图显示删除按钮 |
|||
showPreviewFormDeleteButton:{ |
|||
type: Boolean, |
|||
default: () => { |
|||
return false |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
stepFilters () { |
|||
let stepFilters = [] |
|||
const routeName = this.$route.meta.title |
|||
this.step.forEach(key => { |
|||
stepFilters.push(routeName.concat(key)) |
|||
}) |
|||
return stepFilters |
|||
}, |
|||
}, |
|||
data () { |
|||
return { |
|||
active: 0, |
|||
formReveal: 1, |
|||
activeStep: 1, |
|||
pageStatus: '', |
|||
addClick: this.addClickButton,//添加一行按钮 |
|||
importForm:this.importFormButton,//导入按钮 |
|||
showDeleteButton: this.isShowDeleteButton,//操作-删除按钮 |
|||
hideFirstActiveCancel:this.isHideFirstActiveCancel,// 隐藏第一步骤的取消按钮 |
|||
loading: false, |
|||
session: null, |
|||
step: this.stepArray, |
|||
editHandle: [ |
|||
{ label: "取消", name: "cancel" }, |
|||
{ label: "下一步", type: "primary", name: "determine" }, |
|||
], |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.session = JSON.parse(JSON.stringify(this.CreateFormData)) |
|||
if(this.hideFirstActiveCancel){ |
|||
this.editHandle=[ |
|||
{ label: "下一步", type: "primary", name: "determine" }, |
|||
]; |
|||
} |
|||
}, |
|||
methods: { |
|||
//结束退出 |
|||
close (val) { |
|||
this.active = 0 |
|||
// const pageRef = this.Refs[1] |
|||
const data = JSON.parse(JSON.stringify(this.session)) |
|||
this.$emit('close', data, val) |
|||
}, |
|||
//autoComplete主表 |
|||
DataPush (val) { |
|||
this.$emit("DataPush", val) |
|||
}, |
|||
//autoComplete子表 |
|||
detailsDataPush (val) { |
|||
this.$emit("detailsDataPush", val) |
|||
}, |
|||
// //打印托标签 |
|||
// tuoFormPrint () { |
|||
// this.$emit('tuoFormPrint') |
|||
// }, |
|||
// //打印箱标签 |
|||
// xbqFormPrint () { |
|||
// this.$emit('xbqFormPrint') |
|||
// }, |
|||
successClick (val) { |
|||
this.loading = true |
|||
val.then(res => { |
|||
this.loading = false |
|||
}, reason => { |
|||
this.loading = false |
|||
}).catch(err=>{ |
|||
this.loading = false |
|||
}) |
|||
}, |
|||
editFormClick (val) { |
|||
// Moment(this.CreateFormData.arriveTime).format() |
|||
// if (val[0] == 0) { |
|||
if (val[2].name == "cancel") { |
|||
if (this.active == 0) { |
|||
// debugger |
|||
// this.active = '' |
|||
this.close(0) |
|||
} else { |
|||
if (this.active == 2) { |
|||
this.active = this.active - this.activeStep |
|||
} else { |
|||
this.active-- |
|||
} |
|||
} |
|||
} else { |
|||
val[1].validate((valid) => { |
|||
if (valid) { |
|||
const parent = this.$parent |
|||
if (this.active < this.step.length - 1) { |
|||
this.loading = true |
|||
if (this.active == this.step.length - 2) { |
|||
parent.stepsSubmit().then(res => { |
|||
if (res == '质检校验返回') { |
|||
this.loading = false |
|||
} else { |
|||
this.pageStatus = 'success' |
|||
this.active++ |
|||
this.loading = false |
|||
} |
|||
}, reason => { |
|||
this.loading = false |
|||
if(reason=="return")return |
|||
this.pageStatus = 'error' |
|||
this.active++ |
|||
this.loading = false |
|||
}).catch(err=>{ |
|||
this.loading = false |
|||
}) |
|||
} else if (this.active == this.step.length - 3) { |
|||
parent.PalletlFunction().then(res => { |
|||
// 针对特殊环境 跳过步骤 直接到最后完成 |
|||
if (res == '质检任务跳过详情') { |
|||
parent.stepsSubmit().then(res => { |
|||
this.pageStatus = 'success' |
|||
this.active = this.active + 2 |
|||
this.loading = false |
|||
}, reason => { |
|||
this.pageStatus = 'error' |
|||
this.active = this.active + 2 |
|||
this.loading = false |
|||
}).catch(err=>{ |
|||
this.loading = false |
|||
}) |
|||
} else { |
|||
this.active++ |
|||
} |
|||
this.loading = false |
|||
}, reason => { |
|||
this.loading = false |
|||
}).catch(err=>{ |
|||
this.loading = false |
|||
}) |
|||
} else { |
|||
parent.stepsHandelOne().then(res => { |
|||
if (res) { |
|||
this.addClick = res.open |
|||
this.active = this.active + res.index |
|||
this.activeStep = res.index |
|||
} else { |
|||
this.activeStep = 1 |
|||
this.active++ |
|||
} |
|||
this.loading = false |
|||
}, reason => { |
|||
this.loading = false |
|||
}).catch(err=>{ |
|||
this.loading = false |
|||
}) |
|||
} |
|||
} |
|||
} else { |
|||
this.$errorMsg('请检查表单') |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
//添加子表 |
|||
openAddNew () { |
|||
const parent = this.$parent |
|||
parent.openAddNew() |
|||
}, |
|||
// 导入 |
|||
openImportForm(){ |
|||
const parent = this.$parent |
|||
parent.openImportFormHandle() |
|||
// this.displayDialog.importDialog = true |
|||
}, |
|||
childTable (e, val) { |
|||
const parent = this.$parent |
|||
parent.childTable(e, val) |
|||
}, |
|||
changeInput(prop,val){ |
|||
this.$emit("changeInput", prop, val) |
|||
}, |
|||
changeSelect(prop,val){ |
|||
this.$emit("changeSelect", prop, val) |
|||
}, |
|||
//预览步骤删除操作（第三步） |
|||
previewChildRemove(e, val) { |
|||
this.$confirm('您确定删除吗, 是否继续?', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
this.previewFormData.details.splice(val.$index, 1) |
|||
// this.$emit("removePreviewFormRow",this.previewFormData) |
|||
}).catch(() => { |
|||
|
|||
}); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "./style/index.scss"; |
|||
</style> |
|||
@ -0,0 +1,134 @@ |
|||
#stepsForm { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
::v-deep .el-steps { |
|||
padding-bottom: 15px; |
|||
|
|||
.el-step__main { |
|||
.el-step__title { |
|||
line-height: 24px; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.page1 { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.page2 { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
padding-bottom: 54px; |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
|
|||
::v-deep .el-form { |
|||
flex: 1; |
|||
display: flex; |
|||
.el-row { |
|||
display: none; |
|||
} |
|||
|
|||
.formTable-box { |
|||
flex: 1; |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
|
|||
.el-form-item__content { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
margin: 0 !important; |
|||
|
|||
.heder { |
|||
padding: 5px 0; |
|||
text-align: center; |
|||
font-size: 18px; |
|||
|
|||
button{ |
|||
margin: 0 10px; |
|||
} |
|||
} |
|||
|
|||
.el-table { |
|||
flex: 1; |
|||
|
|||
.childTable { |
|||
display: flex; |
|||
justify-content: space-around; |
|||
|
|||
span { |
|||
cursor: pointer; |
|||
|
|||
&:nth-child(1) { |
|||
color: red; |
|||
} |
|||
|
|||
&:nth-child(2) { |
|||
color: green; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
::v-deep .formButton { |
|||
position: absolute; |
|||
bottom: 0; |
|||
right: 0; |
|||
z-index: 3; |
|||
} |
|||
} |
|||
|
|||
.page3 { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
padding-bottom: 54px; |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
|
|||
::v-deep .el-form { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.el-row { |
|||
flex: 1; |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.formTable-box { |
|||
flex: 1; |
|||
|
|||
.el-form-item__content { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
margin: 0 !important; |
|||
} |
|||
} |
|||
} |
|||
::v-deep .formButton { |
|||
position: absolute; |
|||
bottom: 0; |
|||
right: 0; |
|||
z-index: 3; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,213 @@ |
|||
<template> |
|||
<div class="StepsFormAloneComponents"> |
|||
<div |
|||
class="pageMainContain" |
|||
:class="stepsDirection && stepsDirection == 'vertical' ? 'pageMainContainVertical' : ''" |
|||
> |
|||
<!-- 步骤流程图 --> |
|||
<div class="stepsContain"> |
|||
<el-steps |
|||
:active="active" |
|||
:process-status="processStatus" |
|||
:finish-status="finishStatus" |
|||
:direction="stepsDirection" |
|||
:space="stepsSpace" |
|||
:align-center="stepsAlignCenter" |
|||
:simple="stepsSimple" |
|||
:style="stepsStyle" |
|||
> |
|||
<el-step |
|||
v-for="(item, index) in steps" |
|||
:key="index" |
|||
:title="item.title" |
|||
:description="item.description" |
|||
:icon="item.icon" |
|||
></el-step> |
|||
</el-steps> |
|||
</div> |
|||
|
|||
<!-- 步骤对应页面内容 --> |
|||
<div class="allStepPages"> |
|||
<div |
|||
v-for="(item,index) in steps" |
|||
:key="index" |
|||
v-show="active == index" |
|||
class="stepBottomPage" |
|||
:class="'stepBottomPage'+(index+1)" |
|||
> |
|||
<slot :name="'stepSlot'+(index+1)"></slot> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 操作按钮 --> |
|||
<div class="stepsHandleBtns" v-if="(!((active == stepArray.length - 1) && hideLastBtsn))"> |
|||
<!-- 组件内已有按钮【前面】其他按钮位置插槽 --> |
|||
<slot name="stepOtherBeforeButton"></slot> |
|||
<!-- 组件内按钮 --> |
|||
<el-button |
|||
v-for="(item,index) in handleBtns" |
|||
:key="index" |
|||
v-show="!(active == 0 && item.name == 'cancle')" |
|||
:type="item.type" |
|||
@click="stepsHandleClick(item,index)" |
|||
:class="'stepsAloneBtn-'+item.name" |
|||
>{{item.label}}</el-button> |
|||
<!-- 组件内已有按钮【后面】其他按钮位置插槽 --> |
|||
<slot name="stepOtherAfterButton"></slot> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: 'StepsFormAlone', |
|||
props: { |
|||
stepsStyle:{ |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
} |
|||
}, |
|||
// 结束状态 |
|||
finishStatus:{ |
|||
type: String, |
|||
default: 'success' |
|||
}, |
|||
// 当前步骤的状态 |
|||
processStatus:{ |
|||
type: String, |
|||
default: 'success' |
|||
}, |
|||
// 单独设置步骤名称 |
|||
stepNames: { |
|||
type: Array, |
|||
default: () => { |
|||
return null |
|||
} |
|||
}, |
|||
//步骤options |
|||
stepArray: { |
|||
type: Array, |
|||
default: () => { |
|||
return [ |
|||
{title:"步骤一",description:"",icon:"",status:null}, |
|||
{title:"步骤二",description:"",icon:"",status:null}, |
|||
{title:"步骤三",description:"",icon:"",status:null}, |
|||
] |
|||
} |
|||
}, |
|||
// 显示方向 如果更改为vertical：最好与stepsAlignCenter=false同步赋值 |
|||
stepsDirection:{ |
|||
type: String, |
|||
default: 'horizontal' |
|||
}, |
|||
//居中对齐 |
|||
stepsAlignCenter: { |
|||
type: Boolean, |
|||
default: () => { |
|||
return true |
|||
} |
|||
}, |
|||
// 每个 step 的间距 |
|||
stepsSpace:{ |
|||
type: Number, |
|||
default: null |
|||
}, |
|||
//简洁风格 |
|||
stepsSimple: { |
|||
type: Boolean, |
|||
default: () => { |
|||
return false |
|||
} |
|||
}, |
|||
// 步骤操作 |
|||
stepHandleFuncs:{ |
|||
type: Object, |
|||
default: () => {} |
|||
}, |
|||
// 最后一步是否隐藏按钮 |
|||
hideLastBtsn:{ |
|||
type: Boolean, |
|||
default: () => { |
|||
return false |
|||
} |
|||
} |
|||
}, |
|||
data () { |
|||
return { |
|||
active: 0, |
|||
steps: null,//步骤标头 |
|||
// 操作按钮 |
|||
handleBtns:[ |
|||
{name:"cancle",label:"上一步"}, |
|||
{name:"next",label:"下一步",type:"primary"}, |
|||
] |
|||
} |
|||
}, |
|||
created(){ |
|||
this.initStepsOption() |
|||
}, |
|||
mounted () { |
|||
}, |
|||
methods: { |
|||
// 设置步骤标头 |
|||
initStepsOption(){ |
|||
this.steps = Object.assign([], this.stepArray); |
|||
if(!this.stepNames)return; |
|||
this.stepNames.forEach((item,key)=>{ |
|||
if(key < this.steps.length) |
|||
this.steps[key].title = item |
|||
}) |
|||
}, |
|||
// 操作按钮 |
|||
stepsHandleClick(item,index){ |
|||
// 上一步 |
|||
if(item.name == 'cancle'){ |
|||
if(this.steps[this.active].cancle){ |
|||
this.steps[this.active].cancle().then((data) => { |
|||
this.active -- |
|||
}).catch((err) => { |
|||
console.log('cancle-err',err) |
|||
}) |
|||
}else{ |
|||
this.active -- |
|||
} |
|||
} |
|||
// 下一步 |
|||
if(item.name == 'next'){ |
|||
// 非最后一步 |
|||
if(this.active < this.steps.length - 1){ |
|||
if(this.steps[this.active].next){ |
|||
this.steps[this.active].next().then(res => { |
|||
this.active ++ |
|||
}).catch((err) => { |
|||
console.log('next-err',err) |
|||
}) |
|||
}else{ |
|||
this.active ++ |
|||
} |
|||
} |
|||
// 最后一步 |
|||
else{ |
|||
if(this.steps[this.active].next){ |
|||
this.steps[this.active].next() |
|||
// .then(res => { |
|||
// // 回到第一步 |
|||
// this.returnFirstActive() |
|||
// console.log('res',res) |
|||
// }).catch((err) => { |
|||
// console.log('next-err',err) |
|||
// }) |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
returnFirstActive(){ |
|||
this.active = 0 |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "./style/index.scss"; |
|||
</style> |
|||
@ -0,0 +1,44 @@ |
|||
.StepsFormAloneComponents{ |
|||
padding: 30px 30px 20px; |
|||
width: 100%; |
|||
height: 100%; |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.allStepPages{ |
|||
height: calc(100% - 110px); |
|||
margin-top: 30px; |
|||
|
|||
.stepBottomPage{ |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
} |
|||
|
|||
.stepsHandleBtns{ |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
} |
|||
|
|||
.pageMainContain{ |
|||
height: 100%; |
|||
|
|||
// 竖排列 |
|||
&.pageMainContainVertical{ |
|||
display: flex; |
|||
|
|||
.stepsContain{ |
|||
min-width: 260px; |
|||
flex-shrink: 0; |
|||
padding: 30px 0; |
|||
} |
|||
|
|||
.allStepPages{ |
|||
width: 100%; |
|||
height: calc(100% - 50px); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,62 @@ |
|||
<template> |
|||
<div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" /> |
|||
<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners"> |
|||
<use :xlink:href="iconName" /> |
|||
</svg> |
|||
</template> |
|||
|
|||
<script> |
|||
// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage |
|||
import { isExternal } from '@/utils/validate' |
|||
|
|||
export default { |
|||
name: 'SvgIcon', |
|||
props: { |
|||
iconClass: { |
|||
type: String, |
|||
required: true |
|||
}, |
|||
className: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
computed: { |
|||
isExternal() { |
|||
return isExternal(this.iconClass) |
|||
}, |
|||
iconName() { |
|||
return `#icon-${this.iconClass}` |
|||
}, |
|||
svgClass() { |
|||
if (this.className) { |
|||
return 'svg-icon ' + this.className |
|||
} else { |
|||
return 'svg-icon' |
|||
} |
|||
}, |
|||
styleExternalIcon() { |
|||
return { |
|||
mask: `url(${this.iconClass}) no-repeat 50% 50%`, |
|||
'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%` |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.svg-icon { |
|||
width: 1em; |
|||
height: 1em; |
|||
vertical-align: -0.15em; |
|||
fill: currentColor; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.svg-external-icon { |
|||
background-color: currentColor; |
|||
mask-size: cover!important; |
|||
display: inline-block; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,173 @@ |
|||
<template> |
|||
<el-color-picker |
|||
v-model="theme" |
|||
:predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]" |
|||
class="theme-picker" |
|||
popper-class="theme-picker-dropdown" |
|||
/> |
|||
</template> |
|||
|
|||
<script> |
|||
const version = require('element-ui/package.json').version // element-ui version from node_modules |
|||
const ORIGINAL_THEME = '#409EFF' // default color |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
chalk: '', // content of theme-chalk css |
|||
theme: '' |
|||
} |
|||
}, |
|||
computed: { |
|||
defaultTheme() { |
|||
return this.$store.state.settings.theme |
|||
} |
|||
}, |
|||
watch: { |
|||
defaultTheme: { |
|||
handler: function(val, oldVal) { |
|||
this.theme = val |
|||
}, |
|||
immediate: true |
|||
}, |
|||
async theme(val) { |
|||
const oldVal = this.chalk ? this.theme : ORIGINAL_THEME |
|||
if (typeof val !== 'string') return |
|||
const themeCluster = this.getThemeCluster(val.replace('#', '')) |
|||
const originalCluster = this.getThemeCluster(oldVal.replace('#', '')) |
|||
const $message = this.$message({ |
|||
message: ' Compiling the theme', |
|||
customClass: 'theme-message', |
|||
type: 'success', |
|||
duration: 0, |
|||
iconClass: 'el-icon-loading' |
|||
}) |
|||
|
|||
const getHandler = (variable, id) => { |
|||
return () => { |
|||
const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', '')) |
|||
const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster) |
|||
|
|||
let styleTag = document.getElementById(id) |
|||
if (!styleTag) { |
|||
styleTag = document.createElement('style') |
|||
styleTag.setAttribute('id', id) |
|||
document.head.appendChild(styleTag) |
|||
} |
|||
styleTag.innerText = newStyle |
|||
} |
|||
} |
|||
|
|||
if (!this.chalk) { |
|||
const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css` |
|||
await this.getCSSString(url, 'chalk') |
|||
} |
|||
|
|||
const chalkHandler = getHandler('chalk', 'chalk-style') |
|||
|
|||
chalkHandler() |
|||
|
|||
const styles = [].slice.call(document.querySelectorAll('style')) |
|||
.filter(style => { |
|||
const text = style.innerText |
|||
return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text) |
|||
}) |
|||
styles.forEach(style => { |
|||
const { innerText } = style |
|||
if (typeof innerText !== 'string') return |
|||
style.innerText = this.updateStyle(innerText, originalCluster, themeCluster) |
|||
}) |
|||
|
|||
this.$emit('change', val) |
|||
|
|||
$message.close() |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
updateStyle(style, oldCluster, newCluster) { |
|||
let newStyle = style |
|||
oldCluster.forEach((color, index) => { |
|||
newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index]) |
|||
}) |
|||
return newStyle |
|||
}, |
|||
|
|||
getCSSString(url, variable) { |
|||
return new Promise(resolve => { |
|||
const xhr = new XMLHttpRequest() |
|||
xhr.onreadystatechange = () => { |
|||
if (xhr.readyState === 4 && xhr.status === 200) { |
|||
this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '') |
|||
resolve() |
|||
} |
|||
} |
|||
xhr.open('GET', url) |
|||
xhr.send() |
|||
}) |
|||
}, |
|||
|
|||
getThemeCluster(theme) { |
|||
const tintColor = (color, tint) => { |
|||
let red = parseInt(color.slice(0, 2), 16) |
|||
let green = parseInt(color.slice(2, 4), 16) |
|||
let blue = parseInt(color.slice(4, 6), 16) |
|||
|
|||
if (tint === 0) { // when primary color is in its rgb space |
|||
return [red, green, blue].join(',') |
|||
} else { |
|||
red += Math.round(tint * (255 - red)) |
|||
green += Math.round(tint * (255 - green)) |
|||
blue += Math.round(tint * (255 - blue)) |
|||
|
|||
red = red.toString(16) |
|||
green = green.toString(16) |
|||
blue = blue.toString(16) |
|||
|
|||
return `#${red}${green}${blue}` |
|||
} |
|||
} |
|||
|
|||
const shadeColor = (color, shade) => { |
|||
let red = parseInt(color.slice(0, 2), 16) |
|||
let green = parseInt(color.slice(2, 4), 16) |
|||
let blue = parseInt(color.slice(4, 6), 16) |
|||
|
|||
red = Math.round((1 - shade) * red) |
|||
green = Math.round((1 - shade) * green) |
|||
blue = Math.round((1 - shade) * blue) |
|||
|
|||
red = red.toString(16) |
|||
green = green.toString(16) |
|||
blue = blue.toString(16) |
|||
|
|||
return `#${red}${green}${blue}` |
|||
} |
|||
|
|||
const clusters = [theme] |
|||
for (let i = 0; i <= 9; i++) { |
|||
clusters.push(tintColor(theme, Number((i / 10).toFixed(2)))) |
|||
} |
|||
clusters.push(shadeColor(theme, 0.1)) |
|||
return clusters |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.theme-message, |
|||
.theme-picker-dropdown { |
|||
z-index: 99999 !important; |
|||
} |
|||
|
|||
.theme-picker .el-color-picker__trigger { |
|||
height: 26px !important; |
|||
width: 26px !important; |
|||
padding: 2px; |
|||
} |
|||
|
|||
.theme-picker-dropdown .el-color-dropdown__link-btn { |
|||
display: none; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,380 @@ |
|||
<template> |
|||
<el-dialog |
|||
title="导入" |
|||
element-loading-text="正在导入..." |
|||
:visible.sync="show" |
|||
:append-to-body="false" |
|||
:modal-append-to-body="false" |
|||
:fullscreen="true" |
|||
v-loading="loading" |
|||
:modal="false" |
|||
> |
|||
<!-- v-loading.fullscreen.lock="loading" --> |
|||
<el-button |
|||
type="success" |
|||
size="mini" |
|||
icon="el-icon-download" |
|||
@click="postImportDown" |
|||
>获取模板</el-button |
|||
> |
|||
<!-- <el-button |
|||
type="warning" |
|||
size="mini" |
|||
icon="el-icon-upload" |
|||
@click="postImportDown" |
|||
>导入数据</el-button |
|||
> --> |
|||
<input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick"> |
|||
<el-button |
|||
:loading="loading" |
|||
style="margin-left:16px;" |
|||
size="mini" |
|||
type="primary" |
|||
@click="handleUpload" |
|||
icon="el-icon-download" |
|||
> |
|||
导入数据 |
|||
</el-button> |
|||
<!-- <el-button |
|||
:loading="loading" |
|||
style="margin-left:16px;" |
|||
size="mini" |
|||
type="warning" |
|||
@click="handlePrint()" |
|||
icon="el-icon-printer" |
|||
> |
|||
全部打印 |
|||
</el-button> --> |
|||
<!-- <div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover"> |
|||
Drop excel file here or |
|||
<el-button :loading="loading" style="margin-left:16px;" size="mini" type="primary" @click="handleUpload"> |
|||
Browse |
|||
</el-button> |
|||
</div> --> |
|||
<div style="height:calc(100% - 60px)" id="tableOuter"> |
|||
<el-table |
|||
:data="excelData.results" |
|||
border |
|||
highlight-current-row |
|||
style="width: 100%;margin-top:20px;" |
|||
:max-height="tableMaxHeight" |
|||
> |
|||
<!-- @selection-change="handleSelectionPrint" --> |
|||
<!-- <el-table-column type="selection" width="55"></el-table-column> --> |
|||
<el-table-column |
|||
v-if="excelData.header.length > 0" |
|||
type="index" |
|||
fixed="left" |
|||
label="序号" |
|||
width="50" |
|||
/> |
|||
<el-table-column |
|||
v-for="(item,index) of excelData.header" |
|||
:key="index" |
|||
:prop="item" |
|||
:label="item" |
|||
:fixed="headerFixed(item)" |
|||
/> |
|||
<!-- <el-table-column v-if="excelData.header.length > 0" label="明细-箱标签" fixed="right" width="100"> |
|||
<template slot-scope="scope"> |
|||
{{scope.row['明细-箱标签']}} |
|||
</template> |
|||
</el-table-column> --> |
|||
<!-- <el-table-column label="操作" fixed="right"> |
|||
<template slot-scope="scope"> |
|||
<el-button type="text" @click="handlePrint([scope.row])">打印</el-button> |
|||
</template> |
|||
</el-table-column> --> |
|||
</el-table> |
|||
</div> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="submitForm(0)">取 消</el-button> |
|||
<el-button type="primary" @click="submitForm(1)">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import XLSX from 'xlsx' |
|||
import { mixins } from "@/mixins/mixins" |
|||
import { postInventoryLabelCode } from "@/api/wms-core" |
|||
import { supplierAsnExcel } from "@/filters/excelOrReportsOption"; |
|||
import {SupplierAsnCtypeStaBack} from "@/filters/status" |
|||
|
|||
export default { |
|||
name:"UploadExcel", |
|||
mixins:[mixins], |
|||
watch: { |
|||
show () { |
|||
this.reset() |
|||
} |
|||
}, |
|||
props: { |
|||
//表头浮动项 |
|||
fixedArr:{ |
|||
type:Array, |
|||
default: () => { |
|||
return [ {name:supplierAsnExcel.details.packingCode,value:"right"} ] |
|||
} |
|||
}, |
|||
fixedLeftArr:{ |
|||
type:Array, |
|||
default:null |
|||
}, |
|||
show: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
beforeUpload: Function, // eslint-disable-line |
|||
onSuccess: Function// eslint-disable-line |
|||
}, |
|||
data() { |
|||
return { |
|||
loading: false, |
|||
excelData: { |
|||
header: [], |
|||
results: [] |
|||
}, |
|||
// printSelection:[],//已选打印 |
|||
tableMaxHeight:null,//表格流体最大高度 |
|||
} |
|||
}, |
|||
methods: { |
|||
// 数据重置 |
|||
reset(){ |
|||
this.excelData = { |
|||
header:[], |
|||
results:[] |
|||
} |
|||
this.loading = false |
|||
// this.printSelection = []; |
|||
}, |
|||
headerFixed(item){ |
|||
let _fix = false |
|||
this.fixedArr.forEach(fix=>{ |
|||
if(fix.name == item){ |
|||
_fix = fix.value |
|||
} |
|||
}) |
|||
return _fix |
|||
}, |
|||
/** |
|||
* 按钮操作 |
|||
* index 0:取消，1:确定 |
|||
*/ |
|||
submitForm(index) { |
|||
this.$emit("submitForm", index,this.excelData); |
|||
}, |
|||
// 多选 |
|||
// handleSelectionPrint(val) { |
|||
// this.printSelection = val; |
|||
// }, |
|||
/** |
|||
* 打印 |
|||
* arr 有参数为单独打印，无参数为批量打印 |
|||
*/ |
|||
// handlePrint(arr){ |
|||
// let rdlx = "xiangbq.rdlx"; |
|||
// let params = { |
|||
// "boxlabel":[] |
|||
// } |
|||
// // let printArr = arr ? arr : this.printSelection; |
|||
// let printArr = arr ? arr : this.excelData.results; |
|||
// if(!printArr || printArr.length <= 0){ |
|||
// this.$message({ |
|||
// message: '请选择要打印的数据', |
|||
// type: 'error' |
|||
// }); |
|||
// return |
|||
// } |
|||
// 打印操作 |
|||
// this.getPackingCode(arr) |
|||
// }, |
|||
|
|||
// 获取箱标签并回显 |
|||
getPackingCode(header, results){ |
|||
let createManyParams = []; |
|||
results.forEach(item => { |
|||
let _item = { |
|||
itemCode: item[supplierAsnExcel.details.itemCode] || "", |
|||
lot: item[supplierAsnExcel.details.lot] || "", |
|||
labelType:1, |
|||
qty: Number(item[supplierAsnExcel.details.qty]), |
|||
uom: item[supplierAsnExcel.details.uom], |
|||
stdPackQty:0, |
|||
company:localStorage.getItem("company"), |
|||
|
|||
// poNumber:item[supplierAsnExcel.poNumber], |
|||
// number:item[supplierAsnExcel.number], |
|||
supplierCode:item[supplierAsnExcel.supplierCode], |
|||
planUserCode:item[supplierAsnExcel.planUserCode], |
|||
contactUserName:item[supplierAsnExcel.planUserCode], |
|||
planArriveDate:item[supplierAsnExcel.planArriveDate], |
|||
shipDate:item[supplierAsnExcel.shipDate], |
|||
remark:item[supplierAsnExcel.remark], |
|||
|
|||
ctype:SupplierAsnCtypeStaBack(item[supplierAsnExcel.details.ctype]), |
|||
projectCode:item[supplierAsnExcel.details.projectCode], |
|||
itemCode:item[supplierAsnExcel.details.itemCode], |
|||
recommendErpCode:item[supplierAsnExcel.details.recommendErpCode], |
|||
qty:item[supplierAsnExcel.details.qty], |
|||
uom:item[supplierAsnExcel.details.uom], |
|||
lot:item[supplierAsnExcel.details.lot], |
|||
produceDate:item[supplierAsnExcel.details.produceDate], |
|||
expireDate:item[supplierAsnExcel.details.expireDate], |
|||
}; |
|||
createManyParams.push(_item) |
|||
}); |
|||
postInventoryLabelCode(createManyParams) |
|||
.then((res,a) => { |
|||
let _header = JSON.parse(JSON.stringify(header)) |
|||
_header.push(supplierAsnExcel.details.packingCode) |
|||
res.forEach((v,k)=>{ |
|||
this.$set(results[k],supplierAsnExcel.details.packingCode, res[k].code) |
|||
}) |
|||
this.successShowExcel(_header, results) |
|||
}).catch(err => { |
|||
console.log(err) |
|||
this.loading = false |
|||
this.$message.error('导入失败，请重新导入'); |
|||
// this.reset() |
|||
}) |
|||
}, |
|||
postImportDown () { |
|||
this.$emit('postImportDown') |
|||
}, |
|||
// 成功后回显及渲染 |
|||
successShowExcel(header, results){ |
|||
this.excelData.header = header |
|||
this.excelData.results = results |
|||
this.tableMaxHeight = document.getElementById("tableOuter").clientHeight |
|||
this.loading = false |
|||
}, |
|||
generateData({ header, results }) { |
|||
// this.excelData.header = header |
|||
// this.excelData.results = results |
|||
// this.tableMaxHeight = document.getElementById("tableOuter").clientHeight |
|||
if(this.onSuccess){ |
|||
this.onSuccess(header, results).then((res_header, res_results)=>{ |
|||
let _header = res_header ? res_header : header; |
|||
let _results = res_results ? res_results : results; |
|||
this.successShowExcel(_header, _results) |
|||
}).catch(err=>{ |
|||
this.loading = false |
|||
}) |
|||
}else{ |
|||
this.successShowExcel(header, results) |
|||
// this.getPackingCode(header, results) |
|||
} |
|||
}, |
|||
handleDrop(e) { |
|||
e.stopPropagation() |
|||
e.preventDefault() |
|||
if (this.loading) return |
|||
const files = e.dataTransfer.files |
|||
if (files.length !== 1) { |
|||
this.$message.error('Only support uploading one file!') |
|||
return |
|||
} |
|||
const rawFile = files[0] // only use files[0] |
|||
|
|||
if (!this.isExcel(rawFile)) { |
|||
this.$message.error('Only supports upload .xlsx, .xls, .csv suffix files') |
|||
return false |
|||
} |
|||
this.upload(rawFile) |
|||
e.stopPropagation() |
|||
e.preventDefault() |
|||
}, |
|||
handleDragover(e) { |
|||
e.stopPropagation() |
|||
e.preventDefault() |
|||
e.dataTransfer.dropEffect = 'copy' |
|||
}, |
|||
handleUpload() { |
|||
this.$refs['excel-upload-input'].click() |
|||
}, |
|||
handleClick(e) { |
|||
const files = e.target.files |
|||
const rawFile = files[0] // only use files[0] |
|||
if (!rawFile) return |
|||
this.upload(rawFile) |
|||
}, |
|||
upload(rawFile) { |
|||
this.loading = true |
|||
this.$refs['excel-upload-input'].value = null // fix can't select the same excel |
|||
|
|||
if (!this.beforeUpload) { |
|||
this.readerData(rawFile) |
|||
this.loading = false |
|||
return |
|||
} |
|||
const before = this.beforeUpload(rawFile) |
|||
if (before) { |
|||
this.readerData(rawFile) |
|||
} |
|||
}, |
|||
readerData(rawFile) { |
|||
return new Promise((resolve, reject) => { |
|||
const reader = new FileReader() |
|||
reader.onload = e => { |
|||
const data = e.target.result |
|||
// const workbook = XLSX.read(data, { type: 'array',cellText:false,cellDates:true }) |
|||
const workbook = XLSX.read(data, { type: 'array'}) |
|||
const firstSheetName = workbook.SheetNames[0] |
|||
const worksheet = workbook.Sheets[firstSheetName] |
|||
const header = this.getHeaderRow(worksheet) |
|||
const results = XLSX.utils.sheet_to_json(worksheet,{raw:false}) |
|||
// const results = XLSX.utils.sheet_to_json(worksheet) |
|||
if(results.length <= 0){ |
|||
this.$message.error('导入表格内无数据，请确认后重新导入'); |
|||
this.loading = false |
|||
return |
|||
} |
|||
this.generateData({ header, results }) |
|||
resolve() |
|||
this.tab |
|||
} |
|||
reader.readAsArrayBuffer(rawFile) |
|||
}) |
|||
}, |
|||
getHeaderRow(sheet) { |
|||
const headers = [] |
|||
const range = XLSX.utils.decode_range(sheet['!ref']) |
|||
let C |
|||
const R = range.s.r |
|||
/* start in the first row */ |
|||
for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */ |
|||
const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })] |
|||
/* find the cell in the first row */ |
|||
let hdr = 'UNKNOWN ' + C // <-- replace with your desired default |
|||
if (cell && cell.t) hdr = XLSX.utils.format_cell(cell) |
|||
headers.push(hdr) |
|||
} |
|||
return headers |
|||
}, |
|||
isExcel(file) { |
|||
return /\.(xlsx|xls|csv)$/.test(file.name) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.excel-upload-input{ |
|||
display: none; |
|||
z-index: -9999; |
|||
} |
|||
.drop{ |
|||
border: 2px dashed #bbb; |
|||
width: 600px; |
|||
height: 160px; |
|||
line-height: 160px; |
|||
margin: 0 auto; |
|||
font-size: 24px; |
|||
border-radius: 5px; |
|||
text-align: center; |
|||
color: #bbb; |
|||
position: relative; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,77 @@ |
|||
<template> |
|||
<div class="batchButton"> |
|||
<div class="query-box" v-if="!checkButton.length"> |
|||
<el-input |
|||
v-model="input" |
|||
:placeholder="placeholder" |
|||
@keyup.enter.native="filtrate" |
|||
/> |
|||
<el-button type="primary" @click.native.prevent="filtrate" |
|||
>搜索</el-button |
|||
> |
|||
</div> |
|||
<div class="button-box" v-else> |
|||
<curren-Button |
|||
:Butttondata="Butttondata" |
|||
@tableButtonClick="tableButtonClick" |
|||
></curren-Button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import currenButton from "@/components/currenButton" |
|||
export default { |
|||
name: 'batchButton', |
|||
components: { |
|||
currenButton, |
|||
}, |
|||
props: { |
|||
Butttondata: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
placeholder: { |
|||
type: String, |
|||
default: '搜索...' |
|||
}, |
|||
checkButton: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
|
|||
}, |
|||
data () { |
|||
return { |
|||
input: '' |
|||
} |
|||
}, |
|||
methods: { |
|||
//搜索字段变化时 |
|||
filtrate () { |
|||
this.$emit('filtrate', this.input) |
|||
}, |
|||
tableButtonClick (val) { |
|||
this.$emit('tableButtonClick', val) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.batchButton { |
|||
display: flex; |
|||
align-items: center; |
|||
height: 50px; |
|||
.query-box { |
|||
display: flex; |
|||
.el-button { |
|||
margin: 0 0 0 10px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,559 @@ |
|||
<template> |
|||
<el-drawer |
|||
v-loading="DrawerLoading" |
|||
v-if="drawer" |
|||
:visible="true" |
|||
:close-on-press-escape="false" |
|||
:wrapperClosable="false" |
|||
:with-header="false" |
|||
:modal="false" |
|||
size="100%" |
|||
> |
|||
<div class="drawer-heder"> |
|||
<div class="heder-left"> |
|||
<!-- <div class="heder-img"> |
|||
<img |
|||
src="@/assets/img/drawerHeader.png" |
|||
alt="" |
|||
style="width: 100%; height: 100%" |
|||
/> |
|||
</div> --> |
|||
<div class="header-text"> |
|||
<span>{{ propsData[title[0].prop] }}</span> |
|||
<span>{{ title[0].label }}</span> |
|||
</div> |
|||
</div> |
|||
<div class="heder-right"> |
|||
<curren-Button |
|||
:Butttondata="Butttondata" |
|||
@tableButtonClick="tableButtonClick" |
|||
> |
|||
<template> |
|||
<el-dropdown |
|||
trigger="click" |
|||
@command="handleCommand" |
|||
v-if="JSON.stringify(dropdownData) != '{}'" |
|||
> |
|||
<el-button size="mini" icon="el-icon-more"></el-button> |
|||
<el-dropdown-menu slot="dropdown"> |
|||
<el-dropdown-item |
|||
v-for="(item, index) in dropdownData" |
|||
:key="index" |
|||
:command="item.command" |
|||
>{{ item.label }}</el-dropdown-item |
|||
> |
|||
</el-dropdown-menu> |
|||
</el-dropdown> |
|||
</template> |
|||
</curren-Button> |
|||
</div> |
|||
</div> |
|||
<div class="drawer-main"> |
|||
<curren-tabs |
|||
:tabsData="dropdownTabs" |
|||
:activeName="firstTabs" |
|||
type="border-card" |
|||
@handleClick="handleClick" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<curren-descriptions |
|||
border |
|||
v-if="scope.value == 'xq'" |
|||
:column="column" |
|||
:direction="direction" |
|||
:colon="false" |
|||
:tabsDesTions="tabsDesTions" |
|||
:propsData="propsData" |
|||
> |
|||
</curren-descriptions> |
|||
<!-- currenTableDetails 组件 明细中带分页功能 --> |
|||
<umyTable |
|||
v-if="scope.value == 'mx'" |
|||
:tableBorder="true" |
|||
:tableData="propsData.details" |
|||
:propsData="propsData" |
|||
:tableColumns="tableColumns" |
|||
:selectionTable="selectionTable" |
|||
:requiredRules="false" |
|||
:setUTableHeight="260" |
|||
@sortChange="sortChange" |
|||
@handleSelectionChange="handleSelectionChange" |
|||
@inlineDialog="inlineDialog" |
|||
@buttonClick="buttonClick" |
|||
> |
|||
<template> |
|||
<slot></slot> |
|||
</template> |
|||
</umyTable> |
|||
<!-- 明细页码 --> |
|||
<pagination |
|||
v-if="scope.value == 'mx'" |
|||
:totalCount="totalCount" |
|||
:pagesizeProps="MaxResultCount" |
|||
@SizeChange="alterResultCountDetails" |
|||
@CurrentChange="alertoldSkipCountDetails" |
|||
:currentPageProps="currentPage" |
|||
></pagination> |
|||
<!-- 新增汇总 表头 区分明细表头使用 summaryTableColumns --> |
|||
<umyTable |
|||
v-if="scope.value == 'hz'" |
|||
:tableBorder="true" |
|||
:tableData="propsData.summaryDetails" |
|||
:tableColumns="summaryTableColumns.length == 0 ? tableColumns : summaryTableColumns" |
|||
:selectionTable="selectionTable" |
|||
:requiredRules="false" |
|||
@sortChange="sortChange" |
|||
@handleSelectionChange="handleSelectionChange" |
|||
@inlineDialog="inlineDialog" |
|||
@buttonClick="buttonClick" |
|||
:setUTableHeight="210" |
|||
> |
|||
<template> |
|||
<slot></slot> |
|||
</template> |
|||
</umyTable> |
|||
<!-- 自定义扩展 --> |
|||
<umyTable |
|||
v-if=" |
|||
scope.value == zdyValue && |
|||
scope.value != 'xq' && |
|||
scope.value != 'mx' && |
|||
scope.value != 'hz' && |
|||
scope.value != 'zwlcj' |
|||
" |
|||
:tableBorder="true" |
|||
:tableLoading="tableLoading" |
|||
:tableData="otherData" |
|||
:tableColumns="zdyTableColumns" |
|||
:selectionTable="selectionTable" |
|||
:requiredRules="false" |
|||
@sortChange="sortChange" |
|||
@handleSelectionChange="handleSelectionChange" |
|||
@inlineDialog="inlineDialog" |
|||
@buttonClick="buttonClick" |
|||
:setUTableHeight="210" |
|||
> |
|||
<template> |
|||
<slot></slot> |
|||
</template> |
|||
</umyTable> |
|||
<!-- 自定义扩展（tree）的形式 目前使用位置：物品清单信息-子物品层级 todo:待优化--> |
|||
<currenTable |
|||
v-if=" |
|||
scope.value == zdyValue && |
|||
scope.value == 'zwlcj' |
|||
" |
|||
:tableLoading="tableLoading" |
|||
:tableData="otherData" |
|||
:tableColumns="zdyTableColumns" |
|||
:selectionTable="selectionTable" |
|||
:requiredRules="false" |
|||
@sortChange="sortChange" |
|||
@handleSelectionChange="handleSelectionChange" |
|||
@inlineDialog="inlineDialog" |
|||
:treeProps="{children: 'children', hasChildren: 'hasChildren'}" |
|||
@buttonClick="buttonClick" |
|||
> |
|||
<template> |
|||
<slot></slot> |
|||
</template> |
|||
</currenTable> |
|||
</template> |
|||
</curren-tabs> |
|||
</div> |
|||
<div class="drawer-Shut" @click="drawerShut"> |
|||
<el-button type="danger" size="mini">关闭</el-button> |
|||
</div> |
|||
</el-drawer> |
|||
</template> |
|||
<script> |
|||
import { getListByItemcode,byItem,byProduct,byComponent,bySupplierCode,byLocation,byLocationCode, |
|||
relationByLocationCode,byComponentCJ,purRecNoteCustomInfo,EnumPurchaseReceiptInspect |
|||
} from "@/api/wms-api" |
|||
import currenButton from "@/components/currenButton" |
|||
import currenDescriptions from "@/components/currenDescriptions" |
|||
import currenTabs from "@/components/currenTabs" |
|||
import currenTable from "@/components/currenTable" |
|||
import pagination from "@/components/Pagination" |
|||
export default { |
|||
name: 'currenTabel-drawer', |
|||
components: { |
|||
pagination, |
|||
currenButton, |
|||
currenDescriptions, |
|||
currenTabs, |
|||
currenTable, |
|||
}, |
|||
props: { |
|||
title: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
DrawerLoading: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
drawer: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
dropdownData: { |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
} |
|||
}, |
|||
propsData: { |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
} |
|||
}, |
|||
tabsDesTions: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
dropdownTabsData: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
tableLoading: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
tableColumns: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
summaryTableColumns: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
Butttondata: { |
|||
type: Array, |
|||
default: () => { |
|||
return [{ |
|||
type: 'warning', |
|||
icon: 'el-icon-edit', |
|||
label: '编辑', |
|||
name: 'edit', |
|||
size: 'mini' |
|||
}] |
|||
} |
|||
}, |
|||
selectionTable: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
MaxResultCount: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
totalCount: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
currentPage: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
// 详情展现列数，默认为2列展现 |
|||
column: { |
|||
type: Number, |
|||
default: 2 |
|||
}, |
|||
// 详情展示方式，默认水平分布 |
|||
direction: { |
|||
type: String, |
|||
default: 'horizontal' |
|||
}, |
|||
// 详情tabs排序默认 |
|||
firstTabs: { |
|||
type: String, |
|||
default: 'xq' |
|||
} |
|||
|
|||
}, |
|||
computed: { |
|||
dropdownTabs () { |
|||
// 带有特殊扩展tabs页的 |
|||
if (this.dropdownTabsData.length !== 0) { |
|||
return this.dropdownTabsData |
|||
} else { |
|||
// 正常普通 详情，明细，汇总 |
|||
if (Object.keys(this.propsData).length != 0) { |
|||
this.initDropdownTabsData = [{ |
|||
label: "详情", |
|||
name: 'xq' |
|||
}, |
|||
{ |
|||
label: "明细", |
|||
name: 'mx' |
|||
}, |
|||
{ |
|||
label: "汇总", |
|||
name: 'hz' |
|||
}] |
|||
if (this.propsData.details == undefined || !this.propsData.details.length) { |
|||
this.initDropdownTabsData = [{ |
|||
label: "详情", |
|||
name: 'xq' |
|||
}] |
|||
return this.initDropdownTabsData |
|||
} |
|||
if (this.propsData.summaryDetails == undefined || !this.propsData.summaryDetails.length ) { |
|||
this.initDropdownTabsData = [{ |
|||
label: "详情", |
|||
name: 'xq' |
|||
}, |
|||
{ |
|||
label: "明细", |
|||
name: 'mx' |
|||
}] |
|||
return this.initDropdownTabsData |
|||
} |
|||
} |
|||
return this.initDropdownTabsData |
|||
} |
|||
}, |
|||
}, |
|||
mounted () { |
|||
}, |
|||
data () { |
|||
return { |
|||
otherData:[], // 切换tabs页赋值 |
|||
zdyTableColumns:[], // 自定义表头 |
|||
zdyValue:'', // 自定义展现值 |
|||
// firstTabs:'xq', |
|||
initDropdownTabsData:[ |
|||
{ |
|||
label: "详情", |
|||
name: 'xq' |
|||
}, |
|||
{ |
|||
label: "明细", |
|||
name: 'mx' |
|||
}, |
|||
{ |
|||
label: "汇总", |
|||
name: 'hz' |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
handleCommand (command) { |
|||
this.$emit('handleCommand', command) |
|||
}, |
|||
drawerShut () { |
|||
this.$emit('drawerShut', false) |
|||
}, |
|||
tableButtonClick (val) { |
|||
this.$emit('drawerbutton', val) |
|||
}, |
|||
//排序 |
|||
sortChange (data) { |
|||
this.$emit('sortChange', data) |
|||
}, |
|||
//点击selection框 |
|||
handleSelectionChange (val) { |
|||
this.$emit("handleSelectionChange", val) |
|||
}, |
|||
//点击name提交emit打开编辑页面 |
|||
inlineDialog (row) { |
|||
this.$emit("inlineDialog", row) |
|||
}, |
|||
//接收分页组件emit改变每页最大页数 |
|||
alterResultCountDetails (val) { |
|||
this.$emit('alterResultCountDetails', val) |
|||
}, |
|||
//接收分页组件emit改变当前页 |
|||
alertoldSkipCountDetails (val) { |
|||
this.$emit('alertoldSkipCountDetails', val) |
|||
}, |
|||
buttonClick(row) { |
|||
this.$emit("buttonClick", row); |
|||
}, |
|||
// tabs 切换页 |
|||
handleClick (val) { |
|||
this.$emit("currenTabsChange", val);//父级获取当前的tab内容 |
|||
this.zdyValue = val.name |
|||
this.dropdownTabsData.forEach( item => { |
|||
if (item.name == val.name) { |
|||
let parent = this.$parent |
|||
parent.tableLoading = true |
|||
// 详情 明细 汇总 |
|||
parent.firstTabs = val.name |
|||
if (val.name == 'xq' || val.name == 'mx' || val.name == 'hz') { |
|||
this.zdyTableColumns = [] |
|||
this.otherData = [] |
|||
parent.tableLoading = false |
|||
} else { |
|||
this.zdyTableColumns = [] |
|||
this.otherData = [] |
|||
// this.firstTabs = val.name |
|||
// 其他自定义tab页 |
|||
if (item.functionName == 'getListByItemcode') { |
|||
let params = { |
|||
itemCode: this.propsData.code |
|||
} |
|||
getListByItemcode(params, item.url).then(res => { |
|||
let zdyTableColumnsJSON = JSON.parse(JSON.stringify(this.$isTableColumns[item.tableColumns])); |
|||
delete zdyTableColumnsJSON[0].type |
|||
this.zdyTableColumns = zdyTableColumnsJSON |
|||
this.otherData = res |
|||
parent.tableLoading = false |
|||
}).catch(err => { |
|||
console.log(err) |
|||
parent.tableLoading = false |
|||
}) |
|||
} else if (item.functionName == 'byItem') { |
|||
byItem(this.propsData.code, item.url).then(res => { |
|||
let zdyTableColumnsJSON = JSON.parse(JSON.stringify(this.$isTableColumns[item.tableColumns])); |
|||
delete zdyTableColumnsJSON[0].type |
|||
this.zdyTableColumns = zdyTableColumnsJSON |
|||
this.otherData = res |
|||
parent.tableLoading = false |
|||
}).catch(err => { |
|||
console.log(err) |
|||
parent.tableLoading = false |
|||
}) |
|||
} else if (item.functionName == 'byProduct') { |
|||
byProduct({product:this.propsData.product}, item.url).then(res => { |
|||
let zdyTableColumnsJSON = JSON.parse(JSON.stringify(this.$isTableColumns[item.tableColumns])); |
|||
delete zdyTableColumnsJSON[0].type |
|||
this.zdyTableColumns = zdyTableColumnsJSON |
|||
this.otherData = res |
|||
parent.tableLoading = false |
|||
}).catch(err => { |
|||
console.log(err) |
|||
parent.tableLoading = false |
|||
}) |
|||
} else if (item.functionName == 'byComponent') { |
|||
byComponent({component:this.propsData.component}, item.url).then(res => { |
|||
let zdyTableColumnsJSON = JSON.parse(JSON.stringify(this.$isTableColumns[item.tableColumns])); |
|||
delete zdyTableColumnsJSON[0].type |
|||
this.zdyTableColumns = zdyTableColumnsJSON |
|||
this.otherData = res |
|||
parent.tableLoading = false |
|||
}).catch(err => { |
|||
console.log(err) |
|||
parent.tableLoading = false |
|||
}) |
|||
} |
|||
// 基础数据管理-物品清单维护-物品清单信息-详情-子物品层级 |
|||
else if (item.functionName == 'byComponentCJ') { |
|||
this.otherData = [] |
|||
byComponentCJ({component:this.propsData.component}, item.url).then(res => { |
|||
let zdyTableColumnsJSON = JSON.parse(JSON.stringify(this.$isTableColumns[item.tableColumns])); |
|||
delete zdyTableColumnsJSON[0].type |
|||
this.zdyTableColumns = zdyTableColumnsJSON |
|||
this.otherData = res |
|||
this.recursion(this.otherData) |
|||
parent.tableLoading = false |
|||
}).catch(err => { |
|||
console.log(err) |
|||
parent.tableLoading = false |
|||
}) |
|||
} else if (item.functionName == 'bySupplierCode') { |
|||
bySupplierCode({supplierCode:this.propsData.code}, item.url).then(res => { |
|||
let zdyTableColumnsJSON = JSON.parse(JSON.stringify(this.$isTableColumns[item.tableColumns])); |
|||
delete zdyTableColumnsJSON[0].type |
|||
this.zdyTableColumns = zdyTableColumnsJSON |
|||
this.otherData = res |
|||
parent.tableLoading = false |
|||
}).catch(err => { |
|||
console.log(err) |
|||
parent.tableLoading = false |
|||
}) |
|||
} else if (item.functionName == 'byLocation') { |
|||
byLocation(this.propsData.code==null?this.propsData.locationCode:this.propsData.code, item.url).then(res => { |
|||
let zdyTableColumnsJSON = JSON.parse(JSON.stringify(this.$isTableColumns[item.tableColumns])); |
|||
delete zdyTableColumnsJSON[0].type |
|||
this.zdyTableColumns = zdyTableColumnsJSON |
|||
this.otherData = res |
|||
this.o |
|||
parent.tableLoading = false |
|||
}).catch(err => { |
|||
console.log(err) |
|||
parent.tableLoading = false |
|||
}) |
|||
} else if (item.functionName == 'byLocationCode') { |
|||
byLocationCode({locationCode: this.propsData.code}, item.url).then(res => { |
|||
let itemData = [] |
|||
itemData.push(res) |
|||
let zdyTableColumnsJSON = JSON.parse(JSON.stringify(this.$isTableColumns[item.tableColumns])); |
|||
delete zdyTableColumnsJSON[0].type |
|||
this.zdyTableColumns = zdyTableColumnsJSON |
|||
this.otherData = itemData |
|||
parent.tableLoading = false |
|||
}).catch(err => { |
|||
console.log(err) |
|||
parent.tableLoading = false |
|||
}) |
|||
} |
|||
// 基础数据管理-库位信息-详情-库位零件关系 |
|||
else if (item.functionName == 'relationByLocationCode') { |
|||
relationByLocationCode({locationCode: this.propsData.code}, item.url).then(res => { |
|||
let zdyTableColumnsJSON = JSON.parse(JSON.stringify(this.$isTableColumns[item.tableColumns])); |
|||
delete zdyTableColumnsJSON[0].type |
|||
this.zdyTableColumns = zdyTableColumnsJSON |
|||
this.otherData = res |
|||
parent.tableLoading = false |
|||
}).catch(err => { |
|||
console.log(err) |
|||
parent.tableLoading = false |
|||
}) |
|||
} |
|||
// 采购收货记录-合格品收货明细, 不合格品收货明细, 收货缺料明细 |
|||
else if(item.functionName == "purRecNoteCustomInfo"){ |
|||
parent.Loading.DrawerLoading = true |
|||
purRecNoteCustomInfo( item.url,this.propsData.id).then(res => { |
|||
let zdyTableColumnsJSON = JSON.parse(JSON.stringify(this.$isTableColumns[item.tableColumns])); |
|||
delete zdyTableColumnsJSON[0].type |
|||
this.zdyTableColumns = zdyTableColumnsJSON |
|||
this.otherData = res |
|||
parent.Loading.DrawerLoading = false |
|||
}).catch(err => { |
|||
console.log(err) |
|||
parent.Loading.DrawerLoading = false |
|||
}) |
|||
} |
|||
// 客户退拆记录-详情页TAB-回冲记录 |
|||
else if(item.functionName == "customerDismantleBackFlushNote"){ |
|||
let zdyTableColumnsJSON = JSON.parse(JSON.stringify(this.$isTableColumns[item.tableColumns])); |
|||
delete zdyTableColumnsJSON[0].type |
|||
this.zdyTableColumns = zdyTableColumnsJSON |
|||
this.otherData = this.propsData.noteAndBackFlushDetails |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
// 递归 物品子级层级 |
|||
recursion(val){ |
|||
val.forEach(item => { |
|||
if(item.componentDTOs) { |
|||
item.children = item.componentDTOs |
|||
this.recursion(item.componentDTOs) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
// el-drawer |
|||
@import "./style/index.scss"; |
|||
</style> |
|||
@ -0,0 +1,122 @@ |
|||
.el-drawer__wrapper { |
|||
z-index: 10 !important; |
|||
position: absolute; |
|||
left: 32%; |
|||
overflow: visible; |
|||
// height:calc(100% - 28px); |
|||
// top: 14px; |
|||
// right:14px |
|||
|
|||
::v-deep .el-drawer { |
|||
height: 100%; |
|||
overflow: visible; |
|||
box-shadow: 0 8px 10px -5px rgb(0 0 0 / 15%), 0 16px 24px 2px rgb(0 0 0 / 9%), 0 6px 30px 5px rgb(0 0 0 / 7%); |
|||
|
|||
.el-drawer__body { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.drawer-heder { |
|||
display: flex; |
|||
padding: 15px 10px; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.heder-left { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
.heder-img { |
|||
width: 40px; |
|||
height: 40px; |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
.header-text { |
|||
padding:0 20px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
|
|||
span:nth-child(1) { |
|||
color: #333; |
|||
font-size: 22px; |
|||
} |
|||
|
|||
span:nth-child(2) { |
|||
color: #999; |
|||
font-size: 16px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.Descriptions { |
|||
padding: 0 10px; |
|||
} |
|||
|
|||
.drawer-main { |
|||
// padding-top: 20px; |
|||
flex: 1; |
|||
overflow: hidden; |
|||
// background-color: #efefef; |
|||
padding: 10px 20px 20px 30px; |
|||
border-top: solid 5px #f6f6f6; |
|||
|
|||
.el-tabs { |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
.el-tabs__header{ |
|||
// padding-bottom: 5px ; |
|||
.el-tabs__nav{ |
|||
z-index: auto !important; |
|||
} |
|||
} |
|||
|
|||
.el-tabs__content { |
|||
flex: 1; |
|||
|
|||
.el-tab-pane { |
|||
width: 100%; |
|||
height: 100%; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.el-descriptions-item__label { |
|||
padding-right: 40px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.drawer-Shut { |
|||
width: 35px; |
|||
height: 100px; |
|||
position: absolute; |
|||
top: 200px; |
|||
left: -35px; |
|||
|
|||
.el-button { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
|
|||
::v-deep span { |
|||
font-size: 12px; |
|||
letter-spacing: 10px; |
|||
writing-mode: tb-rl; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
::v-deep .el-tabs__nav-wrap::after{ |
|||
content: unset !important; |
|||
} |
|||
@ -0,0 +1,349 @@ |
|||
<template> |
|||
<el-dialog |
|||
title="高级筛选" |
|||
v-if="displayDialog.screenDialog" |
|||
:visible="true" |
|||
:modal="false" |
|||
top="5vh" |
|||
width="950px" |
|||
> |
|||
<curren-Form |
|||
class="navFilter" |
|||
size="medium" |
|||
labelWidth="0" |
|||
:searchData="screenData" |
|||
:searchOptions="editOptions" |
|||
:searchHandle="editHandle" |
|||
@submitForm="screenFormClick(arguments)" |
|||
> |
|||
<template> |
|||
<el-row :gutter="20"> |
|||
<el-form-item |
|||
v-for="(item, index) in screenData.filters" |
|||
:key="index" |
|||
> |
|||
<el-col :span="5"> |
|||
<el-form-item |
|||
:prop="'filters.' + index + '.column'" |
|||
:rules="{ |
|||
required: true, |
|||
message: '请选择筛选对象', |
|||
trigger: 'change', |
|||
}" |
|||
> |
|||
<el-select |
|||
v-model="item.column" |
|||
placeholder="请选择筛选对象" |
|||
:disabled="item.hide" |
|||
:filterable="true" |
|||
@change="filterColumnChange(item)" |
|||
> |
|||
<el-option |
|||
v-for="(item, index) in tableColumnsOptions(tableColumns)" |
|||
:key="index" |
|||
:label="item.label" |
|||
:value=" |
|||
item.showProp |
|||
? item.prop + '.' + item.showProp |
|||
: item.prop |
|||
" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="5"> |
|||
<el-form-item |
|||
:prop="'filters.' + index + '.action'" |
|||
:rules="{ |
|||
required: true, |
|||
message: '请选择条件', |
|||
trigger: 'change', |
|||
}" |
|||
> |
|||
<el-select |
|||
v-model="item.action" |
|||
placeholder="请选择条件" |
|||
:disabled="item.column == '' || item.hide ? true : false" |
|||
> |
|||
<el-option |
|||
v-for="item in options.action" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="7"> |
|||
<el-form-item |
|||
:prop="'filters.' + index + '.value'" |
|||
:rules="{ |
|||
required: true, |
|||
message: '请输入内容', |
|||
trigger: 'blur', |
|||
}" |
|||
> |
|||
<el-select |
|||
v-if="Object.keys(inputOrSelect(item.column)).length > 0" |
|||
v-model="item.value" |
|||
placeholder="请选择内容" |
|||
:disabled="item.column == '' || item.hide ? true : false" |
|||
:filterable="true" |
|||
@change="inputOrSelect(item.column)" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in $staticOptions[ |
|||
inputOrSelect(item.column).filters |
|||
]()" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:disabled="item.disabled" |
|||
:value=" |
|||
typeof item.value == 'string' |
|||
? item.value |
|||
: String(item.value) |
|||
" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
<el-input |
|||
v-else |
|||
v-model="item.value" |
|||
placeholder="请输入内容" |
|||
:disabled="item.column == '' || item.hide ? true : false" |
|||
clearable |
|||
></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="5"> |
|||
<el-form-item |
|||
:prop="'filters.' + index + '.logic'" |
|||
:rules="{ |
|||
required: true, |
|||
message: '请选择关系', |
|||
trigger: 'change', |
|||
}" |
|||
> |
|||
<el-select |
|||
v-model="item.logic" |
|||
placeholder="请选择关系" |
|||
:disabled="item.column == '' || item.hide ? true : false" |
|||
> |
|||
<el-option |
|||
v-for="item in options.logic" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="1" v-if="!item.hide"> |
|||
<el-button |
|||
type="danger" |
|||
icon="el-icon-minus" |
|||
circle |
|||
size="mini" |
|||
@click="screenDelete(index)" |
|||
></el-button> |
|||
</el-col> |
|||
</el-form-item> |
|||
</el-row> |
|||
</template> |
|||
<div class="screen-push"> |
|||
<span @click="screenPush">+ 添加筛选条件</span> |
|||
</div> |
|||
</curren-Form> |
|||
</el-dialog> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
props: { |
|||
//displayDialog显示 |
|||
displayDialog: { |
|||
type: Object, |
|||
default: () => { |
|||
return { |
|||
screenDialog: false |
|||
} |
|||
} |
|||
}, |
|||
// 筛选数据 |
|||
screenData: { |
|||
type: Object, |
|||
default: () => { |
|||
return {}; |
|||
} |
|||
}, |
|||
tableColumns: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
//验证规则 |
|||
editOptions: { |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
} |
|||
}, |
|||
//挂载到body |
|||
modalAppendToBody: { |
|||
type: Boolean, |
|||
default: () => { |
|||
return true |
|||
} |
|||
}, |
|||
// 筛选条件自定义（等于/不等于/大于/小于等数据） |
|||
filterActionOptions:{ |
|||
type: Array, |
|||
default: null |
|||
} |
|||
// //按钮 |
|||
// editHandle: { |
|||
// type: Array, |
|||
// default: () => { |
|||
// return [] |
|||
// } |
|||
// } |
|||
}, |
|||
watch: { |
|||
// InputOrSelect (val) { |
|||
// if (val) { |
|||
// this.InputOrSelectHide = val |
|||
// } |
|||
// } |
|||
}, |
|||
computed: { |
|||
}, |
|||
data() { |
|||
return { |
|||
editHandle: [ |
|||
{ float: 'left', label: '重置', type: 'danger', name: 'reset' }, |
|||
{ label: "取消", name: "cancel" }, |
|||
{ label: "确定", type: "primary", name: "determine" }, |
|||
], |
|||
options: { |
|||
action: [{ |
|||
value: '==', |
|||
label: '等于' |
|||
}, { |
|||
value: '!=', |
|||
label: '不等于' |
|||
}, { |
|||
value: '>', |
|||
label: '大于' |
|||
}, { |
|||
value: '<', |
|||
label: '小于' |
|||
}, { |
|||
value: '>=', |
|||
label: '大于等于' |
|||
}, { |
|||
value: '<=', |
|||
label: '小于等于' |
|||
}, { |
|||
value: 'Like', |
|||
label: '包含' |
|||
}, { |
|||
value: 'NotLike', |
|||
label: '不包含' |
|||
}, |
|||
// { |
|||
// value: 'In', |
|||
// label: '包含' |
|||
// }, { |
|||
// value: 'NotIn', |
|||
// label: '不包含' |
|||
// } |
|||
], |
|||
logic: [ |
|||
{ |
|||
value: 'And', |
|||
label: '并且' |
|||
}, |
|||
{ |
|||
value: 'Or', |
|||
label: '或者' |
|||
} |
|||
], |
|||
}, |
|||
rules: |
|||
{ |
|||
column: [ |
|||
{ required: true, message: '请选择筛选对象', trigger: 'change' } |
|||
], |
|||
// value: [ |
|||
// { required: true, message: '请输入内容', trigger: 'change' } |
|||
// ], |
|||
action: [ |
|||
{ required: true, message: '请选择条件', trigger: 'change' } |
|||
], |
|||
logic: [ |
|||
{ required: true, message: '请选择关系', trigger: 'change' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
created() { |
|||
// this.form.exerciseType = this.typeOptions[0].value |
|||
|
|||
}, |
|||
mounted() { |
|||
if(this.filterActionOptions)this.options.action = this.filterActionOptions |
|||
}, |
|||
methods: { |
|||
// 选择对象更改 |
|||
filterColumnChange(item){ |
|||
// 筛选对象更改时候，清空value值 |
|||
item.value = "" |
|||
}, |
|||
tableColumnsOptions(val) { |
|||
const data = JSON.parse(JSON.stringify(val)); |
|||
let num = 0 |
|||
val.forEach((item, index) => { |
|||
if (item.showProp) { |
|||
data.splice(index - num, 1) |
|||
num++ |
|||
} |
|||
}) |
|||
return data |
|||
}, |
|||
inputOrSelect(val) { |
|||
let data |
|||
if (val) { |
|||
this.tableColumns.forEach((key) => { |
|||
if (val == key.prop) { |
|||
if (key.filters) { |
|||
data = key |
|||
} else { |
|||
data = {} |
|||
} |
|||
} |
|||
}) |
|||
} else { |
|||
data = {} |
|||
} |
|||
return data |
|||
}, |
|||
screenFormClick(val) { |
|||
this.$emit("screenFormClick", val) |
|||
}, |
|||
screenDelete(val) { |
|||
this.$emit("screenDelete", val) |
|||
}, |
|||
screenPush() { |
|||
this.$emit("screenPush") |
|||
} |
|||
} |
|||
|
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "./style/index.scss"; |
|||
</style> |
|||
@ -0,0 +1,46 @@ |
|||
.el-dialog__wrapper { |
|||
width:100% !important; |
|||
} |
|||
|
|||
::v-deep .el-dialog { |
|||
overflow: hidden; |
|||
overflow-x: auto; |
|||
} |
|||
|
|||
::v-deep .navFilter { |
|||
display: flex; |
|||
flex-direction: column; |
|||
width: 100%; |
|||
height: 100%; |
|||
max-height: 50vh; |
|||
|
|||
.el-form { |
|||
flex: 1; |
|||
padding-left: 100px; |
|||
padding-right: 100px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-content: flex-start; |
|||
flex-wrap: wrap; |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.screen-push { |
|||
width: 100%; |
|||
padding-left: 5px; |
|||
color: rgb(64, 158, 255); |
|||
|
|||
span { |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
color: blue; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.formButton { |
|||
padding: 20px 20px 20px 0; |
|||
} |
|||
} |
|||
@ -0,0 +1,107 @@ |
|||
<template> |
|||
<div class="tableNavBtnsContent"> |
|||
<div class="tableNavLeftBtns"> |
|||
<!-- 左侧按钮 --> |
|||
<innerButton :Butttondata="buttonsLeft" @tableButtonClick="tableButtonClick"></innerButton> |
|||
</div> |
|||
<div class="tableNavRightBtns"> |
|||
<!-- 快速搜索 --> |
|||
<searchNormal |
|||
ref="quicklySearchDomRef" |
|||
v-if="quicklySearchOption" |
|||
:searchNormalOption="quicklySearchOption" |
|||
@searchNormalClick="quicklySearchClick" |
|||
@searchNormalClear="quicklySearchClear" |
|||
></searchNormal> |
|||
<!-- 右侧按钮 --> |
|||
<innerButton :Butttondata="buttonsRight" @tableButtonClick="tableButtonClick"></innerButton> |
|||
</div> |
|||
<slot></slot> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import innerButton from "./innerButton.vue" |
|||
import searchNormal from "@/components/searchNormal/index.vue" |
|||
import permission from "@/directive/permission/index" |
|||
export default { |
|||
directives: { permission }, |
|||
components:{ |
|||
innerButton, |
|||
searchNormal |
|||
}, |
|||
props: { |
|||
Butttondata: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
quicklySearchOption: { |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
// 按钮整体靠右 |
|||
buttonsAllIsRight:{ |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
data () { |
|||
return { |
|||
buttonsLeft:null,//左侧按钮数据 |
|||
buttonsRight:null,//右侧按钮数据 |
|||
} |
|||
}, |
|||
mounted(){ |
|||
this.initButtonsData() |
|||
}, |
|||
methods:{ |
|||
// 按钮数据处理（左右分开处理） |
|||
initButtonsData(){ |
|||
this.buttonsLeft = [] |
|||
this.buttonsRight = [] |
|||
if(this.buttonsAllIsRight){ |
|||
this.buttonsRight = this.Butttondata |
|||
return |
|||
} |
|||
this.Butttondata.forEach(item=>{ |
|||
if(item.float && item.float == 'right'){ |
|||
this.buttonsRight.push(item) |
|||
}else{ |
|||
this.buttonsLeft.push(item) |
|||
} |
|||
}) |
|||
}, |
|||
// 按钮事件 |
|||
tableButtonClick (val,item) { |
|||
this.$emit('tableButtonClick', val,item) |
|||
}, |
|||
// 搜索 |
|||
quicklySearchClick(val,option){ |
|||
this.$emit('quicklySearchClick', val,option) |
|||
}, |
|||
// 清除搜索 |
|||
quicklySearchClear(val,option){ |
|||
this.$emit('quicklySearchClear', val,option) |
|||
}, |
|||
// 获取快速搜索的节点，便于其他组件清空搜索值 |
|||
getQuicklySearchDom(){ |
|||
return this.$refs.quicklySearchDomRef |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss"> |
|||
.tableNavBtnsContent{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
.tableNavRightBtns{ |
|||
display: flex; |
|||
margin-left: 10px; |
|||
.currenButton .el-button { |
|||
margin-left: 10px !important; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,60 @@ |
|||
<template> |
|||
<div class="currenButton clearfix"> |
|||
<el-button |
|||
v-for="(item, index) in Butttondata" :key="index" |
|||
v-show="typeof item.hide == 'function' ? !item.hide() : !item.hide" |
|||
:type="item.type" |
|||
:icon="item.icon" |
|||
:plain="item.plain" |
|||
:round="item.round" |
|||
:circle="item.circle" |
|||
:size="item.size" |
|||
:style="{ |
|||
float:item.float, |
|||
background:item.background, |
|||
borderColor:item.background, |
|||
}" |
|||
:class="item.class" |
|||
@click="tableButtonClick(item.name,item)" |
|||
>{{ item.label }}</el-button> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import permission from "@/directive/permission/index" |
|||
export default { |
|||
directives: { permission }, |
|||
props: { |
|||
Butttondata: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
}, |
|||
mounted(){ |
|||
window.addEventListener('setItemEvent', (item) => { |
|||
if (item.key.indexOf('tableColumns') > -1) { |
|||
this.initButtonType(item) |
|||
} |
|||
}) |
|||
}, |
|||
methods:{ |
|||
initButtonType(changeItem){ |
|||
let _num = 0 |
|||
let _new = JSON.parse(changeItem.newValue) |
|||
_new.forEach((item) => { |
|||
if(item.istrue)_num ++ |
|||
}) |
|||
this.Butttondata.forEach(item=>{ |
|||
// 监听本地缓存【字段配置】缓存，更改按钮type |
|||
if(item.name == 'field'){ |
|||
return item.type = (_num >= _new.length) ? '' : 'warning'; |
|||
} |
|||
}) |
|||
}, |
|||
tableButtonClick (val,item) { |
|||
this.$emit('tableButtonClick', val,item) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,165 @@ |
|||
<template> |
|||
<el-descriptions |
|||
:title="title" |
|||
:column="column" |
|||
:direction="direction" |
|||
:colon="colon" |
|||
:border="border" |
|||
v-loading="currenDescriptionsLoading" |
|||
> |
|||
<template> |
|||
<el-descriptions-item |
|||
:label="item.label" |
|||
v-for="(item, index) in tabsDesTions" |
|||
:key="index" |
|||
:labelStyle="{'text-align': 'right','padding-right':'10px'}" |
|||
> |
|||
<span v-if="item.type && item.type == 'date'">{{ |
|||
propsData[item.prop] | formatOnlyDate |
|||
}}</span> |
|||
<span v-else-if="item.type && item.type == 'dateTime'">{{ |
|||
propsData[item.prop] | formatDate |
|||
}}</span> |
|||
<span v-else-if="item.type && item.type == 'objectDateTime'">{{ |
|||
propsData[item.prop]?propsData[item.prop][item.showProp]:"" | formatDate |
|||
}}</span> |
|||
<span v-else-if="item.type && item.type == 'object'"> |
|||
{{ propsData[item.prop]?propsData[item.prop][item.showProp]:"" }} |
|||
</span> |
|||
<span v-else-if="item.type && item.type == 'filter'"> |
|||
{{ propsData[item.prop] | trigger(item.filters,"label", item.dictType) }} |
|||
</span> |
|||
<span v-else-if="item.type && item.type == 'objectFilter'"> |
|||
{{ propsData[item.prop]?propsData[item.prop][item.showProp]:false | trigger(item.filters,"label") }} |
|||
</span> |
|||
<span v-else-if="item.type && item.type == 'percent'"> |
|||
{{ propsData[item.prop] +'%' }} |
|||
</span> |
|||
<span v-else-if="item.type && item.type == 'uploadPictureCard'"> |
|||
<div id="uploadPictureCardRef">{{propsData[item.prop] | formatDatePicture}}</div> |
|||
</span> |
|||
<span v-else-if="item.type == 'filterList'" > |
|||
{{ propsData[item.prop] | triggerList(item.filters, "label") }} |
|||
</span> |
|||
<!-- 文本域 --> |
|||
<span v-else-if="item.type == 'textarea'"> |
|||
<template> |
|||
<el-input |
|||
:type="item.type" |
|||
v-model="propsData[item.prop]" |
|||
:rows="item.rows" |
|||
:readonly="item.readonly" |
|||
></el-input> |
|||
</template> |
|||
</span> |
|||
<span v-else>{{ propsData[item.prop] ? propsData[item.prop] + "" : propsData[item.prop] }}</span> |
|||
</el-descriptions-item> |
|||
</template> |
|||
<el-descriptions-item |
|||
v-for="item in descriptionsData" |
|||
:label="item.label" |
|||
:key="item.label" |
|||
>{{ item.data }}</el-descriptions-item |
|||
> |
|||
<slot></slot> |
|||
</el-descriptions> |
|||
</template> |
|||
<script> |
|||
import { parseTime } from "@/utils/index" |
|||
import { formatTimeStrToStr } from "@/utils/formatTime" |
|||
import { fileStorage } from "@/api/wms-api" |
|||
|
|||
let that |
|||
export default { |
|||
name:'curren-descriptions', |
|||
data () { |
|||
return { |
|||
// 临时存储文件编号 防止重复请求图片 |
|||
blobName: '', |
|||
currenDescriptionsLoading: false |
|||
} |
|||
}, |
|||
beforeCreate () { |
|||
that = this; |
|||
}, |
|||
filters: { |
|||
formatDate (time) { |
|||
if (time == null) { |
|||
return '-' |
|||
} |
|||
return formatTimeStrToStr(time) |
|||
}, |
|||
formatOnlyDate (time) { |
|||
var date = new Date(time); |
|||
return parseTime(date).substring(0,10) |
|||
}, |
|||
formatDatePicture(val) { |
|||
if (val !== undefined && that.blobName !== val) { |
|||
that.blobName = val |
|||
that.currenDescriptionsLoading = true |
|||
fileStorage({blobName: val}).then(res => { |
|||
var byteString = atob(res.bytes) |
|||
var arrayBuffer = new ArrayBuffer(byteString.length) // 创建缓冲数组 |
|||
var intArray = new Uint8Array(arrayBuffer) // 创建视图 |
|||
for (var i = 0; i < byteString.length; i++) { |
|||
intArray[i] = byteString.charCodeAt(i) |
|||
} |
|||
const blob = new Blob([intArray], { type: '' }) |
|||
var img = new Image() |
|||
img.width="100" |
|||
img.height="100" |
|||
img.src = URL.createObjectURL(blob) |
|||
var otest = document.getElementById("uploadPictureCardRef") |
|||
otest.innerHTML = '' |
|||
otest.appendChild(img) |
|||
that.currenDescriptionsLoading = false |
|||
}).catch(err => { |
|||
console.log(err) |
|||
that.currenDescriptionsLoading = false |
|||
}) |
|||
} |
|||
} |
|||
}, |
|||
props: { |
|||
title: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
colon: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
column: { |
|||
type: Number, |
|||
default: 1 |
|||
}, |
|||
border: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
descriptionsData: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
direction: { |
|||
type: String, |
|||
default: 'horizontal' |
|||
}, |
|||
tabsDesTions: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
propsData: { |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,888 @@ |
|||
<template> |
|||
<div class="currenForm"> |
|||
<!-- @submit.native.prevent 阻止form只有一个input输入框回车触发提交事件 --> |
|||
<el-form |
|||
ref="form" |
|||
:size="size" |
|||
:label-position="labelPosition" |
|||
:inline="inline" |
|||
:label-width="labelWidth" |
|||
:rules="rules" |
|||
:model="searchData" |
|||
@submit.native.prevent |
|||
v-if="!hide ? true : false" |
|||
> |
|||
<el-row :gutter="40"> |
|||
<el-col |
|||
:span="item.colSpan" |
|||
v-for="(item, index) in searchForm" |
|||
:key="index" |
|||
> |
|||
<el-form-item |
|||
:label="item.label" |
|||
:prop="item.showProp ? item.prop + '.' + item.showProp : item.prop" |
|||
v-if="!item.hide ? true : false" |
|||
> |
|||
<!-- 输入框 onkeyup: 正则表达式，用于前端输入校验工作--> |
|||
<!-- :onkeyup="item.onkeyup" --> |
|||
<el-input |
|||
v-if="item.type === 'input'" |
|||
v-model="searchData[item.prop]" |
|||
:maxlength="item.maxlength" |
|||
:onkeyup="itemOnKeyUp(item,searchData[item.prop])" |
|||
clearable |
|||
:disabled="Boolean(item.disabled)" |
|||
:placeholder="item.placeholder || '请输入' + item.label" |
|||
:prefix-icon="item.icon" |
|||
:show-password="item.showPassword" |
|||
@change="changeInput(item.prop,$event)" |
|||
@clear="clearInput(item.prop,$event)" |
|||
@blur=" |
|||
inputPlaceholder($event, item, 'blur',searchData) |
|||
" |
|||
@focus="inputPlaceholder($event, item, 'focus')" |
|||
></el-input> |
|||
<!-- 输入框(有上下增加按钮框) onkeyup: 正则表达式，用于前端输入校验工作--> |
|||
<el-input-number |
|||
v-if="item.type === 'number'" |
|||
v-model="searchData[item.prop]" |
|||
:onkeyup="item.onkeyup" |
|||
:disabled="Boolean(item.disabled)" |
|||
@change="changeInput(item.prop,$event)" |
|||
@clear="clearInput(item.prop,$event)" |
|||
:min="item.min" |
|||
:max="item.max" |
|||
:precision="item.precision" |
|||
class="inputNameberClass" |
|||
@blur=" |
|||
inputPlaceholder($event, item, 'blur',searchData) |
|||
" |
|||
@focus="inputPlaceholder($event, item, 'focus')" |
|||
></el-input-number> |
|||
<!-- 输入框(只能输入数字) onkeyup: 正则表达式，用于前端输入校验工作--> |
|||
<!-- oninput="value=value.replace(/[^\d]/g,'')" --> |
|||
<el-input |
|||
v-if="item.type === 'inputNumber'" |
|||
v-model="searchData[item.prop]" |
|||
:maxlength="item.maxlength" |
|||
:onkeyup="typeNumberOnkeyup(item,searchData[item.prop])" |
|||
clearable |
|||
:disabled="Boolean(item.disabled)" |
|||
:placeholder="item.placeholder || '请输入' + item.label" |
|||
:prefix-icon="item.icon" |
|||
:show-password="item.showPassword" |
|||
@change="changeInput(item.prop,$event)" |
|||
@clear="clearInput(item.prop,$event)" |
|||
@blur=" |
|||
inputPlaceholder($event, item, 'blur',searchData) |
|||
" |
|||
@focus="inputPlaceholder($event, item, 'focus')" |
|||
></el-input> |
|||
<!-- 对象输入框 --> |
|||
<el-input |
|||
v-if="item.type === 'objectInput'" |
|||
v-model="searchData[item.prop][item.showProp]" |
|||
:maxlength="item.maxlength" |
|||
clearable |
|||
:disabled="Boolean(item.disabled)" |
|||
:placeholder="item.placeholder || '请输入' + item.label" |
|||
:prefix-icon="item.icon" |
|||
:show-password="item.showPassword" |
|||
@blur=" |
|||
inputPlaceholder($event, item, 'blur',searchData) |
|||
" |
|||
@focus="inputPlaceholder($event, item, 'focus')" |
|||
></el-input> |
|||
<!-- 对象富文本框 --> |
|||
<el-input |
|||
v-if="item.type === 'objectTextarea'" |
|||
type="textarea" |
|||
v-model="searchData[item.prop][item.showProp]" |
|||
:placeholder="item.placeholder || '请输入' + item.label" |
|||
></el-input> |
|||
<!--查询下拉--> |
|||
<el-autocomplete |
|||
v-if="item.type === 'autocomplete'" |
|||
class="inline-input" |
|||
style="width: 100%" |
|||
v-model="searchData[item.prop]" |
|||
:disabled="Boolean(item.disabled)" |
|||
:fetch-suggestions=" |
|||
(queryString, cb) => { |
|||
querySearch(queryString, cb, item); |
|||
} |
|||
" |
|||
:placeholder="item.placeholder || '请输入' + item.label" |
|||
@select="handleSelect($event, item)" |
|||
> |
|||
<el-button |
|||
slot="append" |
|||
icon="el-icon-search" |
|||
v-if="item.click" |
|||
@click="item.click(item)" |
|||
style="color: #1890ff; background-color: #ffffff" |
|||
></el-button> |
|||
</el-autocomplete> |
|||
<!--对象查询下拉--> |
|||
<el-autocomplete |
|||
v-if="item.type === 'objectAutocomplete'" |
|||
class="inline-input" |
|||
style="width: 100%" |
|||
v-model="searchData[item.prop][item.showProp]" |
|||
:fetch-suggestions=" |
|||
(queryString, cb) => { |
|||
querySearch(queryString, cb, item); |
|||
} |
|||
" |
|||
:placeholder="item.placeholder || '请输入' + item.label" |
|||
@select="handleSelect($event, item)" |
|||
> |
|||
<el-button |
|||
slot="append" |
|||
icon="el-icon-search" |
|||
v-if="item.click" |
|||
@click="item.click(item)" |
|||
style="color: #1890ff; background-color: #ffffff" |
|||
></el-button> |
|||
</el-autocomplete> |
|||
<!-- 文本框 --> |
|||
<el-input |
|||
v-if="item.type === 'textarea'" |
|||
:type="item.type" |
|||
v-model="searchData[item.prop]" |
|||
:rows="item.rows" |
|||
:placeholder="item.placeholder || '请输入' + item.label" |
|||
:maxlength="item.maxlength" |
|||
show-word-limit |
|||
></el-input> |
|||
<!-- 下拉框 --> |
|||
<el-select |
|||
v-if="item.type === 'select'" |
|||
v-model="searchData[item.prop]" |
|||
:loading="selectLoading" |
|||
:clearable="item.clearable" |
|||
:multiple="item.multiple" |
|||
:disabled="Boolean(item.disabled)" |
|||
:filterable="item.filterable" |
|||
:allow-create="item.allowCreate" |
|||
style="width: 100%" |
|||
:placeholder="item.placeholder || '请输入' + item.label" |
|||
@change="changeSelect(item.prop,$event)" |
|||
> |
|||
<el-option |
|||
v-for="(op, index) in selectOptions(item.options) || |
|||
searchOptions['options']" |
|||
:label="op[item.optionsLabel] || op.label" |
|||
:value="op[item.optionsValue] || op.value" |
|||
:key="index" |
|||
></el-option> |
|||
</el-select> |
|||
<!-- 链接接口filter下拉框 --> |
|||
<filterSelect |
|||
v-if="item.type === 'filterSelect'" |
|||
:selectModel="searchData[item.prop]" |
|||
:selectItem="item" |
|||
@filterOptionSelectHandle="filterOptionSelectHandle" |
|||
@filterClearHandle="filterClearHandle(item)" |
|||
></filterSelect> |
|||
<!--对象下拉框 --> |
|||
<el-select |
|||
v-if="item.type === 'objectSelect'" |
|||
v-model="searchData[item.prop][item.showProp]" |
|||
:loading="selectLoading" |
|||
:clearable="item.clearable" |
|||
:multiple="item.multiple" |
|||
:disabled="Boolean(item.disabled)" |
|||
:filterable="item.filterable" |
|||
:allow-create="item.allowCreate" |
|||
style="width: 100%" |
|||
:placeholder="item.placeholder || '请输入' + item.label" |
|||
> |
|||
<el-option |
|||
v-for="(op, index) in selectOptions(item.options) || |
|||
searchOptions['options']" |
|||
:label="op[item.optionsLabel] || op.label" |
|||
:value="op[item.optionsValue] || op.value" |
|||
:key="index" |
|||
></el-option> |
|||
</el-select> |
|||
<!-- 下拉框多选 --> |
|||
<el-select |
|||
v-if="item.type === 'selectArray'" |
|||
v-model="searchData[item.prop]" |
|||
multiple |
|||
:placeholder="item.placeholder || '请选择' + item.label" |
|||
style="width: 100%" |
|||
> |
|||
<el-option |
|||
v-for="(op, index) in selectOptions(item.options) || |
|||
item.searchOptions" |
|||
:label="op[item.optionsLabel] || op.label" |
|||
:value="op[item.optionsValue] || op.value" |
|||
:key="index" |
|||
></el-option> |
|||
</el-select> |
|||
<!-- 单选 --> |
|||
<el-radio-group |
|||
v-if="item.type === 'radio'" |
|||
v-model="searchData[item.prop]" |
|||
:disabled="Boolean(item.disabled)" |
|||
@change="radioChange(item.prop,$event)" |
|||
> |
|||
<el-radio |
|||
v-for="ra in searchOptions[item.radio]" |
|||
:label="ra.id" |
|||
:key="ra.value" |
|||
>{{ ra.label }}</el-radio |
|||
> |
|||
</el-radio-group> |
|||
<!-- 单选按钮 --> |
|||
<el-radio-group |
|||
v-if="item.type === 'radioButton'" |
|||
v-model="searchData[item.prop]" |
|||
@change="item.change && item.change(searchData[item.prop])" |
|||
> |
|||
<el-radio-button |
|||
v-for="ra in searchOptions[item.radios]" |
|||
:label="ra.value" |
|||
:key="ra.value" |
|||
>{{ ra.label }}</el-radio-button |
|||
> |
|||
</el-radio-group> |
|||
<!-- 复选框 --> |
|||
<el-checkbox v-if="item.type === 'checkbox'" :indeterminate="indeterminate" v-model="item.checkAll" @change="handleCheckAllChange($event,item)">全选</el-checkbox> |
|||
<el-checkbox-group |
|||
v-if="item.type === 'checkbox'" |
|||
v-model="searchData[item.prop]" |
|||
@change="handleCheckedCitiesChange($event,item)" |
|||
> |
|||
<el-checkbox |
|||
v-for="ch in searchOptions[item.checkboxs]" |
|||
:label="ch" |
|||
:key="ch" |
|||
>{{ ch }}</el-checkbox |
|||
> |
|||
</el-checkbox-group> |
|||
<!-- 日期 --> |
|||
<el-date-picker |
|||
v-if="item.type === 'date'" |
|||
v-model="searchData[item.prop]" |
|||
style="width: 100%" |
|||
:disabled="Boolean(item.disabled)" |
|||
:placeholder="item.placeholder || '选择日期'" |
|||
value-format="yyyy-MM-dd" |
|||
></el-date-picker> |
|||
<!-- 时间 --> |
|||
<el-time-picker |
|||
v-if="item.type === 'time'" |
|||
v-model="searchData[item.prop]" |
|||
:placeholder="item.placeholder || '选择时间'" |
|||
style="width: 100%" |
|||
:picker-options="{ |
|||
selectableRange: '00:00:00 - 23:59:00', |
|||
}" |
|||
:disabled="Boolean(item.disabled)" |
|||
format="HH:mm" |
|||
value-format="yyyy-MM-ddTHH:mm:ss" |
|||
></el-time-picker> |
|||
<!-- 日期时间 --> |
|||
<el-date-picker |
|||
v-if="item.type === 'dateTime'" |
|||
type="datetime" |
|||
v-model="searchData[item.prop]" |
|||
:placeholder="item.placeholder || '选择日期时间'" |
|||
style="width: 100%" |
|||
format="yyyy-MM-dd HH:mm:ss" |
|||
value-format="yyyy-MM-ddTHH:mm:ss" |
|||
:disabled="Boolean(item.disabled)" |
|||
></el-date-picker> |
|||
<!-- 日期时间 日期有限制 选择范围：当前天及以后--> |
|||
<el-date-picker |
|||
v-if="item.type === 'dateTimelimit'" |
|||
type="datetime" |
|||
v-model="searchData[item.prop]" |
|||
:placeholder="item.placeholder || '选择日期时间'" |
|||
style="width: 100%" |
|||
format="yyyy-MM-dd HH:mm:ss" |
|||
value-format="yyyy-MM-ddTHH:mm:ss" |
|||
:disabled="Boolean(item.disabled)" |
|||
:pickerOptions="endDateTimeLimitPickerOptions()" |
|||
></el-date-picker> |
|||
<!-- 对象日期时间 --> |
|||
<el-date-picker |
|||
v-if="item.type === 'objectDateTime'" |
|||
type="datetime" |
|||
v-model="searchData[item.prop][item.showProp]" |
|||
:placeholder="item.placeholder || '选择日期'" |
|||
style="width: 100%" |
|||
value-format="yyyy-MM-ddTHH:mm:ss" |
|||
:disabled="Boolean(item.disabled)" |
|||
></el-date-picker> |
|||
<!--开始时间结束时间--> |
|||
<div |
|||
class="RangeDateTime" |
|||
v-if="item.type === 'rangeDateTime'" |
|||
style="width: 100%; height: 100%" |
|||
> |
|||
<el-col :span="10"> |
|||
<el-form-item :prop="item.prop + '.' + item.startDate"> |
|||
<el-date-picker |
|||
type="datetime" |
|||
:placeholder="item.placeholder || '开始日期'" |
|||
v-model="searchData[item.prop][item.startDate]" |
|||
style="width: 100%" |
|||
:disabled="Boolean(item.disabled)" |
|||
value-format="yyyy-MM-ddTHH:mm:ss" |
|||
:pickerOptions=" |
|||
startPickerOptions(searchData[item.prop][item.endDate]) |
|||
" |
|||
></el-date-picker> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col class="line" :span="4">-</el-col> |
|||
<el-col :span="10"> |
|||
<el-form-item :prop="item.prop + '.' + item.endDate"> |
|||
<el-date-picker |
|||
type="datetime" |
|||
:placeholder="item.placeholder || '结束日期'" |
|||
v-model="searchData[item.prop][item.endDate]" |
|||
style="width: 100%" |
|||
:disabled="Boolean(item.disabled)" |
|||
value-format="yyyy-MM-ddTHH:mm:ss" |
|||
:pickerOptions=" |
|||
endPickerOptions(searchData[item.prop][item.startDate]) |
|||
" |
|||
></el-date-picker> |
|||
</el-form-item> |
|||
</el-col> |
|||
</div> |
|||
<!-- 开关 --> |
|||
<el-switch |
|||
v-if="item.type === 'switch'" |
|||
v-model="searchData[item.prop]" |
|||
></el-switch> |
|||
<!--文件上传--> |
|||
<currenUpload |
|||
v-if="item.type === 'upload'" |
|||
:limit="item.limit" |
|||
:beforeUpload="beforeAvatarUpload" |
|||
:searchData="searchData[item.prop]" |
|||
@httpRequestfiles="httpRequestfiles($event, item.prop)" |
|||
@handleRemove="handleRemove($event, item.prop)" |
|||
> |
|||
</currenUpload> |
|||
<!--文件上传——列表形式--> |
|||
<currenUploadList |
|||
v-if="item.type === 'uploadList'" |
|||
:limit="item.limit" |
|||
:picExt="item.picExt" |
|||
:searchData="searchData[item.prop]" |
|||
@uploadListView="uploadListView" |
|||
@changeUpload="changeUpload($event, item)" |
|||
@handleRemove="handleRemove($event, item.prop)" |
|||
> |
|||
</currenUploadList> |
|||
<!-- 缩略图上传 --> |
|||
<currenUploadPictureCard |
|||
v-if="item.type === 'uploadPictureCard'" |
|||
:limit="item.limit" |
|||
:multiple="item.multiple" |
|||
:picExt="item.picExt" |
|||
:searchData="searchData[item.prop]" |
|||
@changeUpload="changeUpload($event, item)" |
|||
@handleRemove="handleRemove($event, item.prop)" |
|||
> |
|||
</currenUploadPictureCard> |
|||
<el-button |
|||
v-if="item.type === 'button'" |
|||
type="primary" |
|||
size="mini" |
|||
@click="item.click(item)" |
|||
> |
|||
{{item.buttonText}} |
|||
</el-button> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<slot></slot> |
|||
</el-form> |
|||
<div v-if="isHandle" class="formButton"> |
|||
<!-- :style="{float:item.float}" 自定义按钮显示位置 --> |
|||
<el-button |
|||
v-for="(item, index) in searchHandle" |
|||
:key="item.label" |
|||
:type="item.type" |
|||
:size="item.size || size" |
|||
:loading="loading" |
|||
:style="{float:item.float}" |
|||
@click="submitForm(index,item)" |
|||
>{{ item.label }}</el-button |
|||
> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import currenUpload from "@/components/currenUpload"; |
|||
import currenUploadList from "@/components/currenUploadList"; |
|||
import currenUploadPictureCard from "@/components/currenUploadPictureCard"; |
|||
import filterSelect from "@/components/filterSelect" |
|||
import { getMatchRegConformValue } from "@/utils/index" |
|||
export default { |
|||
name: "currenForm", |
|||
components: { |
|||
currenUpload, |
|||
currenUploadList, |
|||
currenUploadPictureCard, |
|||
filterSelect |
|||
}, |
|||
props: { |
|||
loading: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
labelPosition: { |
|||
type: String, |
|||
default: "right", |
|||
}, |
|||
isHandle: { |
|||
type: Boolean, |
|||
default: true, |
|||
}, |
|||
inline: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
labelWidth: { |
|||
type: String, |
|||
default: "140px", |
|||
}, |
|||
size: { |
|||
type: String, |
|||
default: "mini", |
|||
}, |
|||
searchForm: { |
|||
type: Array, |
|||
default: () => { |
|||
return []; |
|||
}, |
|||
}, |
|||
searchHandle: { |
|||
type: Array, |
|||
default: () => { |
|||
return []; |
|||
}, |
|||
}, |
|||
searchData: { |
|||
type: Object, |
|||
default: () => { |
|||
return {}; |
|||
}, |
|||
}, |
|||
searchOptions: { |
|||
type: Object, |
|||
default: () => { |
|||
return {}; |
|||
}, |
|||
}, |
|||
rules: { |
|||
type: Object, |
|||
default: () => { |
|||
return {}; |
|||
}, |
|||
}, |
|||
formSpan: { |
|||
type: Number, |
|||
default: 24, |
|||
}, |
|||
hide: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
restaurants: [], |
|||
indeterminate: false, |
|||
selectLoading: false, |
|||
}; |
|||
}, |
|||
computed: { |
|||
startPickerOptions() { |
|||
return function (val) { |
|||
return { |
|||
disabledDate(time) { |
|||
if (val) { |
|||
return ( |
|||
// time.getTime() > Date.now() || |
|||
// time.getTime() > new Date(that.CreateFormData.endDate).getTime() |
|||
time.getTime() > val |
|||
); |
|||
} |
|||
// return time.getTime() > Date.now(); //实现1效果 |
|||
}, |
|||
}; |
|||
}; |
|||
}, |
|||
endPickerOptions() { |
|||
// const that = this; |
|||
return function (val) { |
|||
return { |
|||
disabledDate(time) { |
|||
if (val) { |
|||
return ( |
|||
// time.getTime() > Date.now() || |
|||
// time.getTime() < new Date(that.CreateFormData.startDate).getTime() |
|||
time.getTime() < val |
|||
); |
|||
} |
|||
// return time.getTime() > Date.now(); //实现1效果 |
|||
}, |
|||
}; |
|||
}; |
|||
}, |
|||
// 日期时间组件，选择范围：当前天及以后 |
|||
endDateTimeLimitPickerOptions() { |
|||
return function () { |
|||
return { |
|||
disabledDate(time) { |
|||
return ( |
|||
time.getTime() < Date.now() - 8.64e7 |
|||
); |
|||
}, |
|||
}; |
|||
}; |
|||
}, |
|||
selectOptions() { |
|||
return (val) => { |
|||
if (val) { |
|||
let options = this.$staticOptions[val]; |
|||
if (options) { |
|||
return options(); |
|||
} else { |
|||
return []; |
|||
} |
|||
} else { |
|||
return false; |
|||
} |
|||
}; |
|||
}, |
|||
}, |
|||
mounted() { |
|||
// 单选 ， 默认设置 |
|||
this.searchForm.forEach(item => { |
|||
if (item.type === 'radio') { |
|||
this.searchData[item.prop] = item.value + '' |
|||
} |
|||
if (item.type === 'checkbox') { |
|||
this.searchData[item.prop].push(item.value) |
|||
} |
|||
}) |
|||
}, |
|||
methods: { |
|||
// type=input情况下，框实时校验 |
|||
itemOnKeyUp(item,value){ |
|||
if(item.onkeyup){ |
|||
return item.onkeyup() |
|||
}else{ |
|||
if(value && item.validType){ |
|||
this.searchData[item.prop]=getMatchRegConformValue(item.validType,value,item.pointNumberFixed) |
|||
} |
|||
} |
|||
}, |
|||
// 数字类型input框onkeyup最大最小值处理 |
|||
typeNumberOnkeyup(item,value){ |
|||
if(value){ |
|||
// 添加pointNumberFixed 可以输入小数 |
|||
if (item.pointNumberFixed) { |
|||
let _fixed = item.pointNumberFixed ? Number(item.pointNumberFixed) : 100 |
|||
let reg = new RegExp(`\\d+\\.?\\d{0,${_fixed}}`); |
|||
let _match = String(value).match(reg) |
|||
this.searchData[item.prop] = _match ? _match[0] : _match |
|||
} else { |
|||
let _match = String(value).match(/\d+/)//正整数 |
|||
this.searchData[item.prop] = _match?_match[0]:_match |
|||
} |
|||
} |
|||
if(this.searchData[item.prop] > item.max){ |
|||
this.searchData[item.prop] = item.max |
|||
} |
|||
if(this.searchData[item.prop] && this.searchData[item.prop] < item.min){ |
|||
this.searchData[item.prop] = item.min |
|||
} |
|||
if(item.onkeyup)item.onkeyup() |
|||
}, |
|||
//复选框全选 |
|||
handleCheckAllChange(val,item) { |
|||
const options = [] |
|||
if(val){ |
|||
this.searchOptions[item.checkboxs].forEach(items=>{ |
|||
options.push(items) |
|||
}) |
|||
} |
|||
this.searchData[item.prop] = val ? options : []; |
|||
this.indeterminate = false; |
|||
}, |
|||
//取消全选 |
|||
handleCheckedCitiesChange(value,item) { |
|||
let checkedCount = value.length; |
|||
item.checkAll = checkedCount === this.searchOptions[item.checkboxs].length; |
|||
this.indeterminate = checkedCount > 0 && checkedCount < this.searchOptions[item.checkboxs].length; |
|||
}, |
|||
inputPlaceholder(val, item, type, func) { |
|||
if (item.valueType) { |
|||
if (type == "focus") { |
|||
console.log("focus") |
|||
//影响必填项，2023-1-3 placeholder不处理 |
|||
// val.target.placeholder = '0'; |
|||
// if (val.target.value != "") { |
|||
// val.target.placeholder = val.target.value; |
|||
// val.target.value = ""; |
|||
// } |
|||
} else if (type == "blur") { |
|||
console.log("blur") |
|||
// val.target.value = "0" |
|||
val.target.value = val.target.value.toString().replace(/[^\d.]/g,'') |
|||
// if (val.target.value == "") { |
|||
// // if (val.target.placeholder.indexOf('请输入') == -1) { |
|||
// val.target.value = val.target.placeholder; |
|||
// // } |
|||
// } |
|||
if(item.showProp){ |
|||
if(val.target.value != ""){func[item.prop][item.showProp]= Number(val.target.value)} |
|||
}else{ |
|||
if(val.target.value != ""){func[item.prop]= Number(val.target.value)} |
|||
} |
|||
// item.valueType |
|||
// ? (this.searchData[item.prop] = item.valueType( |
|||
// this.searchData[item.prop] |
|||
// )) |
|||
// : () => { |
|||
// return; |
|||
// } |
|||
} |
|||
} |
|||
}, |
|||
querySearch(queryString, cb, val) { |
|||
const { options, optionsValue, optionsLabel } = val; |
|||
let func = val.focus; |
|||
let data = {}; |
|||
if (queryString) { |
|||
data.filter = [ |
|||
{ |
|||
logic: "And", |
|||
column: optionsValue, |
|||
action: "Like", |
|||
value: queryString, |
|||
}, |
|||
// { |
|||
// logic: "Or", |
|||
// column: optionsLabel, |
|||
// action: "Like", |
|||
// value: queryString |
|||
// } |
|||
]; |
|||
} |
|||
func(data).then((res) => { |
|||
var restaurants = this.searchOptions["options"]; |
|||
var results = queryString |
|||
? restaurants.filter( |
|||
this.createFilter(queryString, optionsValue, optionsLabel) |
|||
) |
|||
: restaurants; |
|||
results.forEach((key) => { |
|||
if (typeof optionsValue === "string") { |
|||
key.value = key[optionsValue] + "----" + key[optionsLabel]; |
|||
} else { |
|||
key.value = |
|||
key[optionsValue[0]][optionsValue[1]] + |
|||
"----" + |
|||
key[optionsLabel]; |
|||
} |
|||
}); |
|||
// 调用 callback 返回建议列表的数据 |
|||
cb(results); |
|||
}); |
|||
}, |
|||
createFilter(queryString, optionsValue, optionsLabel) { |
|||
return (restaurant) => { |
|||
if (typeof optionsValue === "string") { |
|||
restaurant.value = |
|||
restaurant[optionsValue] + "----" + restaurant[optionsLabel]; |
|||
} else { |
|||
restaurant.value = |
|||
restaurant[optionsValue[0]][optionsValue[1]] + |
|||
"----" + |
|||
restaurant[optionsLabel]; |
|||
} |
|||
return ( |
|||
restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) != |
|||
-1 |
|||
); |
|||
}; |
|||
}, |
|||
handleSelect(item, val) { |
|||
let data = this.searchData; |
|||
if (!val.showProp) { |
|||
if (typeof val.optionsValue === "string") { |
|||
data[val.prop] = item[val.optionsValue]; |
|||
} else { |
|||
data[val.prop] = item[val.optionsValue[0]][val.optionsValue[1]]; |
|||
} |
|||
} else { |
|||
if (typeof val.optionsValue === "string") { |
|||
data[val.prop][val.showProp] = item[val.optionsValue]; |
|||
} else { |
|||
data[val.prop][val.showProp] = |
|||
item[val.optionsValue[0]][val.optionsValue[1]]; |
|||
} |
|||
} |
|||
this.$emit("push", item, val); |
|||
}, |
|||
// filterSelect点击option事件 |
|||
filterOptionSelectHandle(item,props,val){ |
|||
this.searchData[props['prop']] = val |
|||
this.$emit("push", item, props); |
|||
}, |
|||
// filterSelect点击清除事件 |
|||
filterClearHandle(item){ |
|||
this.searchData[item['prop']] = "" |
|||
this.$emit("clear",item) |
|||
}, |
|||
// selectFocus (val, item) { |
|||
// this.selectLoading = true; |
|||
// let func = item.focus |
|||
// func({}).then(res => { |
|||
// this.selectLoading = false; |
|||
// }) |
|||
// }, |
|||
// dataFilter (query, item) { |
|||
// const { options, optionsValue, optionsLabel } = item |
|||
// let func = item.focus |
|||
// let data = {} |
|||
// this.selectLoading = true; |
|||
// if (query) { |
|||
// data.filter = { |
|||
// logic: "And", |
|||
// column: optionsLabel, |
|||
// action: "Like", |
|||
// value: query |
|||
// } |
|||
// } |
|||
// setTimeout(() => { |
|||
// func(data).then(res => { |
|||
// this.selectLoading = false; |
|||
// }) |
|||
// }, 200); |
|||
// // this.options = []; |
|||
// }, |
|||
submitForm(val,item) { |
|||
this.$emit("submitForm", val, this.$refs.form,item); |
|||
}, |
|||
getDom(){ |
|||
return this.$refs.form |
|||
}, |
|||
handleClick(val) { |
|||
this.$emit("handleClick", val); |
|||
}, |
|||
httpRequestfiles(val, item) { |
|||
this.searchData[item].push(val); |
|||
}, |
|||
beforeAvatarUpload(val, data) { |
|||
const repeat = data.filter((item) => { |
|||
return item.name == val.name; |
|||
}); |
|||
if (repeat.length != 0) { |
|||
this.$errorMsg("文件重复"); |
|||
return false; |
|||
} else { |
|||
return true; |
|||
} |
|||
}, |
|||
handleRemove(val, item) { |
|||
this.searchData[item] = val |
|||
}, |
|||
changeUpload(val, item){ |
|||
// 判断上传文件是否满足类型 |
|||
let suffix = val.name.substring(val.name.lastIndexOf('.') + 1) |
|||
if (item.picExt.indexOf(suffix) === -1) { |
|||
this.$warningMsg('上传文件只能是 ' + item.picExt + '格式!') |
|||
this.searchData[item.prop] = [] |
|||
return false |
|||
} else { |
|||
this.searchData[item.prop].push(val); |
|||
} |
|||
}, |
|||
uploadListView() { |
|||
this.$emit('uploadListView') |
|||
}, |
|||
radioChange(prop, val) { |
|||
this.$emit("radioChange", prop, val) |
|||
}, |
|||
changeInput(prop, val) { |
|||
this.$emit("changeInput", prop, val) |
|||
}, |
|||
clearInput(prop, val) { |
|||
this.$emit("clearInput", prop, val) |
|||
}, |
|||
changeSelect(prop, val) { |
|||
this.$emit("changeSelect", prop, val) |
|||
}, |
|||
|
|||
restrictionRule(item, prop) { |
|||
|
|||
if(prop) { |
|||
console.log('item',item) |
|||
console.log('prop', prop) |
|||
console.log('this.searchData', this.searchData) |
|||
console.log(this.searchData[prop]) |
|||
if (this.searchData[prop]) { |
|||
return false |
|||
} else { |
|||
return true |
|||
} |
|||
} else { |
|||
return true |
|||
} |
|||
} |
|||
|
|||
// 单一文件上传输入框——上传文件提示 |
|||
// handleExceed (val) { |
|||
// this.$warningMsg('最多上传1个文件') |
|||
// } |
|||
// //自定义select搜索 |
|||
// dataFilter (val, data) { |
|||
// if (!data) { |
|||
// return; |
|||
// } else { |
|||
// this.$emit(data, val); |
|||
// } |
|||
// }, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
// .formButton { |
|||
// text-align: right; |
|||
// } |
|||
.inputNameberClass { |
|||
width: 100%; |
|||
} |
|||
.el-row { |
|||
::v-deep .el-form-item__content { |
|||
position: relative; |
|||
font-size: 14px; |
|||
} |
|||
.RangeDateTime { |
|||
::v-deep .el-col { |
|||
padding: 0 !important; |
|||
} |
|||
.line { |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
::v-deep .el-form-item__label{ |
|||
color: #999 !important; |
|||
font-weight: normal !important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,761 @@ |
|||
<template> |
|||
<!-- <div> --> |
|||
<el-table |
|||
:id="_uid" |
|||
v-loading="tableLoading" |
|||
element-loading-text="拼命加载中..." |
|||
@sort-change="sortChange" |
|||
@selection-change="handleSelectionChange" |
|||
ref="multipleTable" |
|||
:data="tableData" |
|||
height="85%" |
|||
row-key="id" |
|||
stripe |
|||
border |
|||
style="width: 100%" |
|||
:tree-props="treeProps" |
|||
:cell-style="cellStyle" |
|||
> |
|||
<el-table-column v-if="selectionTable" fixed="left" type="selection" /> |
|||
<el-table-column v-if="isShowIndex" type="index" fixed="left" label="序号" width="50" /> |
|||
<el-table-column |
|||
v-for="(item, index) in TableSize" |
|||
:key="index" |
|||
:prop="item.showProp ? item.prop + '.' + item.showProp : item.prop" |
|||
:sortable="item.sortable" |
|||
:fixed="item.fixed" |
|||
:show-overflow-tooltip="true" |
|||
:width="item.width" |
|||
align="center" |
|||
> |
|||
<template #header> |
|||
<span>{{ item.label }}</span> |
|||
<i style="color: #f56c6c" v-if="item.rules && requiredRules">*</i> |
|||
</template> |
|||
<template slot-scope="scope"> |
|||
<el-form> |
|||
<el-form-item |
|||
v-if="item.type == 'input'" |
|||
:onkeyup="itemOnKeyUp(item,item.prop,scope.$index)" |
|||
:prop="'details.' + scope.$index + '.' + item.prop" |
|||
:rules="item.rules" |
|||
> |
|||
<el-input |
|||
:placeholder="'请输入' + item.label" |
|||
:disabled="Boolean(item.disabled) || Boolean(scope.row['disabled'])" |
|||
v-model="scope.row[item.prop]" |
|||
@blur=" |
|||
inputPlaceholder($event, item, 'blur',scope.row) |
|||
" |
|||
@focus="inputPlaceholder($event, item, 'focus')" |
|||
clearable |
|||
> |
|||
</el-input> |
|||
</el-form-item> |
|||
<!-- 输入框(数字) onkeyup: 正则表达式，用于前端输入校验工作--> |
|||
<el-form-item |
|||
v-if="item.type == 'inputNumber'" |
|||
:prop="'details.' + scope.$index + '.' + item.prop" |
|||
:rules="item.rules" |
|||
> |
|||
<el-input |
|||
v-model="scope.row[item.prop]" |
|||
:maxlength="item.maxlength" |
|||
:onkeyup="typeNumberOnkeyup(item,item.prop,scope.$index)" |
|||
clearable |
|||
:disabled="Boolean(item.disabled)" |
|||
:placeholder="'请输入' + item.label" |
|||
:prefix-icon="item.icon" |
|||
:show-password="item.showPassword" |
|||
@clear="clearInput(item.prop,$event)" |
|||
@blur=" |
|||
inputPlaceholder($event, item, 'blur',scope.row) |
|||
" |
|||
@focus="inputPlaceholder($event, item, 'focus')" |
|||
></el-input> |
|||
</el-form-item> |
|||
<el-form-item |
|||
v-if="item.type == 'objectInput'" |
|||
:prop=" |
|||
'details.' + scope.$index + '.' + item.prop + '.' + item.showProp |
|||
" |
|||
:rules="item.rules" |
|||
> |
|||
<el-input |
|||
:placeholder="'请输入' + item.label" |
|||
v-model="scope.row[item.prop][item.showProp]" |
|||
:disabled="Boolean(item.disabled) || Boolean(scope.row['disabled'])" |
|||
@blur=" |
|||
inputPlaceholder($event, item, 'blur', scope.row) |
|||
" |
|||
@focus="inputPlaceholder($event, item, 'focus')" |
|||
clearable |
|||
> |
|||
</el-input> |
|||
</el-form-item> |
|||
<!-- 下拉框 --> |
|||
<el-select |
|||
v-if="item.type === 'select'" |
|||
v-model="scope.row[item.prop]" |
|||
:loading="selectLoading" |
|||
:clearable="item.clearable" |
|||
:multiple="item.multiple" |
|||
:disabled="Boolean(item.disabled) || Boolean(scope.row['disabled'])" |
|||
:filterable="item.filterable" |
|||
:allow-create="item.allowCreate" |
|||
style="width: 100%" |
|||
:placeholder="'请输入' + item.label" |
|||
> |
|||
<el-option |
|||
v-for="(op, index) in selectOptions(item.options) || |
|||
searchOptions['options']" |
|||
:label="op[item.optionsLabel] || op.label" |
|||
:value="op[item.optionsValue] || op.value" |
|||
:key="index" |
|||
></el-option> |
|||
</el-select> |
|||
<!--对象下拉框 --> |
|||
<el-select |
|||
v-if="item.type === 'objectSelect'" |
|||
v-model="scope.row[item.prop][item.showProp]" |
|||
:loading="selectLoading" |
|||
:clearable="item.clearable" |
|||
:multiple="item.multiple" |
|||
:disabled="Boolean(item.disabled) || Boolean(scope.row['disabled'])" |
|||
:filterable="item.filterable" |
|||
:allow-create="item.allowCreate" |
|||
style="width: 100%" |
|||
:placeholder="'请输入' + item.label" |
|||
> |
|||
<el-option |
|||
v-for="(op, index) in selectOptions(item.options) || |
|||
searchOptions['options']" |
|||
:label="op[item.optionsLabel] || op.label" |
|||
:value="op[item.optionsValue] || op.value" |
|||
:key="index" |
|||
></el-option> |
|||
</el-select> |
|||
<!--查询下拉--> |
|||
<el-form-item |
|||
v-if="item.type === 'autocomplete'" |
|||
:prop="'details.' + scope.$index + '.' + item.prop" |
|||
:rules="item.rules" |
|||
> |
|||
<el-autocomplete |
|||
class="inline-input" |
|||
style="width: 100%" |
|||
:disabled="Boolean(item.disabled) || Boolean(scope.row['disabled'])" |
|||
v-model="scope.row[item.prop]" |
|||
:fetch-suggestions=" |
|||
(queryString, cb) => { |
|||
querySearch(queryString, cb, item, scope); |
|||
} |
|||
" |
|||
:placeholder="'请输入' + item.label" |
|||
@select="handleSelect($event, item, scope)" |
|||
> |
|||
<!-- <template slot-scope="{item}"> |
|||
<div class="name" style="color:green">{{item.value = item.name}}</div> |
|||
<div class="name" >{{item.address = item.code}}</div> |
|||
</template> --> |
|||
<el-button |
|||
v-if="item.click" |
|||
slot="append" |
|||
icon="el-icon-search" |
|||
@click="item.click({ scope, item })" |
|||
style="color: #1890ff; background-color: #ffffff" |
|||
></el-button> |
|||
</el-autocomplete> |
|||
</el-form-item> |
|||
<!-- 对象查询下拉 --> |
|||
<el-form-item |
|||
v-if="item.type === 'objectAutocomplete'" |
|||
:prop=" |
|||
'details.' + scope.$index + '.' + item.prop + '.' + item.showProp |
|||
" |
|||
:rules="item.rules" |
|||
> |
|||
<el-autocomplete |
|||
class="inline-input" |
|||
style="width: 100%" |
|||
:disabled="Boolean(item.disabled) || Boolean(scope.row['disabled'])" |
|||
v-model="scope.row[item.prop][item.showProp]" |
|||
:fetch-suggestions=" |
|||
(queryString, cb) => { |
|||
querySearch(queryString, cb, item, scope); |
|||
} |
|||
" |
|||
:placeholder="'请输入' + item.label" |
|||
@select="handleSelect($event, item, scope)" |
|||
> |
|||
<!-- <template slot-scope="{item}"> |
|||
<div class="name" style="color:green">{{item.value = item.name}}</div> |
|||
<div class="name" >{{item.address = item.code}}</div> |
|||
</template> --> |
|||
<el-button |
|||
v-if="item.click" |
|||
slot="append" |
|||
icon="el-icon-search" |
|||
@click="item.click({ scope, item })" |
|||
style="color: #1890ff; background-color: #ffffff" |
|||
></el-button> |
|||
</el-autocomplete> |
|||
</el-form-item> |
|||
<!-- <el-form-item v-if="item.type == 'inputEnum'" :prop="item.prop"> |
|||
<el-input |
|||
placeholder="请输入内容" |
|||
v-model="scope.row[item.prop]" |
|||
clearable |
|||
> |
|||
</el-input> |
|||
</el-form-item> --> |
|||
|
|||
<el-form-item |
|||
v-if="item.type == 'dateTimeInput'" |
|||
:prop="'details.' + scope.$index + '.' + item.prop" |
|||
:rules="item.rules" |
|||
> |
|||
<el-date-picker |
|||
type="datetime" |
|||
v-model="scope.row[item.prop]" |
|||
placeholder="选择日期" |
|||
style="width: 100%" |
|||
:disabled="Boolean(item.disabled) || Boolean(scope.row['disabled'])" |
|||
value-format="yyyy-MM-ddTHH:mm:ss.sssZ" |
|||
format="yyyy-MM-dd" |
|||
></el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item |
|||
v-if="item.type == 'objectDateTimeInput'" |
|||
:prop="'details.' + scope.$index + '.' + item.prop + '.' + item.showProp" |
|||
:rules="item.rules" |
|||
> |
|||
<el-date-picker |
|||
type="datetime" |
|||
v-model="scope.row[item.prop][item.showProp]" |
|||
placeholder="选择日期" |
|||
style="width: 100%" |
|||
:disabled="Boolean(item.disabled) || Boolean(scope.row['disabled'])" |
|||
value-format="yyyy-MM-ddTHH:mm:ss.sssZ" |
|||
format="yyyy-MM-dd" |
|||
></el-date-picker> |
|||
</el-form-item> |
|||
<!-- table表添加按钮事件 v-show="scope.row.number == 'PRJ202210060001'" --> |
|||
<el-form-item v-if="item.type == 'button'" > |
|||
<el-button |
|||
v-show="scope.row[item.prop]==undefined?true:false" |
|||
type="primary" |
|||
size="mini" |
|||
@click="buttonClick(scope.row, scope.$index, item.label)" |
|||
>{{item.label}}</el-button> |
|||
</el-form-item> |
|||
|
|||
<span v-if="item.type == 'object'"> |
|||
{{ scope.row[item.prop] ? scope.row[item.prop][item.showProp] : "" }} |
|||
</span> |
|||
<span v-if="item.type == 'objectDateTime'"> |
|||
{{ scope.row[item.prop]? scope.row[item.prop][item.showProp]: "" | formatDate }} |
|||
</span> |
|||
<span v-if="item.type == 'dateTime'"> |
|||
{{ scope.row[item.prop] | formatDate }} |
|||
</span> |
|||
<!-- 调用主表信息 --> |
|||
<span v-else-if="item.type && item.type == 'outerMainFilter'"> |
|||
{{ propsData[item.showProp] }} |
|||
</span> |
|||
<el-tag |
|||
v-if="item.type == 'tagFilter'" |
|||
:effect="'dark'" |
|||
size="medium" |
|||
class="tagFilterTypeDarkItem" |
|||
:color="scope.row[item.prop] | trigger(item.filters, 'background')" |
|||
> |
|||
{{ scope.row[item.prop] | trigger(item.filters, "label") }} |
|||
</el-tag> |
|||
<span |
|||
v-if="item.type == 'filter'" |
|||
:style="scope.row[item.prop]" |
|||
> |
|||
{{ scope.row[item.prop] | trigger(item.filters, "label", item.dictType) }} |
|||
</span> |
|||
<span |
|||
v-if="item.type == 'objectFilter'" |
|||
:style="scope.row[item.prop][item.showProp]" |
|||
> |
|||
{{ scope.row[item.prop][item.showProp] | trigger(item.filters, "label") }} |
|||
</span> |
|||
<span |
|||
v-if="item.type == 'name' || !item.type" |
|||
@click="item.type == 'name' && inlineDialog(scope.row)" |
|||
:class="{ spamHover: item.type == 'name' }" |
|||
>{{ scope.row[item.prop] }}</span |
|||
> |
|||
</el-form> |
|||
</template> |
|||
</el-table-column> |
|||
<slot></slot> |
|||
</el-table> |
|||
<!-- <pre style="text-align: left"> |
|||
{{ tableColumns }} |
|||
</pre> |
|||
<hr /> |
|||
<pre style="text-align: left"> |
|||
{{ tableData }} |
|||
</pre> --> |
|||
<!-- </div> --> |
|||
</template> |
|||
<script> |
|||
import Sortable from "sortablejs"; |
|||
import { formatTimeStrToStr } from "@/utils/formatTime"; |
|||
import { getMatchRegConformValue } from "@/utils/index" |
|||
import _ from "lodash"; |
|||
export default { |
|||
name: "currenTable", |
|||
filters: { |
|||
formatDate(time) { |
|||
if (time == null) { |
|||
return '-' |
|||
} |
|||
return formatTimeStrToStr(time) |
|||
}, |
|||
}, |
|||
props: { |
|||
propsData: { |
|||
type: Object, |
|||
default: () => { |
|||
return {}; |
|||
}, |
|||
}, |
|||
tableData: { |
|||
type: Array, |
|||
default: () => { |
|||
return []; |
|||
}, |
|||
}, |
|||
tableLoading: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
tableColumns: { |
|||
type: Array, |
|||
default: () => { |
|||
return []; |
|||
}, |
|||
}, |
|||
selectionTable: { |
|||
type: Boolean, |
|||
default: true, |
|||
}, |
|||
requiredRules: { |
|||
type: Boolean, |
|||
default: true, |
|||
}, |
|||
searchOptions: { |
|||
type: Object, |
|||
default: () => { |
|||
return {}; |
|||
}, |
|||
}, |
|||
treeProps: { |
|||
type: Object, |
|||
default: () => { |
|||
return {}; |
|||
} |
|||
}, |
|||
isShowIndex: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
cellStyle: { |
|||
type: Function, |
|||
default: () => { |
|||
return Function; |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
dropCol: null, |
|||
selectLoading: false, |
|||
// TableSize: [], |
|||
random: '' |
|||
}; |
|||
}, |
|||
computed: { |
|||
selectOptions() { |
|||
return (val) => { |
|||
if (val) { |
|||
let options = this.$staticOptions[val]; |
|||
if (options) { |
|||
return options(); |
|||
} else { |
|||
return []; |
|||
} |
|||
} else { |
|||
return false; |
|||
} |
|||
}; |
|||
}, |
|||
TableSize(){ |
|||
return this.tableColumnsFilter() |
|||
} |
|||
}, |
|||
watch: { |
|||
tableData: { |
|||
handler(val, oldVal) { |
|||
this.$nextTick(() => { |
|||
this.$refs.multipleTable.doLayout(); |
|||
// this.$forceUpdate() |
|||
}); |
|||
}, |
|||
immediate: false, |
|||
} |
|||
}, |
|||
activated() { |
|||
this.$refs.multipleTable.doLayout(); |
|||
}, |
|||
created() { |
|||
|
|||
}, |
|||
// beforeUpdate () { |
|||
// this.$nextTick(() => { |
|||
// this.$refs.multipleTable.doLayout() |
|||
// }) |
|||
// }, |
|||
mounted() { |
|||
// this.tableColumnsFilter() |
|||
this.random = this._uid |
|||
// this.rowDrop() |
|||
// this.columnDrop(); |
|||
// this.tableColumns.forEach(item => { |
|||
// if (item.focus) { |
|||
// item.focus() |
|||
// } |
|||
// }) |
|||
}, |
|||
methods: { |
|||
// type=input情况下，框实时校验 |
|||
itemOnKeyUp(item,value,index){ |
|||
if(item.onkeyup){ |
|||
return item.onkeyup() |
|||
}else{ |
|||
if(this.tableData[index][value] && item.validType){ |
|||
this.tableData[index][value]=getMatchRegConformValue(item.validType,this.tableData[index][value],item.pointNumberFixed) |
|||
} |
|||
} |
|||
}, |
|||
// 数字类型input框onkeyup最大最小值处理 |
|||
typeNumberOnkeyup(item,value,index){ |
|||
if(this.tableData[index][value]){ |
|||
let _match = String(this.tableData[index][value]).match(/\d+/)//正整数 |
|||
this.tableData[index][value] = _match?_match[0]:_match |
|||
} |
|||
if(this.tableData[index][value] > item.max){ |
|||
this.tableData[index][value] = item.max |
|||
} |
|||
if(this.tableData[index][value] && this.tableData[index][value] < item.min){ |
|||
this.tableData[index][value] = item.min |
|||
} |
|||
if(item.onkeyup)item.onkeyup() |
|||
}, |
|||
tableColumnsFilter() { |
|||
let widthSize = _.cloneDeep(this.tableColumns); |
|||
for(let i = 0;i<widthSize.length;i++){ |
|||
let item = widthSize[i] |
|||
if (item.type == "autocomplete" || item.type == "objectAutocomplete") { |
|||
item.width = item.width ? item.width: "300px"; |
|||
} else if (item.type == "input" || item.type == "objectInput") { |
|||
if (item.width == '100%') { |
|||
item.width = '' |
|||
} else { |
|||
item.width = item.width ? item.width: "200px"; |
|||
} |
|||
} else if ( |
|||
item.type == "dateTimeInput" || |
|||
item.type == "objectDateTimeInput" |
|||
) { |
|||
item.width =item.width ? item.width: "200px"; |
|||
} else if (item.type == "objectDateTime" || item.type == "dateTime") { |
|||
item.width =item.width ? item.width: "200px"; |
|||
} else if (item.width == '100%') { |
|||
item.width = '' |
|||
} else { |
|||
item.width =item.width ? item.width: "150px"; |
|||
} |
|||
} |
|||
// this.TableSize = widthSize; |
|||
return widthSize |
|||
}, |
|||
inputPlaceholder(val, item, type, func) { |
|||
if (item.valueType) { |
|||
if (type == "focus") { |
|||
val.target.placeholder = "请输入" + item.label; |
|||
if (val.target.value != "") { |
|||
val.target.placeholder = val.target.value; |
|||
val.target.value = ""; |
|||
} |
|||
} else if (type == "blur") { |
|||
// val.target.value = "0" |
|||
val.target.value = val.target.value.toString().replace(/[^\d.]/g,'') |
|||
if (val.target.value == "") { |
|||
// if (val.target.placeholder.indexOf('请输入') == -1) { |
|||
val.target.value = val.target.placeholder; |
|||
// } |
|||
} |
|||
if(item.showProp){ |
|||
func[item.prop][item.showProp]= Number(val.target.value) |
|||
}else{ |
|||
func[item.prop]= Number(val.target.value) |
|||
} |
|||
// item.valueType |
|||
// ? (this.tableData[index][value] = item.valueType( |
|||
// this.tableData[index][value] |
|||
// )) |
|||
// : () => { |
|||
// return; |
|||
// } |
|||
} |
|||
} |
|||
}, |
|||
// handeleInput (et, item) { |
|||
// const { optionsValue } = item |
|||
// let func = item.focus |
|||
// let filter = { |
|||
// logic: "And", |
|||
// column: optionsValue, |
|||
// action: "Like", |
|||
// value: et |
|||
// } |
|||
// debounce(func(filter), 2000,true) |
|||
// }, |
|||
//autocomplete下拉 |
|||
querySearch(queryString, cb, val, row) { |
|||
const { options, optionsValue, optionsLabel } = val; |
|||
let func = val.focus; |
|||
let data = { |
|||
scope: row, |
|||
}; |
|||
if (queryString) { |
|||
data.filter = [ |
|||
{ |
|||
logic: "And", |
|||
column: optionsValue, |
|||
action: "Like", |
|||
value: queryString, |
|||
}, |
|||
// { |
|||
// logic: "Or", |
|||
// column: optionsLabel, |
|||
// action: "Like", |
|||
// value: queryString |
|||
// } |
|||
]; |
|||
} |
|||
func(data).then((res) => { |
|||
var restaurants = this.searchOptions["options"]; |
|||
let results = queryString |
|||
? restaurants.filter( |
|||
this.createFilter(queryString, optionsValue, optionsLabel) |
|||
) |
|||
: restaurants; |
|||
results.forEach((key) => { |
|||
if (typeof optionsValue === "string") { |
|||
key.value = key[optionsValue] + "----" + key[optionsLabel]; |
|||
} else { |
|||
key.value = |
|||
key[optionsValue[0]][optionsValue[1]] + |
|||
"----" + |
|||
key[optionsLabel]; |
|||
} |
|||
}); |
|||
// 调用 callback 返回建议列表的数据 |
|||
cb(results); |
|||
}); |
|||
}, |
|||
createFilter(queryString, optionsValue, optionsLabel) { |
|||
return (restaurant) => { |
|||
if (typeof optionsValue === "string") { |
|||
restaurant.value = |
|||
restaurant[optionsValue] + "----" + restaurant[optionsLabel]; |
|||
} else { |
|||
restaurant.value = |
|||
restaurant[optionsValue[0]][optionsValue[1]] + |
|||
"----" + |
|||
restaurant[optionsLabel]; |
|||
} |
|||
return ( |
|||
restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) != |
|||
-1 |
|||
); |
|||
}; |
|||
}, |
|||
handleSelect(item, val, scope) { |
|||
let data = this.tableData[scope.$index]; |
|||
if (!val.showProp) { |
|||
if (typeof val.optionsValue === "string") { |
|||
data[val.prop] = item[val.optionsValue]; |
|||
} else { |
|||
data[val.prop] = item[val.optionsValue[0]][val.optionsValue[1]]; |
|||
} |
|||
} else { |
|||
if (typeof val.optionsValue === "string") { |
|||
data[val.prop][val.showProp] = item[val.optionsValue]; |
|||
} else { |
|||
data[val.prop][val.showProp] = |
|||
item[val.optionsValue[0]][val.optionsValue[1]]; |
|||
} |
|||
} |
|||
this.$emit("push", item, scope, val); |
|||
}, |
|||
// selectFocus (val, item) { |
|||
// this.selectLoading = true; |
|||
// let func = item.focus |
|||
// func({}).then(res => { |
|||
// this.selectLoading = false; |
|||
// }) |
|||
// }, |
|||
// dataFilter (query, item, row) { |
|||
// const { options, optionsValue, optionsLabel } = item |
|||
// let func = item.focus |
|||
// let data = { |
|||
// scope: row |
|||
// } |
|||
// this.selectLoading = true; |
|||
// if (query) { |
|||
// data.filter = { |
|||
// logic: "And", |
|||
// column: optionsLabel, |
|||
// action: "Like", |
|||
// value: query |
|||
// } |
|||
// } |
|||
// setTimeout(() => { |
|||
// func(data).then(res => { |
|||
// this.selectLoading = false; |
|||
// }) |
|||
// }, 200); |
|||
// }, |
|||
getMaxLength(arr) { |
|||
return arr.reduce((acc, item) => { |
|||
if (item) { |
|||
const calcLen = this.getTexWidth(item); |
|||
if (acc < calcLen) { |
|||
acc = calcLen; |
|||
} |
|||
} |
|||
return acc; |
|||
}, 0); |
|||
}, |
|||
getTexWidth(str) { |
|||
let width = 0; |
|||
const html = document.createElement("span"); |
|||
html.innerText = str; |
|||
html.className = "getTextWidth"; |
|||
document.querySelector("body").appendChild(html); |
|||
width = document.querySelector(".getTextWidth").offsetWidth; |
|||
document.querySelector(".getTextWidth").remove(); |
|||
return width; |
|||
}, |
|||
flexColumnWidth(label, prop) { |
|||
const arr = this.tableData.map((x) => { |
|||
if (typeof prop !== "string") { |
|||
return x[prop[0]][prop[1]]; |
|||
} else { |
|||
return x[prop]; |
|||
} |
|||
}); |
|||
arr.push(label); |
|||
return this.getMaxLength(arr) + 60 + "px"; |
|||
}, |
|||
//排序 |
|||
sortChange(data) { |
|||
this.$emit("sortChange", data); |
|||
}, |
|||
//点击selection框 |
|||
handleSelectionChange(val) { |
|||
this.$emit("handleSelectionChange", val); |
|||
}, |
|||
//点击name提交emit打开编辑页面 |
|||
inlineDialog(row) { |
|||
this.$emit("inlineDialog", row); |
|||
}, |
|||
//点击按钮打开自定义弹窗 |
|||
buttonClick(row, index, label) { |
|||
this.$emit("buttonClick", row, index, label); |
|||
}, |
|||
rowDrop() { |
|||
const tbody = this.$refs.multipleTable.$el.querySelector( |
|||
".el-table__body-wrapper tbody" |
|||
); |
|||
const _this = this; |
|||
Sortable.create(tbody, { |
|||
onEnd({ newIndex, oldIndex }) { |
|||
const currRow = _this.tableData.splice(oldIndex, 1)[0]; |
|||
_this.tableData.splice(newIndex, 0, currRow); |
|||
}, |
|||
}); |
|||
}, |
|||
//列拖拽 |
|||
columnDrop() { |
|||
const wrapperTr = this.$refs.multipleTable.$el.querySelector( |
|||
".el-table__header-wrapper tr" |
|||
); |
|||
let bomIndex = this.selectionTable ? 1 : 0; |
|||
this.sortable = Sortable.create(wrapperTr, { |
|||
animation: 180, |
|||
delay: 0, |
|||
onEnd: (evt) => { |
|||
const oldItem = this.TableSize[evt.oldIndex - bomIndex]; |
|||
this.TableSize.splice(evt.oldIndex - bomIndex, 1); |
|||
this.TableSize.splice(evt.newIndex - bomIndex, 0, oldItem); |
|||
}, |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
::v-deep .el-form-item__error{ |
|||
position: relative; |
|||
} |
|||
::v-deep .el-table__fixed { |
|||
display: block-inline !important; |
|||
height: auto !important; |
|||
bottom: 13px !important; |
|||
.el-table__fixed-header-wrapper { |
|||
z-index: auto !important; |
|||
} |
|||
.el-table__fixed-body-wrapper { |
|||
z-index: auto !important; |
|||
} |
|||
} |
|||
::v-deep .el-table__fixed::before, |
|||
.el-table__fixed-right::before { |
|||
z-index: auto !important; |
|||
} |
|||
.spamHover { |
|||
color: #409eff; |
|||
cursor: pointer; |
|||
} |
|||
.spamHover:hover { |
|||
border-bottom: 1px solid #409eff; |
|||
color: blue; |
|||
} |
|||
span { |
|||
white-space: pre; |
|||
} |
|||
::v-deep .el-select { |
|||
.el-input__inner { |
|||
padding: 0 30px 0 15px; |
|||
} |
|||
.el-input__prefix { |
|||
width: 100% !important; |
|||
left: 0; |
|||
.el-button { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,309 @@ |
|||
<template> |
|||
<div class="currenTableFlex"> |
|||
<div class="headerButtons"> |
|||
<el-button |
|||
type="primary" |
|||
v-if="showAddBtn" |
|||
@click="flexOpenAddNew" |
|||
icon="el-icon-plus" |
|||
size="mini" |
|||
>添加一行</el-button> |
|||
<slot name="headerBtns"></slot> |
|||
</div> |
|||
<!-- todo:多选处理【selectionTable】 --> |
|||
<currenTable |
|||
class="flexTable" |
|||
:tableData="flexTableData" |
|||
:searchOptions="flexSearchOptions" |
|||
:tableColumns="flexTableColumns" |
|||
:selectionTable="selectionTable" |
|||
:isShowIndex="isShowIndex" |
|||
@push="detailsDataPush(arguments)" |
|||
> |
|||
<template v-if="showAllDeleteButton"> |
|||
<el-table-column |
|||
label="操作" |
|||
align="center" |
|||
fixed="right" |
|||
width="100px" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<div |
|||
v-if="!scope.row.hide" |
|||
class="childTable" |
|||
@click="flexRowRemove($event, scope)" |
|||
> |
|||
<span style="color:red">删除</span> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</template> |
|||
</currenTable> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import currenTable from "@/components/currenTable" |
|||
import { mixins } from "@/mixins/mixins" |
|||
export default { |
|||
name: 'currenTableFlex', |
|||
components: { |
|||
currenTable |
|||
}, |
|||
mixins: [ |
|||
mixins, |
|||
], |
|||
filters: { |
|||
// formData (val) { |
|||
// let data = JSON.parse(JSON.stringify(val)) |
|||
// val.forEach((key, index) => { |
|||
// data[index].disabled = "true" |
|||
// delete data[index].focus |
|||
// if (key.type == "autocomplete" || key.type == "import") { |
|||
// data[index].type = "input" |
|||
// } |
|||
// }); |
|||
// return data |
|||
// }, |
|||
// formDataDetails (val) { |
|||
// let data = JSON.parse(JSON.stringify(val)) |
|||
// val.forEach((key, index) => { |
|||
// data[index].disabled = true |
|||
// delete data[index].focus |
|||
// delete data[index].rules |
|||
// if (key.type == "autocomplete" || key.type == "import") { |
|||
// delete data[index].type |
|||
// } else if (key.type == "objectAutocomplete") { |
|||
// data[index].type = "object" |
|||
// } else if (key.prop == "containerCode" && key.type == "input") { |
|||
// data[index].disabled = false |
|||
// } else if (key.isChange) { |
|||
// // 针对第三步预览特殊情况处理 |
|||
// data[index].disabled = false |
|||
// } |
|||
// }); |
|||
// return data |
|||
// } |
|||
}, |
|||
props: { |
|||
// 是否显示添加一行按钮 |
|||
showAddBtn:{ |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 是否显示删除按钮（控制全部列） |
|||
showAllDeleteButton:{ |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 是否禁止编辑行（控制全部行） |
|||
disableAllRow:{ |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
flexTableData: { |
|||
type: Array, |
|||
default: () => { |
|||
return []; |
|||
}, |
|||
}, |
|||
flexSearchOptions: { |
|||
type: Object, |
|||
default: () => { |
|||
return {}; |
|||
}, |
|||
}, |
|||
flexTableColumns: { |
|||
type: Array, |
|||
default: () => { |
|||
return []; |
|||
}, |
|||
}, |
|||
// 是否显示多选 |
|||
selectionTable: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
// 是否显示序号列 |
|||
isShowIndex: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
//名称 |
|||
// formTitle: { |
|||
// type: String, |
|||
// default: '' |
|||
// }, |
|||
// //是否弹窗 |
|||
// displayDialog: { |
|||
// type: Object, |
|||
// default: () => { |
|||
// return { |
|||
// newDialog: false |
|||
// } |
|||
// } |
|||
// }, |
|||
// //主表提交数据 |
|||
// CreateFormData: { |
|||
// type: Object, |
|||
// default: () => { |
|||
// return {} |
|||
// } |
|||
// }, |
|||
// //主表显示form |
|||
// CreateForm: { |
|||
// type: Array, |
|||
// default: () => { |
|||
// return [] |
|||
// } |
|||
// }, |
|||
// //预览数据 |
|||
// previewFormData: { |
|||
// type: Object, |
|||
// default: () => { |
|||
// return {} |
|||
// } |
|||
// }, |
|||
// //检验 |
|||
// Rules: { |
|||
// type: Object, |
|||
// default: () => { |
|||
// return {} |
|||
// } |
|||
// }, |
|||
// //下拉选择 |
|||
// Options: { |
|||
// type: Object, |
|||
// default: () => { |
|||
// return {} |
|||
// } |
|||
// }, |
|||
// //子表table显示 |
|||
// detailsTableColumns: { |
|||
// type: Array, |
|||
// default: () => { |
|||
// return [] |
|||
// } |
|||
// }, |
|||
// //子表提交数据 |
|||
// childTableData: { |
|||
// type: Array, |
|||
// default: () => { |
|||
// return [] |
|||
// } |
|||
// }, |
|||
// //成功后的操作 |
|||
// successHandle: { |
|||
// type: Array, |
|||
// default: () => { |
|||
// return [] |
|||
// } |
|||
// }, |
|||
// //步骤标题 |
|||
// stepArray: { |
|||
// type: Array, |
|||
// default: () => { |
|||
// return ["总体信息", "明细", "预览", "结果"] |
|||
// } |
|||
// }, |
|||
// //添加一行 |
|||
// addClickButton: { |
|||
// type: Boolean, |
|||
// default: () => { |
|||
// return true |
|||
// } |
|||
// }, |
|||
// //删除行记录 |
|||
// isShowDeleteButton: { |
|||
// type: Boolean, |
|||
// default: () => { |
|||
// return true |
|||
// } |
|||
// }, |
|||
// // 隐藏第一步骤的取消按钮 |
|||
// isHideFirstActiveCancel:{ |
|||
// type: Boolean, |
|||
// default: () => { |
|||
// return false |
|||
// } |
|||
// }, |
|||
// // 预览视图显示删除按钮 |
|||
// showPreviewFormDeleteButton:{ |
|||
// type: Boolean, |
|||
// default: () => { |
|||
// return false |
|||
// } |
|||
// } |
|||
}, |
|||
data () { |
|||
return { |
|||
// 添加一行的空置 |
|||
addEmptyRow:null, |
|||
// active: 0, |
|||
// formReveal: 1, |
|||
// activeStep: 1, |
|||
// pageStatus: '', |
|||
// addClick: this.addClickButton,//添加一行按钮 |
|||
// showDeleteButton: this.isShowDeleteButton,//操作-删除按钮 |
|||
// hideFirstActiveCancel:this.isHideFirstActiveCancel,// 隐藏第一步骤的取消按钮 |
|||
// loading: false, |
|||
// session: null, |
|||
// step: this.stepArray, |
|||
// editHandle: [ |
|||
// { label: "取消", name: "cancel" }, |
|||
// { label: "下一步", type: "primary", name: "determine" }, |
|||
// ], |
|||
} |
|||
}, |
|||
mounted () { |
|||
// this.session = JSON.parse(JSON.stringify(this.CreateFormData)) |
|||
// if(this.hideFirstActiveCancel){ |
|||
// this.editHandle=[ |
|||
// { label: "下一步", type: "primary", name: "determine" }, |
|||
// ]; |
|||
// } |
|||
}, |
|||
methods: { |
|||
//添加行 |
|||
flexOpenAddNew() { |
|||
let _oneRow = Object.assign({}, this.flexTableData[0]) |
|||
for(let key in _oneRow){ |
|||
_oneRow[key] = null |
|||
} |
|||
this.flexTableData.push(_oneRow) |
|||
// if(this.flexTableData.length <= 0)return |
|||
// if(!this.addEmptyRow){ |
|||
// let _oneRow = Object.assign({}, this.flexTableData[0]) |
|||
// for(let key in _oneRow){ |
|||
// _oneRow[key] = null |
|||
// } |
|||
// this.addEmptyRow = _oneRow |
|||
// this.addEmptyRow['disabled']=false |
|||
// } |
|||
// this.flexTableData.push(this.addEmptyRow) |
|||
}, |
|||
//删除行 |
|||
flexRowRemove(e, val) { |
|||
this.$confirm('您确定删除吗, 是否继续?', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
this.flexTableData.splice(val.$index, 1) |
|||
}).catch(() => { |
|||
|
|||
}); |
|||
}, |
|||
//点击selection框 |
|||
handleSelectionChange(val) { |
|||
this.$emit("handleSelectionChange", val); |
|||
}, |
|||
// //autoComplete子表 |
|||
detailsDataPush (val) { |
|||
this.$emit("detailsDataPush", val) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "./style/index.scss"; |
|||
</style> |
|||
@ -0,0 +1,12 @@ |
|||
.currenTableFlex{ |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
.flexTable{ |
|||
height: 100%; |
|||
} |
|||
.headerButtons{ |
|||
text-align: center; |
|||
margin-bottom: 20px; |
|||
} |
|||
} |
|||
@ -0,0 +1,57 @@ |
|||
<template> |
|||
<el-tabs |
|||
v-model="tabsName" |
|||
@tab-click="handleClick" |
|||
:tab-position="tabPosition" |
|||
> |
|||
<el-tab-pane |
|||
v-for="(item, index) in tabsData" |
|||
:key="index" |
|||
:label="item.label" |
|||
:name="item.name" |
|||
> |
|||
<span slot="label"><i :class="item.icon"></i>{{ item.label }}</span> |
|||
<slot :value="item.name"></slot> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: 'currenTabs', |
|||
watch: { |
|||
activeName(newVal, oldVal){ |
|||
this.tabsName = newVal |
|||
} |
|||
}, |
|||
props: { |
|||
activeName: { |
|||
type: String, |
|||
default: 'first' |
|||
}, |
|||
tabsData: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
type: { |
|||
type: String, |
|||
default: 'border-card' //card/border-card |
|||
}, |
|||
tabPosition: { |
|||
type: String, |
|||
default: 'top' |
|||
} |
|||
}, |
|||
data () { |
|||
return { |
|||
tabsName: this.activeName |
|||
} |
|||
}, |
|||
methods: { |
|||
handleClick (val) { |
|||
this.$emit("handleClick", val) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,82 @@ |
|||
<template> |
|||
<div class="curren-upload"> |
|||
<el-upload |
|||
ref="upload" |
|||
class="avatar-uploader" |
|||
drag |
|||
action="#" |
|||
:http-request="httpRequestfiles" |
|||
:file-list="searchData" |
|||
:before-upload="beforeAvatarUpload" |
|||
:before-remove="beforeRemove" |
|||
:on-remove="handleRemove" |
|||
:on-exceed="handleExceed" |
|||
multiple |
|||
:limit="limit" |
|||
:accept="picExt" |
|||
> |
|||
<i class="el-icon-upload"></i> |
|||
<div class="el-upload__text"> |
|||
将文件拖到此处，或 |
|||
<em>点击上传</em> |
|||
</div> |
|||
</el-upload> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: "currenUpload", |
|||
props: { |
|||
limit: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
searchData: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
beforeUpload: { |
|||
type: Function, |
|||
default: () => { |
|||
return Function |
|||
} |
|||
} |
|||
}, |
|||
data () { |
|||
return { |
|||
isFileType: '', |
|||
picExt:'.xlsx' |
|||
} |
|||
}, |
|||
methods: { |
|||
httpRequestfiles (val) { |
|||
let rd = new FileReader(); // 创建文件读取对象 |
|||
let file = val.file; |
|||
this.$emit('httpRequestfiles', file) |
|||
rd.readAsDataURL(file); // 文件读取装换为base64类型 |
|||
}, |
|||
beforeAvatarUpload (val) { |
|||
let suffix = val.name.substring(val.name.lastIndexOf('.') + 1) |
|||
if (this.picExt.indexOf(suffix) === -1) { |
|||
this.$warningMsg('上传文件只能是 ' + this.picExt + '格式!') |
|||
return false |
|||
} |
|||
return this.beforeUpload(val, this.searchData) |
|||
|
|||
}, |
|||
beforeRemove (val) { |
|||
// if (val && val.status === "success") { |
|||
// return this.$confirm(`确定移除 ${val.name}？`); |
|||
// } |
|||
}, |
|||
handleRemove (file, fileList) { |
|||
this.$emit('handleRemove', fileList) |
|||
}, |
|||
handleExceed (val) { |
|||
this.$warningMsg('最多上传' + this.limit + '个文件') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,72 @@ |
|||
<template> |
|||
<div> |
|||
<el-upload |
|||
ref="uploadPicture" |
|||
class="upload-demo" |
|||
action="#" |
|||
:file-list="searchData" |
|||
:on-remove="handleRemove" |
|||
:on-exceed="handleExceed" |
|||
:on-change="changeUpload" |
|||
multiple |
|||
:limit="limit" |
|||
:accept="picExt" |
|||
:auto-upload="false" |
|||
> |
|||
<el-button slot="trigger" size="mini" type="primary">上传</el-button> |
|||
<el-button style="margin-left: 10px;" size="mini" type="info" @click="uploadListView">查看</el-button> |
|||
</el-upload> |
|||
|
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: "currenUploadList", |
|||
props: { |
|||
limit: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
searchData: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
picExt: { |
|||
type: String, |
|||
default: "", |
|||
} |
|||
}, |
|||
data () { |
|||
return { |
|||
isFileType: '', |
|||
} |
|||
}, |
|||
methods: { |
|||
changeUpload (val) { |
|||
// let suffix = val.name.substring(val.name.lastIndexOf('.') + 1) |
|||
// if (this.picExt.indexOf(suffix) === -1) { |
|||
// this.$warningMsg('上传文件只能是 ' + this.picExt + '格式!') |
|||
// return false |
|||
// } |
|||
let rd = new FileReader(); // 创建文件读取对象 |
|||
let file = val.raw; |
|||
this.$emit('changeUpload', file) |
|||
rd.readAsDataURL(file); // 文件读取装换为base64类型 |
|||
}, |
|||
handleRemove (file, fileList) { |
|||
this.$emit('handleRemove', fileList) |
|||
}, |
|||
handleExceed (val) { |
|||
this.$warningMsg('最多上传' + this.limit + '个文件') |
|||
}, |
|||
uploadListView() { |
|||
this.$emit('uploadListView') |
|||
}, |
|||
submitUpload() { |
|||
this.$refs.upload.submit(); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,100 @@ |
|||
<template> |
|||
<div class="curren-upload"> |
|||
<el-upload |
|||
action="#" |
|||
list-type="picture-card" |
|||
:auto-upload="false" |
|||
:multiple="multiple" |
|||
:limit="limit" |
|||
:accept="picExt" |
|||
:file-list="searchData" |
|||
:on-exceed="handleExceed" |
|||
:on-remove="handleRemove" |
|||
:on-preview="handlePictureCardPreview" |
|||
:on-change="changeUpload" |
|||
> |
|||
<i slot="default" class="el-icon-plus"></i> |
|||
<!-- <div slot="file" slot-scope="{file}"> |
|||
<img |
|||
class="el-upload-list__item-thumbnail" |
|||
:src="file.url" alt="" |
|||
> |
|||
<span class="el-upload-list__item-actions"> |
|||
<span |
|||
class="el-upload-list__item-preview" |
|||
@click="handlePictureCardPreview(file)" |
|||
> |
|||
<i class="el-icon-zoom-in"></i> |
|||
</span> |
|||
<span |
|||
v-if="!disabled" |
|||
class="el-upload-list__item-delete" |
|||
@click="handleRemove(file)" |
|||
> |
|||
<i class="el-icon-delete"></i> |
|||
</span> |
|||
</span> |
|||
</div> --> |
|||
</el-upload> |
|||
<el-dialog |
|||
:visible.sync="dialogVisible" |
|||
top="1vh" |
|||
width="35%" |
|||
:modal-append-to-body="false" |
|||
:append-to-body="true" |
|||
:show-close="true" |
|||
> |
|||
<img width="100%" :src="dialogImageUrl" alt=""> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: "currenUploadPictureCard", |
|||
props: { |
|||
limit: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
multiple:{ |
|||
type: Boolean, |
|||
default:false |
|||
}, |
|||
searchData: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
picExt: { |
|||
type: String, |
|||
default: "", |
|||
} |
|||
}, |
|||
data () { |
|||
return { |
|||
dialogImageUrl: '', |
|||
dialogVisible: false, |
|||
disabled: false |
|||
} |
|||
}, |
|||
methods: { |
|||
handlePictureCardPreview(file) { |
|||
this.dialogImageUrl = file.url; |
|||
this.dialogVisible = true; |
|||
}, |
|||
// handleDownload(file) { |
|||
// console.log(file); |
|||
// }, |
|||
changeUpload (val) { |
|||
this.$emit('changeUpload', val) |
|||
}, |
|||
handleRemove (file, fileList) { |
|||
this.$emit('handleRemove', fileList) |
|||
}, |
|||
handleExceed (val) { |
|||
this.$warningMsg('最多上传' + this.limit + '个文件') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,306 @@ |
|||
<template> |
|||
<div class="filterForDetailPage"> |
|||
<el-dialog |
|||
title="明细查询" |
|||
:visible.sync="dialogShow" |
|||
top="5vh" |
|||
width="96%" |
|||
:modal-append-to-body="false" |
|||
:append-to-body="false" |
|||
:show-close="true" |
|||
@close="closeDialog(false)" |
|||
> |
|||
<div |
|||
class="filterForDetailPage-list" |
|||
v-loading="Loading.tableLoading" |
|||
> |
|||
<!-- 列表 --> |
|||
<tablePagination |
|||
v-if="dialogShow" |
|||
:currenButtonData="currenButtonData" |
|||
:tableData="tableData" |
|||
:tableLoading="Loading.tableLoading" |
|||
:tableColumns="listColumns" |
|||
:totalCount="totalCount" |
|||
:multipleSelection="multipleSelection" |
|||
:MaxResultCount="PageListParams.MaxResultCount" |
|||
:setUTableHeight="setUTableHeight" |
|||
@topbutton="topbutton" |
|||
@inlineDialog="inlineDialog" |
|||
@sortChange="sortChange" |
|||
@alertoldSkipCount="alertoldSkipCount" |
|||
@alterResultCount="alterResultCount" |
|||
@handleSelectionChange="handleSelectionChange" |
|||
:currentPageProps="oldSkipCount" |
|||
:quicklySearchOption="quicklySearchOption" |
|||
@quicklySearchClick="quicklySearchClick" |
|||
@quicklySearchClear="quicklySearchClear" |
|||
:primarySearchOption="primarySearchOption" |
|||
@overallSearchFormClick="overallSearchFormClick" |
|||
:httpOverallSearchData="httpOverallSearchData" |
|||
> |
|||
<template> |
|||
<!-- todo:width处理 --> |
|||
<el-table-column |
|||
v-if="operaButtons && operaButtons.length > 0" |
|||
label="操作" |
|||
:align="'center'" |
|||
width="150" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<span v-for="item in operaButtons" style="margin: 0 10px;"> |
|||
<!-- 查看主表信息 --> |
|||
<el-button |
|||
v-if="item == 'showParent'" |
|||
type="text" |
|||
@click="showParentHandleForDetail(scope.row)" |
|||
>查看主表信息</el-button> |
|||
<!-- 编辑 --> |
|||
<el-button |
|||
v-if="item == 'edit'" |
|||
type="text" |
|||
style="color: #ff9000;" |
|||
@click="editHandleForDetail(scope.row)" |
|||
>编辑</el-button> |
|||
<!-- 删除 --> |
|||
<el-popover |
|||
v-if="item == 'delete'" |
|||
placement="left" |
|||
width="260" |
|||
v-model="scope.row.deleteTipVisible" |
|||
> |
|||
<p>此操作将永久删除该消息, 是否继续?</p> |
|||
<div style="text-align: right; margin: 0"> |
|||
<el-button size="mini" type="text" style="margin-right: 20px;" @click="scope.row.deleteTipVisible = false">取消</el-button> |
|||
<el-button type="primary" size="mini" @click="deleteHandleForDetail(scope.row)">确定</el-button> |
|||
</div> |
|||
<el-button type="text" slot="reference" style="color: red;">删除</el-button> |
|||
</el-popover> |
|||
</span> |
|||
</template> |
|||
</el-table-column> |
|||
</template> |
|||
</tablePagination> |
|||
</div> |
|||
</el-dialog> |
|||
<!-- 主表信息 --> |
|||
<el-dialog |
|||
:modal-append-to-body="false" |
|||
:append-to-body="false" |
|||
:title="showParentTitle" |
|||
:visible.sync="showParentDialog" |
|||
:show-close="true" |
|||
> |
|||
<div v-loading="showParentLoading"> |
|||
<curren-descriptions |
|||
v-if="showParentTableData" |
|||
border |
|||
:column="column" |
|||
:direction="direction" |
|||
:colon="false" |
|||
:tabsDesTions="parentColumns" |
|||
:propsData="showParentTableData" |
|||
style="padding-bottom: 20px;" |
|||
></curren-descriptions> |
|||
</div> |
|||
<!-- <el-table :data="showParentTableData"> |
|||
<el-table-column property="date" label="日期" width="150"></el-table-column> |
|||
<el-table-column property="name" label="姓名" width="200"></el-table-column> |
|||
<el-table-column property="address" label="地址"></el-table-column> |
|||
</el-table> --> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import currenDescriptions from "@/components/currenDescriptions" |
|||
import { tableMixins } from "@/mixins/TableMixins"; |
|||
import { TableHeaderMixins } from "@/mixins/TableHeaderMixins"; |
|||
import { LoadingMixins } from "@/mixins/LoadingMixins"; |
|||
import { mixins } from "@/mixins/mixins"; |
|||
import { filterSelectMixins } from '@/mixins/filter-Select' |
|||
// import { TestSchoolDetailList,TestSchoolDetailList_delete } from "@/api/wms-interface" |
|||
import * as interfaceApi from "@/api/wms-interface" |
|||
import {getListDesById,getPageListForDetail} from "@/api/wms-api" |
|||
import * as allUrlOption from '@/utils/baseData/urlOption' |
|||
export default { |
|||
name: 'filterForDetailPage', |
|||
mixins: [ |
|||
tableMixins, |
|||
TableHeaderMixins, |
|||
mixins, |
|||
filterSelectMixins, |
|||
LoadingMixins |
|||
], |
|||
components:{ |
|||
currenDescriptions |
|||
}, |
|||
props: { |
|||
// 已app-main高度为100% 需要减掉的高度 |
|||
setUTableHeight: { |
|||
type: Number, |
|||
default: 340 |
|||
}, |
|||
// 是否显示序号 |
|||
isShowIndex:{ |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 复选框 |
|||
tableSelection: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
cellStyle: { |
|||
type: Function, |
|||
default: () => { |
|||
return Function; |
|||
} |
|||
}, |
|||
// 超出内容是否提示 |
|||
showOverflowTooltip:{ |
|||
type: Boolean, |
|||
default: true, |
|||
}, |
|||
|
|||
// 删除api |
|||
DeleteApi: { |
|||
type: String, |
|||
default: null |
|||
}, |
|||
// 列表数据-表头 |
|||
listColumns:{ |
|||
type: Array, |
|||
default: null |
|||
}, |
|||
// 主表数据-表头 |
|||
parentColumns:{ |
|||
type: Array, |
|||
default: null |
|||
}, |
|||
showHandleButtons:{ |
|||
type:Array, |
|||
default:() => { |
|||
return ['showParent','fresh','filter'];//'add','edit'暂未处理操作 'delete'暂时隐藏 |
|||
} |
|||
}, |
|||
// 父级展现列数，默认为2列展现 |
|||
column: { |
|||
type: Number, |
|||
default: 2 |
|||
}, |
|||
// 父级展示方式，默认水平分布 |
|||
direction: { |
|||
type: String, |
|||
default: 'horizontal' |
|||
}, |
|||
}, |
|||
data () { |
|||
return { |
|||
dialogShow:true, |
|||
URLOption_detailList:allUrlOption[this.$route.name].detailListURL,//明细-列表 |
|||
URLOption_parent:allUrlOption[this.$route.name].parentURL ? allUrlOption[this.$route.name].parentURL : allUrlOption[this.$route.name].detailURL,//明细-查看主表 |
|||
currenButtonData: [],//头部按钮 |
|||
operaButtons:[],//操作列按钮 |
|||
showParentDialog:false,//显示父级数据弹窗 |
|||
showParentTitle:null,//显示父级数据弹窗-title |
|||
showParentTableData:null,//显示父级数据弹窗-数据 |
|||
showParentLoading:false,//显示父级数据弹窗-加载 |
|||
} |
|||
}, |
|||
mounted(){ |
|||
this.paging() |
|||
this.initHandleButtons() |
|||
}, |
|||
methods: { |
|||
// 初始化显示按钮 |
|||
initHandleButtons(){ |
|||
// 头部按钮 |
|||
let _arr_header = [] |
|||
if(this.showHandleButtons.indexOf('add') >= 0){_arr_header.push(this.defaultAddBtn())} |
|||
if(this.showHandleButtons.indexOf('fresh') >= 0){_arr_header.push(this.defaultFreshBtn())} |
|||
if(this.showHandleButtons.indexOf('filter') >= 0){_arr_header.push(this.defaultFilterBtn())} |
|||
this.currenButtonData = _arr_header |
|||
|
|||
// 操作列按钮 |
|||
let _arr_op = [] |
|||
if(this.showHandleButtons.indexOf('edit') >= 0){_arr_op.push('edit')} |
|||
if(this.showHandleButtons.indexOf('delete') >= 0){_arr_op.push('delete')} |
|||
if(this.showHandleButtons.indexOf('showParent') >= 0){_arr_op.push('showParent')} |
|||
this.operaButtons = _arr_op |
|||
}, |
|||
// 关闭明细查询弹窗 |
|||
closeDialog(data){ |
|||
this.dialogShow = false |
|||
this.$emit("closeDialog", data) |
|||
}, |
|||
// 获取列表 |
|||
paging(callback){ |
|||
this.Loading.tableLoading = true |
|||
this.PageListParams.SkipCount = (this.oldSkipCount - 1) * this.PageListParams.MaxResultCount |
|||
getPageListForDetail(this.PageListParams,this.URLOption_detailList) |
|||
// interfaceApi[this.URLOption_detailList](this.PageListParams) |
|||
.then(result => { |
|||
this.Loading.tableLoading = false |
|||
this.tableData = [] |
|||
result.items.forEach(item=>{ |
|||
item.deleteTipVisible = false |
|||
this.tableData.push(item) |
|||
}) |
|||
this.totalCount = result.totalCount |
|||
this.pagingCallback(callback) |
|||
}) |
|||
.catch(err => { |
|||
this.Loading.tableLoading = false |
|||
this.$message.error("数据获取失败") |
|||
}) |
|||
}, |
|||
// 查看主表信息 |
|||
showParentHandleForDetail(data){ |
|||
this.showParentTitle = `[${data.studentName}] 主表信息` |
|||
this.showParentDialog = true |
|||
this.showParentLoading = true |
|||
getListDesById(this.URLOption_parent,data.masterId) |
|||
.then(res => { |
|||
this.showParentTableData = res |
|||
this.showParentLoading = false |
|||
}) |
|||
.catch(err => { |
|||
this.showParentLoading = false |
|||
this.$message.error("主表信息获取失败!") |
|||
}) |
|||
}, |
|||
// 编辑 |
|||
editHandleForDetail(data){ |
|||
console.log(data) |
|||
}, |
|||
// 删除 |
|||
deleteHandleForDetail(data){ |
|||
this.Loading.appMainLoading = true |
|||
data.deleteTipVisible = false |
|||
interfaceApi[this.DeleteApi](data.id).then(res => { |
|||
this.$successMsg('删除成功!') |
|||
this.oldSkipCount = 1 |
|||
this.Loading.appMainLoading = false |
|||
this.paging() |
|||
}).catch(err => { |
|||
this.Loading.appMainLoading = false |
|||
this.$message.error("删除失败!") |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss"> |
|||
.filterForDetailPage { |
|||
.el-dialog__body{ |
|||
padding-bottom: 20px !important; |
|||
} |
|||
.fullPageCover{ |
|||
height: calc(100% - 380px) !important; |
|||
} |
|||
} |
|||
.filterForDetailPage-list{ |
|||
height: calc(100% - 320px); |
|||
overflow: auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,214 @@ |
|||
<template> |
|||
<div class="filterSelectComponents"> |
|||
<el-select |
|||
ref="filterSelect" |
|||
v-model="value" |
|||
:placeholder="'请选择'+selectItem.label" |
|||
:disabled="selectItem.disabled" |
|||
:clearable="true" |
|||
:multiple="selectItem.multiple" |
|||
:multiple-limit="selectItem.multipleLimit" |
|||
:collapse-tags="selectItem.collapseTags" |
|||
:filterable="!selectItem.noFilter" |
|||
:remote="isRemote" |
|||
:remote-method="inputChangeHandle" |
|||
:style="{width:selectItem.width || '100%'}" |
|||
@visible-change="visibleChangeHandle(arguments)" |
|||
@clear="clearHandle()" |
|||
:loading="loading" |
|||
:loading-text="loadingText" |
|||
@change="changeHandle(arguments)" |
|||
:class="[selectItem.searchButton ? 'hasSearchButton' : '']" |
|||
> |
|||
<el-option |
|||
v-for="item in options" |
|||
:key="item.value" |
|||
:label="item[selectItem.optionsValue] || item.value" |
|||
:value="item[selectItem.optionsValue] || item.value" |
|||
:disabled="item.disabled" |
|||
> |
|||
<div class="optionsRow clearfix" > |
|||
<div class="left">{{item[selectItem.optionsValue] || item.value}}</div> |
|||
<div class="right" v-if="selectItem.optionsLabel">{{item[selectItem.optionsLabel]}}</div> |
|||
</div> |
|||
</el-option> |
|||
</el-select> |
|||
<!-- 搜索按钮 --> |
|||
<div class="filterSelectButton"> |
|||
<el-button |
|||
:disabled=selectItem.disabled |
|||
slot="append" |
|||
icon="el-icon-search" |
|||
v-if="selectItem.searchButton" |
|||
@click="selectItem.searchButton(selectItem)" |
|||
></el-button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
watch: { |
|||
selectModel (val) { |
|||
this.value = val |
|||
} |
|||
}, |
|||
props: { |
|||
// 数据类型基础配置 |
|||
selectModel: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
// 数据类型基础配置 |
|||
selectItem: { |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
} |
|||
}, |
|||
}, |
|||
data () { |
|||
return { |
|||
loading:false, |
|||
loadingText:"正在加载", |
|||
options:[], |
|||
value:"", |
|||
optionsCopy:[], |
|||
//控制是否远程，filterable、remote都为true时候，remote-method才生效（搜索时候走remote-method方法，否则走下拉内容搜索） |
|||
// 【目前getPageList方式为远程】 |
|||
// 显示差异：为true时候加载显示加载false显示无数据，true时候无数据无下拉，false出下拉 |
|||
isRemote:false, |
|||
} |
|||
}, |
|||
created () { |
|||
if(this.selectItem){ |
|||
this.value = this.selectModel |
|||
this.options = this.selectItem.options |
|||
this.isRemoteReset() |
|||
} |
|||
}, |
|||
methods: { |
|||
changeHandle(value){ |
|||
if(!value[0] || value[0].length <= 0)return |
|||
let _options = JSON.parse(JSON.stringify(this.selectItem)) |
|||
let _item = {} |
|||
let _prop = this.selectItem.optionsValue || this.selectItem.prop |
|||
this.options.forEach(item=>{ |
|||
if(item[_prop] == value[0])_item = item |
|||
}) |
|||
this.$emit("filterOptionSelectHandle",_item,_options,value[0]) |
|||
}, |
|||
isRemoteReset(){ |
|||
this.isRemote = (!this.selectItem.noFilter && (!this.selectItem.getType || this.selectItem.getType== 'getPageList')) |
|||
}, |
|||
clearHandle(){ |
|||
this.$emit("filterClearHandle",JSON.parse(JSON.stringify(this.selectItem))) |
|||
}, |
|||
// 给focus返回参数操作 |
|||
getHttpData(query){ |
|||
if(this.selectItem.beforeFocus && !this.selectItem.beforeFocus()){ |
|||
return |
|||
} |
|||
if(this.selectItem.focus){ |
|||
// 当前项的搜索条件 |
|||
let _value = query ? query : this.value || "" |
|||
let _params = null; |
|||
this.loading = true |
|||
this.loadingText="正在加载" |
|||
// api中《getPageList》方式： |
|||
if(!this.selectItem.getType || this.selectItem.getType== "getPageList"){ |
|||
_params = { |
|||
SkipCount: 0, |
|||
MaxResultCount: 100, |
|||
condition: { |
|||
filters: [] |
|||
} |
|||
} |
|||
if(_value.length > 0 && !this.selectItem.noFilter){ |
|||
let _column = this.selectItem.optionsValue || this.selectItem.prop |
|||
_params.condition.filters.push({logic:"And",column:_column,action:"Like",value:_value}) |
|||
} |
|||
} |
|||
// api中《getPage》方式：在业务页面调用getFilterList时候 自行传第二个val值 |
|||
// 执行方法并传参 |
|||
this.selectItem.focus(this.selectItem.getType,_params) |
|||
.then(res=>{ |
|||
this.options = res |
|||
if(!res || res.length <= 0){ |
|||
this.isRemoteReset() |
|||
this.loadingText="无数据" |
|||
}else{ |
|||
this.loading = false |
|||
this.isRemoteReset() |
|||
if(!this.selectItem.filterShowEmpty){ |
|||
// 为空的值去掉 |
|||
let _noEmpty = [] |
|||
this.options.forEach((item,key)=>{ |
|||
let _key = this.selectItem.optionsValue || this.selectItem.prop |
|||
if(item[_key] && item[_key].length > 0){ |
|||
_noEmpty.push(item) |
|||
} |
|||
}) |
|||
this.options = _noEmpty |
|||
} |
|||
} |
|||
this.optionsCopy = this.options |
|||
}) |
|||
.catch((err)=>{ |
|||
this.loading = false |
|||
}) |
|||
} |
|||
}, |
|||
inputChangeHandle(query){ |
|||
// 目的：假设防止前100个中没有包含A的字符，再次输入时候从后台重新获取 |
|||
if(!this.selectItem.getType || this.selectItem.getType== "getPageList"){ |
|||
this.getHttpData(query) |
|||
} |
|||
}, |
|||
visibleChangeHandle(val){ |
|||
// 展开/focus |
|||
if(val[0]){ |
|||
this.isRemote = true |
|||
this.getHttpData() |
|||
} |
|||
// 隐藏 |
|||
else{ |
|||
this.options = [] |
|||
this.loading = false |
|||
if(this.selectItem.hide){ |
|||
this.selectItem.hide(this.$refs.filterSelect) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss"> |
|||
.filterSelectComponents{ |
|||
position: relative; |
|||
.filterSelectButton{ |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
button{ |
|||
display: block; |
|||
} |
|||
} |
|||
.hasSearchButton .el-input__suffix{ |
|||
right: 65px !important; |
|||
} |
|||
.el-input--medium .el-input__icon{ |
|||
height: 30px !important; |
|||
line-height: 30px !important; |
|||
} |
|||
} |
|||
.optionsRow{ |
|||
.left{ |
|||
float: left; |
|||
} |
|||
.right{ |
|||
float: right; |
|||
padding-left: 20px; |
|||
color: #C0C4CC; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,206 @@ |
|||
<template> |
|||
<el-dialog |
|||
:title="formTitle" |
|||
v-loading="loading" |
|||
v-if="displayDialog" |
|||
:visible="true" |
|||
:fullscreen="true" |
|||
:modal="false" |
|||
:modal-append-to-body="false" |
|||
:show-close="false" |
|||
style="z-index:11111" |
|||
> |
|||
<curren-Form |
|||
class="handleForm" |
|||
size="medium" |
|||
:searchData="CreateFormData" |
|||
:searchForm="CreateForm" |
|||
:searchHandle="editHandle" |
|||
:searchOptions="Options" |
|||
:rules="Rules" |
|||
@submitForm="editFormClick(arguments)" |
|||
> |
|||
<template> |
|||
<el-form-item |
|||
class="formTable-box" |
|||
prop="details" |
|||
v-if="CreateFormData.details" |
|||
> |
|||
<currenTable |
|||
:tableData="CreateFormData.details" |
|||
:searchOptions="Options" |
|||
:tableColumns="detailsTableColumns" |
|||
:selectionTable="selectionTable" |
|||
:isShowIndex="isShowIndex" |
|||
@handleSelectionChange="handleSelectionChange" |
|||
@buttonClick="buttonClick" |
|||
> |
|||
<template> |
|||
<slot></slot> |
|||
</template> |
|||
</currenTable> |
|||
</el-form-item> |
|||
</template> |
|||
</curren-Form> |
|||
</el-dialog> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
props: { |
|||
//名称 |
|||
formTitle: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
//是否弹窗 |
|||
displayDialog: { |
|||
type: Boolean, |
|||
default: () => { |
|||
return false |
|||
} |
|||
}, |
|||
//主表提交数据 |
|||
CreateFormData: { |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
} |
|||
}, |
|||
//主表显示form |
|||
CreateForm: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
//检验 |
|||
Rules: { |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
} |
|||
}, |
|||
//下拉选择 |
|||
Options: { |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
} |
|||
}, |
|||
//子表table显示 |
|||
detailsTableColumns: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
selectionTable:{ |
|||
type: Boolean, |
|||
default: () => { |
|||
return false |
|||
} |
|||
}, |
|||
// 列表序号显示 |
|||
isShowIndex: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
editHandle: { |
|||
type: Array, |
|||
default: () => { |
|||
return [ |
|||
{ label: "取消", name: "cancel" }, |
|||
{ label: "确定", type: "primary", name: "determine" }, |
|||
]; |
|||
}, |
|||
}, |
|||
// loading: { |
|||
// type: Boolean, |
|||
// default: false |
|||
// }, |
|||
}, |
|||
data () { |
|||
return { |
|||
loading: false, |
|||
// editHandle: [ |
|||
// { label: "取消", name: "cancel" }, |
|||
// { label: "确定", type: "primary", name: "determine" }, |
|||
// ], |
|||
} |
|||
}, |
|||
methods: { |
|||
//点击表单提交 |
|||
editFormClick (val) { |
|||
if (val[0] == 0) { |
|||
// 取消 |
|||
this.$emit('update:displayDialog', false) |
|||
if(val[2].handleEvent)val[2].handleEvent() |
|||
} else if(val[0] == 1){ |
|||
// 确定 |
|||
val[1].validate((valid) => { |
|||
if (valid) { |
|||
const parent = this.$parent |
|||
this.loading = true |
|||
parent.handleFormSubmit().then(res => { |
|||
this.loading = false |
|||
}, err => { |
|||
this.loading = false |
|||
}) |
|||
} else { |
|||
this.$errorMsg('请检查表单') |
|||
return false; |
|||
} |
|||
}); |
|||
} else { |
|||
// 自定义 |
|||
if(val[2].handleEvent)val[2].handleEvent() |
|||
} |
|||
}, |
|||
handleSelectionChange(val){ |
|||
this.$emit("handleSelectionChange", val); |
|||
}, |
|||
//点击按钮打开自定义弹窗 |
|||
buttonClick(row,index) { |
|||
this.$emit("buttonClick", row,index); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.handleForm { |
|||
display: flex; |
|||
flex-direction: column; |
|||
width: 100%; |
|||
height: 100%; |
|||
::v-deep .el-form { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
overflow: hidden; |
|||
.el-row { |
|||
flex: 2; |
|||
flex-wrap: wrap; |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.formTable-box { |
|||
flex: 2; |
|||
overflow: hidden; |
|||
|
|||
.el-form-item__content { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
overflow: hidden; |
|||
margin: 0 !important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-table { |
|||
height: 500px !important; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,298 @@ |
|||
<template> |
|||
<div> |
|||
<el-dialog |
|||
title="导入" |
|||
v-loading="loading" |
|||
element-loading-text="正在导入..." |
|||
:visible.sync="show" |
|||
:append-to-body="true" |
|||
:modal-append-to-body="false" |
|||
width="800px" |
|||
:show-close="false" |
|||
> |
|||
<div class="body_header"> |
|||
<span>上传模板下载：</span> |
|||
<el-button |
|||
type="success" |
|||
size="mini" |
|||
icon="el-icon-download" |
|||
@click="postImportDown" |
|||
>获取模板</el-button |
|||
> |
|||
</div> |
|||
<div class="body_header"> |
|||
<span> 导 入 模 式：</span> |
|||
<el-radio-group v-model="method" > |
|||
<el-radio label="1" :disabled="disabledMethod.method2">追加式</el-radio> |
|||
<el-radio label="0" :disabled="disabledMethod.method1">更新式</el-radio> |
|||
<el-radio label="2" :disabled="disabledMethod.method3">覆盖式</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
<div class="body_header"> |
|||
<span>是否部分导入：</span> |
|||
<el-radio-group v-model="isAllowPartImport" > |
|||
<el-radio label="0" :disabled="disabledIsAllowPartImport.isAllowPartImport1">是</el-radio> |
|||
<el-radio label="1" :disabled="disabledIsAllowPartImport.isAllowPartImport2">否</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
<curren-Form |
|||
class="importFile" |
|||
size="medium" |
|||
:searchData="FormData" |
|||
:searchForm="Form" |
|||
:searchHandle="editHandle" |
|||
:rules="Rules" |
|||
@submitForm="formClick(arguments)" |
|||
> |
|||
</curren-Form> |
|||
</el-dialog> |
|||
<!-- 导入预览 --> |
|||
<el-dialog |
|||
class="previewClass" |
|||
title="导入预览" |
|||
:visible.sync="previewShow" |
|||
:append-to-body="true" |
|||
:modal-append-to-body="false" |
|||
:show-close="false" |
|||
width="70%" |
|||
> |
|||
<div > |
|||
<el-table |
|||
:data="excelData.results" |
|||
:border="true" |
|||
highlight-current-row |
|||
style="width: 100%; |
|||
margin-top:10px;" |
|||
max-height="400" |
|||
> |
|||
<el-table-column |
|||
v-if="excelData.header.length > 0" |
|||
type="index" |
|||
fixed="left" |
|||
label="序号" |
|||
width="50" |
|||
/> |
|||
<el-table-column |
|||
v-for="(item,index) of excelData.header" |
|||
:key="index" |
|||
:prop="item" |
|||
:label="item" |
|||
/> |
|||
</el-table> |
|||
</div> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="submitForm(0)">取 消</el-button> |
|||
<el-button type="primary" @click="submitForm(1)">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import XLSX from 'xlsx' |
|||
import currenForm from "@/components/currenForm" |
|||
export default { |
|||
name: 'importFile', |
|||
components: { |
|||
currenForm |
|||
}, |
|||
props: { |
|||
loading: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
show: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
url: { |
|||
type: String |
|||
}, |
|||
postImport: { |
|||
type: Function, |
|||
default: () => { } |
|||
}, |
|||
disabledMethod:{ |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
} |
|||
}, |
|||
disabledIsAllowPartImport:{ |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
} |
|||
}, |
|||
methodValue:{ |
|||
type: String, |
|||
default:'1' |
|||
}, |
|||
isAllowPartImportValue:{ |
|||
type: String |
|||
} |
|||
}, |
|||
data () { |
|||
return { |
|||
previewShow: false, |
|||
// exel表头及数据 |
|||
excelData: { |
|||
header: [], |
|||
results: [] |
|||
}, |
|||
//表格流体最大高度 |
|||
tableMaxHeight:null, |
|||
// 临时存储提交数据 |
|||
submitDataLS: null, |
|||
method: '1', |
|||
isAllowPartImport: '1', |
|||
editHandle: [ |
|||
{ label: "取消", name: "cancel" }, |
|||
{ label: "确定", type: "primary", name: "determine" }, |
|||
], |
|||
FormData: { |
|||
formFile: [] |
|||
}, |
|||
Form: [ |
|||
{ type: "upload", label: "文件导入", prop: "formFile", limit: 1, colSpan: 24 } |
|||
], |
|||
Rules: { |
|||
formFile: { required: true, trigger: "change", message: "不可为空" } |
|||
} |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.method = this.methodValue |
|||
this.isAllowPartImport = this.isAllowPartImportValue |
|||
}, |
|||
methods: { |
|||
postImportDown () { |
|||
this.$emit('postImportDown') |
|||
}, |
|||
// postImport () { |
|||
// this.$emit('postImport') |
|||
// }, |
|||
// methodValueChane() { |
|||
// this.$emit("methodChange", this.methodValue); // 用 $emit 通知父组件去修改 |
|||
// }, |
|||
// isAllowPartImportValueChane() { |
|||
// this.$emit("isAllowPartImportChange", this.isAllowPartImportValue); // 用 $emit 通知父组件去修改 |
|||
// }, |
|||
readerData(rawFile) { |
|||
if (rawFile) { |
|||
return new Promise((resolve, reject) => { |
|||
const reader = new FileReader() |
|||
reader.onload = e => { |
|||
const data = e.target.result |
|||
// const workbook = XLSX.read(data, { type: 'array',cellText:false,cellDates:true }) |
|||
const workbook = XLSX.read(data, { type: 'array'}) |
|||
const firstSheetName = workbook.SheetNames[0] |
|||
const worksheet = workbook.Sheets[firstSheetName] |
|||
const header = this.getHeaderRow(worksheet) |
|||
const results = XLSX.utils.sheet_to_json(worksheet,{raw:false}) |
|||
// const results = XLSX.utils.sheet_to_json(worksheet,{raw:false,dateNF:'yyyy-mm-dd'}) //yyyy-MM-dd HH:mm:ss |
|||
if(results.length <= 0){ |
|||
this.$message.error('导入表格内无数据，请确认后重新导入'); |
|||
this.loading = false |
|||
return |
|||
} |
|||
// this.generateData({ header, results }) |
|||
this.excelData.header = header |
|||
this.excelData.results = results |
|||
// this.tableMaxHeight = document.getElementById("tableOuter").clientHeight |
|||
resolve() |
|||
this.tab |
|||
} |
|||
reader.readAsArrayBuffer(rawFile) |
|||
}) |
|||
} |
|||
}, |
|||
getHeaderRow(sheet) { |
|||
const headers = [] |
|||
const range = XLSX.utils.decode_range(sheet['!ref']) |
|||
let C |
|||
const R = range.s.r |
|||
/* start in the first row */ |
|||
for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */ |
|||
const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })] |
|||
/* find the cell in the first row */ |
|||
let hdr = 'UNKNOWN ' + C // <-- replace with your desired default |
|||
if (cell && cell.t) hdr = XLSX.utils.format_cell(cell) |
|||
headers.push(hdr) |
|||
} |
|||
return headers |
|||
}, |
|||
// 文件预览 |
|||
submitForm(val) { |
|||
if (val == 0) { |
|||
this.previewShow = false |
|||
} else { |
|||
this.submiData(this.submitDataLS) |
|||
this.previewShow = false |
|||
} |
|||
}, |
|||
// formClick(val) { |
|||
// this.FormData.method = this.method |
|||
// this.FormData.isAllowPartImport = this.isAllowPartImport |
|||
// this.$emit('importClick', val, this.FormData) |
|||
// } |
|||
formClick (val) { |
|||
if (val[0] == 0) { |
|||
this.submiData(val) |
|||
} else { |
|||
// 显示预览页 |
|||
// 没上传文件时 不显示预览界面 |
|||
if (val[1].fields[0].fieldValue[0]) { |
|||
this.previewShow = true |
|||
this.submitDataLS = val |
|||
// 文件数据展示 |
|||
this.readerData(val[1].fields[0].fieldValue[0]) |
|||
} else { |
|||
this.$message.error('请上传文件！'); |
|||
} |
|||
} |
|||
}, |
|||
// 提交数据 |
|||
submiData(val) { |
|||
this.FormData.method = this.method |
|||
this.FormData.isAllowPartImport = this.isAllowPartImport |
|||
this.$emit('importClick', val, this.FormData) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
::v-deep .el-dialog__body { |
|||
max-height: 100vh; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
.body_header { |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 0 0 20px 100px; |
|||
} |
|||
::v-deep .importFile { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
overflow: hidden; |
|||
|
|||
.el-form { |
|||
flex: 1; |
|||
padding-left: 70px; |
|||
padding-right: 70px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
overflow-y: auto; |
|||
.el-row { |
|||
flex: 2; |
|||
padding-left: 30px; |
|||
padding-right: 30px; |
|||
} |
|||
} |
|||
.formButton { |
|||
padding: 20px 20px 20px 0; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,298 @@ |
|||
<template> |
|||
<el-dialog |
|||
v-loading="loading" |
|||
element-loading-text="加载中..." |
|||
v-if="displayDialog" |
|||
:visible="true" |
|||
:fullscreen="true" |
|||
:modal="false" |
|||
:modal-append-to-body="false" |
|||
:show-close="false" |
|||
style="width:calc(100% - 28px);left:14px;top:14px;height:calc(100% - 28px)" |
|||
> |
|||
<div class="dialogOuterTitle">{{formTitle}}</div> |
|||
<curren-Form |
|||
v-if="active === 0" |
|||
size="medium" |
|||
class="newAndEdiDialog" |
|||
:searchData="FormData" |
|||
:searchForm="Form" |
|||
:searchOptions="Options" |
|||
:searchHandle="Handle" |
|||
:rules="Rules" |
|||
@changeInput="changeInput" |
|||
@push="DataPush(arguments)" |
|||
@submitForm="FormClick(arguments)" |
|||
@radioChange="radioChange" |
|||
@changeSelect="changeSelect" |
|||
> |
|||
<template v-if="showmyTable"> |
|||
<el-form-item class="formTable-box" prop="details"> |
|||
<currenTable |
|||
:tableData="FormData.details" |
|||
:tableColumns="myTableColumns" |
|||
:selectionTable="selectionTable" |
|||
:tableLoading="tableLoading" |
|||
:isShowIndex="isShowIndex" |
|||
@handleSelectionChange="handleSelectionChange" |
|||
> |
|||
<template> |
|||
<el-table-column |
|||
fixed="right" |
|||
label="操作" |
|||
width="120"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
@click.native.prevent="deleteRow(scope.$index, FormData.details)" |
|||
type="text" |
|||
size="small"> |
|||
删除 |
|||
</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</template> |
|||
</currenTable> |
|||
</el-form-item> |
|||
</template> |
|||
</curren-Form> |
|||
<div v-if="active === 1 && pageStatus == 'success'" class="page4"> |
|||
<el-result icon="success" title="成功提示" :subTitle="formTitle + '成功'"> |
|||
<template slot="extra"> |
|||
<el-button type="primary" size="medium" @click="close" |
|||
>退出</el-button |
|||
> |
|||
</template> |
|||
</el-result> |
|||
</div> |
|||
<div v-if="active === 2 && pageStatus == 'error'" class="page4"> |
|||
<el-result icon="error" title="错误提示" :subTitle="formTitle + '失败'"> |
|||
<template slot="extra"> |
|||
<el-button type="primary" size="medium" @click="goBack" |
|||
>返回</el-button |
|||
> |
|||
<el-button type="primary" size="medium" @click="close" |
|||
>退出</el-button |
|||
> |
|||
</template> |
|||
</el-result> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
props: { |
|||
loading: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
//控制步骤 |
|||
active: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
//结合active控制返回结果 |
|||
pageStatus: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
//显示返回结果 |
|||
formReveal: { |
|||
type: Boolean, |
|||
}, |
|||
//dialog标题 |
|||
formTitle: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
//dialog是否显示 |
|||
displayDialog: { |
|||
type: Boolean, |
|||
default: () => { |
|||
return false |
|||
} |
|||
}, |
|||
//表单数据 |
|||
FormData: { |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
} |
|||
}, |
|||
//绑定表单数据 |
|||
Form: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
//下拉框数据 |
|||
Options: { |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
} |
|||
}, |
|||
//表单按钮 |
|||
Handle: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
//表单验证 |
|||
Rules: { |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
} |
|||
}, |
|||
// 列表字段 |
|||
myTableColumns: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
showmyTable: { |
|||
type: Boolean, |
|||
default: () => { |
|||
return false |
|||
} |
|||
}, |
|||
selectionTable: { |
|||
type: Boolean, |
|||
default: () => { |
|||
return false |
|||
} |
|||
}, |
|||
tableLoading: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
isShowIndex: { |
|||
type: Boolean, |
|||
default: false, |
|||
} |
|||
}, |
|||
data () { |
|||
return { |
|||
session: null |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.session = JSON.parse(JSON.stringify(this.FormData)) |
|||
}, |
|||
methods: { |
|||
//点击表单提交(新增或编辑) |
|||
FormClick (val) { |
|||
if (val[0] == 0) { |
|||
this.close() |
|||
} else { |
|||
val[1].validate((valid) => { |
|||
if (valid) { |
|||
this.$emit('FormSubmit', val); |
|||
} else { |
|||
this.$errorMsg('请按照提示继续操作') |
|||
return false; |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
close () { |
|||
const data = JSON.parse(JSON.stringify(this.session)) |
|||
this.$emit('close', data) |
|||
}, |
|||
goBack () { |
|||
this.$emit('goBack') |
|||
}, |
|||
DataPush (val) { |
|||
this.$emit('push', val) |
|||
}, |
|||
deleteRow(index, tableData) { |
|||
this.$emit('deleteRow', index, tableData) |
|||
}, |
|||
radioChange(prop,val){ |
|||
this.$emit('radioChange', prop, val) |
|||
}, |
|||
changeInput(prop, val) { |
|||
this.$emit("changeInput", prop, val) |
|||
}, |
|||
//点击selection框 |
|||
handleSelectionChange(val) { |
|||
this.$emit("handleSelectionChange", val); |
|||
}, |
|||
// form表单下拉框change事件 |
|||
changeSelect(prop,val ) { |
|||
this.$emit("changeSelect", prop, val) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
::v-deep .el-dialog__header{ |
|||
padding: 0 !important; |
|||
} |
|||
::v-deep .el-dialog__body{ |
|||
padding-top: 0; |
|||
} |
|||
.dialogOuterTitle{ |
|||
position: relative; |
|||
padding: 20px 0; |
|||
font-size: 18px; |
|||
height: 60px; |
|||
overflow: hidden; |
|||
color: #333; |
|||
font-weight: bold; |
|||
padding-left: 18px; |
|||
|
|||
&::before{ |
|||
content: ""; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 22px; |
|||
width: 5px; |
|||
height: 22px; |
|||
background: #1890ff; |
|||
} |
|||
} |
|||
::v-deep .newAndEdiDialog { |
|||
display: flex; |
|||
flex-direction: column; |
|||
width: 100%; |
|||
height: calc(100% - 60px); |
|||
.el-form { |
|||
flex: 1; |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
align-content: flex-start; |
|||
flex-wrap: wrap; |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
padding-right: 40px; |
|||
} |
|||
.screen-push { |
|||
color: rgb(64, 158, 255); |
|||
span { |
|||
cursor: pointer; |
|||
&:hover { |
|||
color: blue; |
|||
} |
|||
} |
|||
} |
|||
.formButton { |
|||
padding: 20px 20px 20px 0; |
|||
} |
|||
.formTable-box { |
|||
height: 40%; |
|||
|
|||
.el-form-item__content { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
overflow: hidden; |
|||
margin: 0 !important; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,354 @@ |
|||
<template> |
|||
<el-dialog |
|||
v-loading="loading" |
|||
element-loading-text="加载中..." |
|||
v-if="displayDialog" |
|||
:visible="true" |
|||
:fullscreen="true" |
|||
:modal="false" |
|||
:modal-append-to-body="false" |
|||
:show-close="false" |
|||
style="width:calc(100% - 28px);left:14px;top:14px;height:calc(100% - 28px)" |
|||
> |
|||
<div class="dialogOuterTitle">{{formTitle}}</div> |
|||
<div v-if="active === 0" class="currentFormAndTable"> |
|||
<curren-Form |
|||
size="medium" |
|||
class="newAndEdiDialogForDetail" |
|||
:searchData="FormData" |
|||
:searchForm="Form" |
|||
:searchOptions="Options" |
|||
:searchHandle="Handle" |
|||
:rules="Rules" |
|||
@changeInput="changeInput" |
|||
@push="DataPush(arguments)" |
|||
@submitForm="FormClick(arguments)" |
|||
@radioChange="radioChange" |
|||
@changeSelect="changeSelect" |
|||
> |
|||
<!-- <template> |
|||
<div class="addDetailsContent"> |
|||
<div class="title">添加明细数据</div> |
|||
<div class="tableBox"> |
|||
<currenTableFlex |
|||
:flexTableData="flexTableData" |
|||
:flexSearchOptions="Options" |
|||
:flexTableColumns="flexTableColumns" |
|||
:showAddBtn="true" |
|||
:showAllDeleteButton="true" |
|||
></currenTableFlex> |
|||
</div> |
|||
</div> |
|||
</template> --> |
|||
<!-- <template v-if="showmyTable"> |
|||
<el-form-item class="formTable-box" prop="details"> |
|||
<currenTable |
|||
:tableData="FormData.details" |
|||
:tableColumns="myTableColumns" |
|||
:selectionTable="selectionTable" |
|||
:tableLoading="tableLoading" |
|||
:isShowIndex="isShowIndex" |
|||
@handleSelectionChange="handleSelectionChange" |
|||
> |
|||
<template> |
|||
<el-table-column |
|||
fixed="right" |
|||
label="操作" |
|||
width="120"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
@click.native.prevent="deleteRow(scope.$index, FormData.details)" |
|||
type="text" |
|||
size="small"> |
|||
删除 |
|||
</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</template> |
|||
</currenTable> |
|||
</el-form-item> |
|||
</template> --> |
|||
</curren-Form> |
|||
<!-- 添加子集数据 --> |
|||
<div class="addDetailsContent" v-if="active === 0"> |
|||
<div class="title">添加明细数据</div> |
|||
<currenTableFlex |
|||
:flexTableData="flexTableData" |
|||
:flexSearchOptions="editOptions" |
|||
:flexTableColumns="flexTableColumns" |
|||
:showAddBtn="true" |
|||
:showAllDeleteButton="true" |
|||
></currenTableFlex> |
|||
</div> |
|||
</div> |
|||
<div v-if="active === 1 && pageStatus == 'success'" class="page4"> |
|||
<el-result icon="success" title="成功提示" :subTitle="formTitle + '成功'"> |
|||
<template slot="extra"> |
|||
<el-button type="primary" size="medium" @click="close" |
|||
>退出</el-button |
|||
> |
|||
</template> |
|||
</el-result> |
|||
</div> |
|||
<div v-if="active === 2 && pageStatus == 'error'" class="page4"> |
|||
<el-result icon="error" title="错误提示" :subTitle="formTitle + '失败'"> |
|||
<template slot="extra"> |
|||
<el-button type="primary" size="medium" @click="goBack" |
|||
>返回</el-button |
|||
> |
|||
<el-button type="primary" size="medium" @click="close" |
|||
>退出</el-button |
|||
> |
|||
</template> |
|||
</el-result> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
<script> |
|||
import currenTableFlex from "@/components/currenTableFlex" |
|||
export default { |
|||
components: { |
|||
currenTableFlex, |
|||
}, |
|||
props: { |
|||
loading: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
//控制步骤 |
|||
active: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
//结合active控制返回结果 |
|||
pageStatus: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
//显示返回结果 |
|||
formReveal: { |
|||
type: Boolean, |
|||
}, |
|||
//dialog标题 |
|||
formTitle: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
//dialog是否显示 |
|||
displayDialog: { |
|||
type: Boolean, |
|||
default: () => { |
|||
return false |
|||
} |
|||
}, |
|||
//表单数据 |
|||
FormData: { |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
} |
|||
}, |
|||
//绑定表单数据 |
|||
Form: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
//下拉框数据 |
|||
Options: { |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
} |
|||
}, |
|||
//表单按钮 |
|||
Handle: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
//表单验证 |
|||
Rules: { |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
} |
|||
}, |
|||
// 列表字段 |
|||
myTableColumns: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
showmyTable: { |
|||
type: Boolean, |
|||
default: () => { |
|||
return false |
|||
} |
|||
}, |
|||
selectionTable: { |
|||
type: Boolean, |
|||
default: () => { |
|||
return false |
|||
} |
|||
}, |
|||
tableLoading: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
isShowIndex: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
// detail表头 |
|||
flexTableColumns:{ |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
} |
|||
}, |
|||
data () { |
|||
return { |
|||
session: null, |
|||
flexTableData: null,//detail数据 |
|||
editOptions: {}, |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.session = JSON.parse(JSON.stringify(this.FormData)) |
|||
this.flexTableData = this.FormData.details || [] |
|||
console.log(190,this.flexTableData,this.flexTableColumns) |
|||
}, |
|||
methods: { |
|||
//点击表单提交(新增或编辑) |
|||
FormClick (val) { |
|||
if (val[0] == 0) { |
|||
this.close() |
|||
} else { |
|||
val[1].validate((valid) => { |
|||
if (valid) { |
|||
this.$emit('FormSubmit', val); |
|||
} else { |
|||
this.$errorMsg('请按照提示继续操作') |
|||
return false; |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
close () { |
|||
const data = JSON.parse(JSON.stringify(this.session)) |
|||
this.$emit('close', data) |
|||
}, |
|||
goBack () { |
|||
this.$emit('goBack') |
|||
}, |
|||
DataPush (val) { |
|||
this.$emit('push', val) |
|||
}, |
|||
deleteRow(index, tableData) { |
|||
this.$emit('deleteRow', index, tableData) |
|||
}, |
|||
radioChange(prop,val){ |
|||
this.$emit('radioChange', prop, val) |
|||
}, |
|||
changeInput(prop, val) { |
|||
this.$emit("changeInput", prop, val) |
|||
}, |
|||
//点击selection框 |
|||
handleSelectionChange(val) { |
|||
this.$emit("handleSelectionChange", val); |
|||
}, |
|||
// form表单下拉框change事件 |
|||
changeSelect(prop,val ) { |
|||
this.$emit("changeSelect", prop, val) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
::v-deep .el-dialog__header{ |
|||
padding: 0 !important; |
|||
} |
|||
::v-deep .el-dialog__body{ |
|||
padding-top: 0; |
|||
} |
|||
.dialogOuterTitle{ |
|||
position: relative; |
|||
padding: 20px 0; |
|||
font-size: 18px; |
|||
height: 60px; |
|||
overflow: hidden; |
|||
color: #333; |
|||
font-weight: bold; |
|||
padding-left: 18px; |
|||
|
|||
&::before{ |
|||
content: ""; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 22px; |
|||
width: 5px; |
|||
height: 22px; |
|||
background: #1890ff; |
|||
} |
|||
} |
|||
.currentFormAndTable{ |
|||
display: flex; |
|||
height: calc(100% - 120px); |
|||
} |
|||
|
|||
::v-deep .newAndEdiDialogForDetail { |
|||
display: flex; |
|||
flex-direction: column; |
|||
width: 70%; |
|||
height: calc(100% - 10px); |
|||
.el-form { |
|||
flex: 1; |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
align-content: flex-start; |
|||
flex-wrap: wrap; |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
padding-right: 40px; |
|||
} |
|||
.screen-push { |
|||
color: rgb(64, 158, 255); |
|||
span { |
|||
cursor: pointer; |
|||
&:hover { |
|||
color: blue; |
|||
} |
|||
} |
|||
} |
|||
.formButton { |
|||
position: fixed; |
|||
right: 60px; |
|||
bottom: 40px; |
|||
} |
|||
.formTable-box { |
|||
height: 40%; |
|||
|
|||
.el-form-item__content { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
overflow: hidden; |
|||
margin: 0 !important; |
|||
} |
|||
} |
|||
} |
|||
.addDetailsContent{ |
|||
background: #f8f8f8; |
|||
padding: 20px; |
|||
height: calc(100% - 10px); |
|||
.currenTableFlex{ |
|||
height: calc(100% - 20px); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,81 @@ |
|||
<template> |
|||
<el-dialog |
|||
:title="title" |
|||
:v-loading="loadingPDF" |
|||
:visible.sync="isShowPDF" |
|||
:modal-append-to-body="false" |
|||
:append-to-body="true" |
|||
top="1vh" |
|||
> |
|||
<div> |
|||
<el-button-group> |
|||
<el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="prePage">上一页</el-button> |
|||
<el-button type="primary" size="mini" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button> |
|||
</el-button-group> |
|||
<div style="marginTop: 10px; color: #409EFF">{{ pageNum }} / {{ pageTotalNum }}</div> |
|||
<pdf |
|||
:page="pageNum" |
|||
:src="urlPDF" |
|||
@progress="loadedRatio = $event" |
|||
@num-pages="pageTotalNum=$event" |
|||
></pdf> |
|||
</div> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="close">取 消</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</template> |
|||
<script> |
|||
|
|||
import pdf from 'vue-pdf' |
|||
|
|||
export default { |
|||
name: 'Pdf', |
|||
components: { |
|||
pdf, |
|||
}, |
|||
data() { |
|||
return { |
|||
// urlPDF: 'http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf', |
|||
pageNum: 1, |
|||
pageTotalNum: 1, //总页数 |
|||
loadedRatio: 0, // 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了 |
|||
} |
|||
}, |
|||
props: { |
|||
urlPDF: { |
|||
type: String, |
|||
default: '', |
|||
}, |
|||
title: { |
|||
type: String, |
|||
default: '', |
|||
}, |
|||
isShowPDF: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
loadingPDF: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
methods: { |
|||
// 上一页 |
|||
prePage() { |
|||
let page = this.pageNum |
|||
page = page > 1 ? page - 1 : this.pageTotalNum |
|||
this.pageNum = page |
|||
}, |
|||
// 下一页 |
|||
nextPage() { |
|||
let page = this.pageNum |
|||
page = page < this.pageTotalNum ? page + 1 : 1 |
|||
this.pageNum = page |
|||
}, |
|||
close(){ |
|||
this.$emit('closePDF') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue