238 changed files with 70811 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,116 @@ |
|||||
|
# Logs |
||||
|
logs |
||||
|
*.log |
||||
|
npm-debug.log* |
||||
|
yarn-debug.log* |
||||
|
yarn-error.log* |
||||
|
lerna-debug.log* |
||||
|
|
||||
|
# Diagnostic reports (https://nodejs.org/api/report.html) |
||||
|
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json |
||||
|
|
||||
|
# Runtime data |
||||
|
pids |
||||
|
*.pid |
||||
|
*.seed |
||||
|
*.pid.lock |
||||
|
|
||||
|
# Directory for instrumented libs generated by jscoverage/JSCover |
||||
|
lib-cov |
||||
|
|
||||
|
# Coverage directory used by tools like istanbul |
||||
|
coverage |
||||
|
*.lcov |
||||
|
|
||||
|
# nyc test coverage |
||||
|
.nyc_output |
||||
|
|
||||
|
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) |
||||
|
.grunt |
||||
|
|
||||
|
# Bower dependency directory (https://bower.io/) |
||||
|
bower_components |
||||
|
|
||||
|
# node-waf configuration |
||||
|
.lock-wscript |
||||
|
|
||||
|
# Compiled binary addons (https://nodejs.org/api/addons.html) |
||||
|
build/Release |
||||
|
|
||||
|
# Dependency directories |
||||
|
node_modules/ |
||||
|
jspm_packages/ |
||||
|
|
||||
|
# Snowpack dependency directory (https://snowpack.dev/) |
||||
|
web_modules/ |
||||
|
|
||||
|
# TypeScript cache |
||||
|
*.tsbuildinfo |
||||
|
|
||||
|
# Optional npm cache directory |
||||
|
.npm |
||||
|
|
||||
|
# Optional eslint cache |
||||
|
.eslintcache |
||||
|
|
||||
|
# Microbundle cache |
||||
|
.rpt2_cache/ |
||||
|
.rts2_cache_cjs/ |
||||
|
.rts2_cache_es/ |
||||
|
.rts2_cache_umd/ |
||||
|
|
||||
|
# Optional REPL history |
||||
|
.node_repl_history |
||||
|
|
||||
|
# Output of 'npm pack' |
||||
|
*.tgz |
||||
|
|
||||
|
# Yarn Integrity file |
||||
|
.yarn-integrity |
||||
|
|
||||
|
# dotenv environment variables file |
||||
|
.env |
||||
|
.env.test |
||||
|
|
||||
|
# parcel-bundler cache (https://parceljs.org/) |
||||
|
.cache |
||||
|
.parcel-cache |
||||
|
|
||||
|
# Next.js build output |
||||
|
.next |
||||
|
out |
||||
|
|
||||
|
# Nuxt.js build / generate output |
||||
|
.nuxt |
||||
|
dist |
||||
|
|
||||
|
# Gatsby files |
||||
|
.cache/ |
||||
|
# Comment in the public line in if your project uses Gatsby and not Next.js |
||||
|
# https://nextjs.org/blog/next-9-1#public-directory-support |
||||
|
# public |
||||
|
|
||||
|
# vuepress build output |
||||
|
.vuepress/dist |
||||
|
|
||||
|
# Serverless directories |
||||
|
.serverless/ |
||||
|
|
||||
|
# FuseBox cache |
||||
|
.fusebox/ |
||||
|
|
||||
|
# DynamoDB Local files |
||||
|
.dynamodb/ |
||||
|
|
||||
|
# TernJS port file |
||||
|
.tern-port |
||||
|
|
||||
|
# Stores VSCode versions used for testing VSCode extensions |
||||
|
.vscode-test |
||||
|
|
||||
|
# yarn v2 |
||||
|
|
||||
|
.yarn/cache |
||||
|
.yarn/unplugged |
||||
|
.yarn/build-state.yml |
||||
|
.pnp.* |
||||
@ -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_left 主列表-操作列按钮点击事件 |
||||
|
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"] |
||||
|
} |
||||
File diff suppressed because it is too large
@ -0,0 +1,123 @@ |
|||||
|
{ |
||||
|
"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", |
||||
|
"oidc-client": "^1.11.5", |
||||
|
"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,26 @@ |
|||||
|
// dev_win
|
||||
|
window.SITE_CONFIG['baseApi'] = 'http://dev.ccwin-in.com:60024' |
||||
|
window.SITE_CONFIG['authApi'] = 'http://dev.ccwin-in.com:60020' |
||||
|
// window.SITE_CONFIG['baseApi'] = 'http://192.168.0.190:60078'//http://dev.ccwin-in.com:60022
|
||||
|
// window.SITE_CONFIG['authApi'] = 'http://192.168.0.190:60065'//http://dev.ccwin-in.com:60020
|
||||
|
window.SITE_CONFIG['businessApi'] = 'http://dev.ccwin-in.com:10097' |
||||
|
//是否登录配置信息【loginName】
|
||||
|
window.SITE_CONFIG['isConfigLogin'] = false |
||||
|
//如果【isConfigLogin】为true则使用【loginName】登录
|
||||
|
window.SITE_CONFIG['configLoginName'] = 'admin' |
||||
|
// 默认登录密码（isConfigLogin为true或者链接参数存在loginName使用）
|
||||
|
window.SITE_CONFIG['configLoginPass'] = '1q2w3E*' |
||||
|
// 是否单页面（不显示菜单头部等部分）
|
||||
|
window.SITE_CONFIG['isSinglePage'] = false |
||||
|
// 项目配置
|
||||
|
window.SITE_CONFIG['appClientId'] = 'Z_App' |
||||
|
// 项目配置内部名称
|
||||
|
window.SITE_CONFIG['appClientScope'] = 'Inventory' |
||||
|
// 浏览器名称
|
||||
|
window.SITE_CONFIG['browserTitle'] = 'Inventory-QAD&WMS' |
||||
|
// 单点登录使用数据
|
||||
|
window.SITE_CONFIG['oidcLogin_url'] = 'http://dev.ccwin-in.com:60065', |
||||
|
window.SITE_CONFIG['oidcLogin_clientId'] = 'InterfaceDash_App' |
||||
|
window.SITE_CONFIG['oidcLogin_scopes'] = 'offline_access Z profile' |
||||
|
// 隐藏的页面
|
||||
|
window.SITE_CONFIG['menuHiddenConfig'] = [] |
||||
|
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,98 @@ |
|||||
|
<template> |
||||
|
<div id="app"> |
||||
|
<router-view /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'App' |
||||
|
} |
||||
|
localStorage.setItem('baseApi',window.SITE_CONFIG['baseApi']) |
||||
|
localStorage.setItem('authApi',window.SITE_CONFIG['authApi']) |
||||
|
// localStorage.setItem('userApi',window.SITE_CONFIG['userApi']) |
||||
|
localStorage.setItem('businessApi',window.SITE_CONFIG['businessApi']) |
||||
|
localStorage.setItem('isConfigLogin',window.SITE_CONFIG['isConfigLogin']) |
||||
|
localStorage.setItem('configLoginName',window.SITE_CONFIG['configLoginName']) |
||||
|
localStorage.setItem('configLoginPass',window.SITE_CONFIG['configLoginPass']) |
||||
|
localStorage.setItem('isSinglePage',window.SITE_CONFIG['isSinglePage']) |
||||
|
localStorage.setItem('appClientId',window.SITE_CONFIG['appClientId']) |
||||
|
localStorage.setItem('appClientScope',window.SITE_CONFIG['appClientScope']) |
||||
|
localStorage.setItem('browserTitle',window.SITE_CONFIG['browserTitle']) |
||||
|
// 单点登录使用数据 |
||||
|
localStorage.setItem('oidcLogin_url',window.SITE_CONFIG['oidcLogin_url']) |
||||
|
localStorage.setItem('oidcLogin_clientId',window.SITE_CONFIG['oidcLogin_clientId']) |
||||
|
localStorage.setItem('oidcLogin_scopes',window.SITE_CONFIG['oidcLogin_scopes']) |
||||
|
// 隐藏菜单 |
||||
|
localStorage.setItem('menuHiddenConfig',window.SITE_CONFIG['menuHiddenConfig']) |
||||
|
|
||||
|
// localStorage.setItem('isAutoLogin',window.SITE_CONFIG['isAutoLogin']) |
||||
|
// localStorage.setItem('userNameOrEmailAddress',window.SITE_CONFIG['userNameOrEmailAddress']) |
||||
|
// localStorage.setItem('client_secret',window.SITE_CONFIG['client_secret']) |
||||
|
|
||||
|
// 获取浏览器语言 |
||||
|
const language_brow = (navigator.language || navigator.browserLanguage) |
||||
|
console.log(21,language_brow) |
||||
|
if(language_brow.indexOf('zh') >= 0){ |
||||
|
localStorage.setItem('browserLanguage','zh-Hans') |
||||
|
}else{ |
||||
|
localStorage.setItem('browserLanguage','en') |
||||
|
} |
||||
|
|
||||
|
</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,177 @@ |
|||||
|
import request from '@/utils/request' |
||||
|
import store from '@/store' |
||||
|
// let baseURL = process.env.VUE_APP_BASE_API + '/'
|
||||
|
let baseAPI = localStorage.getItem('baseApi') + '/' |
||||
|
let baseURL = localStorage.getItem('baseApi') + '/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.currentUserInfo.userName |
||||
|
} |
||||
|
return request({ |
||||
|
url: baseURL + url, |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
//编辑
|
||||
|
export function postUpdate(data, id, url) { |
||||
|
return request({ |
||||
|
// url: baseURL + url + '/' + id,
|
||||
|
url: baseURL + url, |
||||
|
method: 'put', |
||||
|
data, |
||||
|
params:{id:id} |
||||
|
}) |
||||
|
} |
||||
|
//删除
|
||||
|
export function postDelete(id, url) { |
||||
|
return request({ |
||||
|
// url: baseURL + url + '/' + id,
|
||||
|
url: baseURL + url, |
||||
|
method: 'delete', |
||||
|
params:{id:id} |
||||
|
}) |
||||
|
} |
||||
|
//分页+筛选【列表】
|
||||
|
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, |
||||
|
}) |
||||
|
} |
||||
|
//导入 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 getDetailed(id, url) { |
||||
|
return request({ |
||||
|
url: baseURL + url + '/' + id, |
||||
|
method: 'get', |
||||
|
}) |
||||
|
} |
||||
|
//获取分页+筛选（只查询）
|
||||
|
export function getPage(data, url) { |
||||
|
return request({ |
||||
|
url: baseURL + url, |
||||
|
method: 'get', |
||||
|
params: data |
||||
|
}) |
||||
|
} |
||||
|
// 获取版本编号
|
||||
|
export function getVsersion() { |
||||
|
return request({ |
||||
|
url: window.SITE_CONFIG['versionUrl'] + `/version.json?t=${new Date().getTime()}`, |
||||
|
method: 'get' |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// fast-new
|
||||
|
//API-POST
|
||||
|
export function ApiTypePost(data, url) { |
||||
|
return request({ |
||||
|
url: baseAPI + url, |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
//API-PUT
|
||||
|
export function ApiTypePut(data, id, url) { |
||||
|
return request({ |
||||
|
url: baseAPI + url, |
||||
|
method: 'put', |
||||
|
data, |
||||
|
params:{id:id} |
||||
|
}) |
||||
|
} |
||||
|
//API-DELETE
|
||||
|
export function ApiTypeDelete(id, url) { |
||||
|
return request({ |
||||
|
url: baseAPI + url, |
||||
|
method: 'delete', |
||||
|
params:{id:id} |
||||
|
}) |
||||
|
} |
||||
@ -0,0 +1,207 @@ |
|||||
|
import request from '@/utils/request' |
||||
|
let baseApi = localStorage.getItem('baseApi') + '/api' |
||||
|
let authUrl = localStorage.getItem('authApi') |
||||
|
let authApi = authUrl + '/api' |
||||
|
|
||||
|
export function logout() { |
||||
|
return request({ |
||||
|
url: authApi + '/account/logout', |
||||
|
method: 'get' |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
// faster-new
|
||||
|
// 登录
|
||||
|
export function login(data) { |
||||
|
return request({ |
||||
|
url: authUrl + '/CustAccount/login', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 获取token
|
||||
|
export function token(data) { |
||||
|
return request({ |
||||
|
url: authApi + '/connect/token', |
||||
|
method: 'post', |
||||
|
headers: { |
||||
|
'Content-Type': 'application/x-www-form-urlencoded' |
||||
|
}, |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 通过token获取用户信息（单点登录）
|
||||
|
export function getUsersByToken(token) { |
||||
|
return request({ |
||||
|
url: authUrl + '/connect/userinfo', |
||||
|
method: 'get', |
||||
|
Token:token |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 通过用户名获取用户信息
|
||||
|
export function getUsersByUserName(name) { |
||||
|
return request({ |
||||
|
url: authApi + '/identity/users/by-username/'+name, |
||||
|
method: 'get', |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 获取表头zh转义数据
|
||||
|
export function getInterfaceBoard() { |
||||
|
return request({ |
||||
|
method:'get', |
||||
|
url: baseApi + '/abp/application-localization', |
||||
|
params:{ |
||||
|
CultureName:localStorage.getItem('browserLanguage'), |
||||
|
OnlyDynamics:false |
||||
|
} |
||||
|
// params:{IncludeLocalizationResources:true}
|
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 获取菜单数据
|
||||
|
export function getDefinitionMenu(IncludeTypes) { |
||||
|
return request({ |
||||
|
method:'get', |
||||
|
url: baseApi + '/abp/application-configuration', |
||||
|
params:{IncludeLocalizationResources:true} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 获取枚举数据/dto列类型等所有配置
|
||||
|
export async function getApiDefinition() { |
||||
|
return request({ |
||||
|
method:'get', |
||||
|
url: baseApi + '/abp/api-definition', |
||||
|
params:{IncludeTypes:true} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// *************权限Roles页面维护*************
|
||||
|
//获取列表
|
||||
|
export function getPageListRoles(data) { |
||||
|
return request({ |
||||
|
url: authApi + '/identity/roles', |
||||
|
// url: 'http://192.168.0.190:44330/Identity/Roles',
|
||||
|
method: 'get', |
||||
|
params: data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
//获取权限模板
|
||||
|
export function getPermissionsRoles(data) { |
||||
|
return request({ |
||||
|
url: authApi +'/permission-management/permissions', |
||||
|
method: 'get', |
||||
|
params: data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 创建角色
|
||||
|
export function postCreateRoles(data) { |
||||
|
return request({ |
||||
|
url: authApi + '/identity/roles', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
//编辑角色
|
||||
|
export function postUpdateRoles(data, id) { |
||||
|
return request({ |
||||
|
url: authApi+'/identity/roles/' + id, |
||||
|
method: 'put', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
//删除角色
|
||||
|
export function postDeleteRoles(id) { |
||||
|
return request({ |
||||
|
url: authApi + '/identity/roles/' + id, |
||||
|
method: 'delete', |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
//保存权限模板
|
||||
|
export function savePermissionsRoles(URL, data) { |
||||
|
return request({ |
||||
|
url: authApi + URL, |
||||
|
method: 'put', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 更新权限
|
||||
|
export function updatePermissionsGranted(pname,pkey) { |
||||
|
return request({ |
||||
|
url: authApi + `/permissions/get-isGranted?name=demox&providerName=${pname}&providerKey=${pkey}`, |
||||
|
method: 'post', |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// *************用户Users页面维护*************
|
||||
|
|
||||
|
//获取全部用户信息
|
||||
|
export function getPageListUsers(data) { |
||||
|
return request({ |
||||
|
url: authApi + '/identity/users', |
||||
|
method: 'get', |
||||
|
params: data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
//新建用户
|
||||
|
export function postCreateUser(data) { |
||||
|
return request({ |
||||
|
url: authApi + '/identity/users', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
//编辑用户
|
||||
|
export function postUpdateUser(data, id) { |
||||
|
return request({ |
||||
|
url: authApi + '/identity/users/' + id, |
||||
|
method: 'put', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
//删除用户
|
||||
|
export function postDeleteUser(id) { |
||||
|
return request({ |
||||
|
url: authApi + '/identity/users/' + id, |
||||
|
method: 'delete', |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 获取当前用户的角色
|
||||
|
export function usersroles() { |
||||
|
return request({ |
||||
|
url: authApi + '/identity/users/assignable-roles', |
||||
|
method: 'get' |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
//获取当前角色
|
||||
|
export function getusersID(data) { |
||||
|
return request({ |
||||
|
url: authApi + '/identity/users/' + data + '/roles', |
||||
|
method: 'get' |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
//修改登录用户的密码-强密码规则
|
||||
|
export function postLoginUserInfo(data, id) { |
||||
|
return request({ |
||||
|
url: authApi + '/identity/users/change-password/' + id, |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
@ -0,0 +1,49 @@ |
|||||
|
import request from '@/utils/request' |
||||
|
// let baseURL = process.env.VUE_APP_BASE_API + '/'
|
||||
|
let baseURL = localStorage.getItem('base') + '/api/' |
||||
|
|
||||
|
//---------------------------通用---------------------------
|
||||
|
//任务流程——承接
|
||||
|
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 open(url, data) { |
||||
|
return request({ |
||||
|
url: baseURL + url + '/open/'+data.id, |
||||
|
method: 'post', |
||||
|
// 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,84 @@ |
|||||
|
<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) |
||||
|
} |
||||
|
|
||||
|
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,94 @@ |
|||||
|
<template> |
||||
|
<div v-if="errorLogs.length>0"> |
||||
|
<el-badge |
||||
|
:is-dot="true" |
||||
|
style="line-height: 10px;" |
||||
|
@click.native="dialogTableVisible=true" |
||||
|
> |
||||
|
<el-button style="padding: 4px" size="small" type="danger"> |
||||
|
<svg-icon icon-class="svg_bug" style="font-size: 16px;"/> |
||||
|
</el-button> |
||||
|
</el-badge> |
||||
|
|
||||
|
<el-dialog |
||||
|
:visible.sync="dialogTableVisible" |
||||
|
width="80%" |
||||
|
append-to-body |
||||
|
:close-on-click-modal="true" |
||||
|
:show-close="true" |
||||
|
> |
||||
|
<div slot="title"> |
||||
|
<span style="padding-right: 10px;">Error Log</span> |
||||
|
<el-button |
||||
|
size="mini" |
||||
|
type="primary" |
||||
|
icon="el-icon-delete" |
||||
|
@click="clearAll" |
||||
|
style="float: right;margin-right: 30px;" |
||||
|
>清除全部</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="svg_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,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,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?'svg_exitFullscreen':'svg_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,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,324 @@ |
|||||
|
<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" |
||||
|
|
||||
|
export default { |
||||
|
name:"UploadExcel", |
||||
|
mixins:[mixins], |
||||
|
watch: { |
||||
|
show () { |
||||
|
this.reset() |
||||
|
} |
||||
|
}, |
||||
|
props: { |
||||
|
//表头浮动项 |
||||
|
fixedArr:{ |
||||
|
type:Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
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 |
||||
|
// } |
||||
|
// }, |
||||
|
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) |
||||
|
} |
||||
|
}, |
||||
|
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,367 @@ |
|||||
|
<template> |
||||
|
<!-- 组件功能：普通新增编辑（目前只有主表）参数配置从api获取 --> |
||||
|
<el-dialog |
||||
|
:visible.sync="show" |
||||
|
:modal="false" |
||||
|
:modal-append-to-body="false" |
||||
|
:show-close="true" |
||||
|
@close="close" |
||||
|
class="searchPageComponents" |
||||
|
:fullscreen="true" |
||||
|
style="width:calc(100% - 28px);left:14px;top:14px;height:calc(100% - 28px)" |
||||
|
v-loading="Loading.addEditApiLoading" |
||||
|
> |
||||
|
<!-- 数据填写 --> |
||||
|
<div v-if="active === 0" style="height: 100%;"> |
||||
|
<div class="centerInnerContent" :class="{'hasDetails' : flexTableData}"> |
||||
|
<!-- 左侧主表 --> |
||||
|
<div class="leftMainForm"> |
||||
|
<div class="dialogOuterTitle">{{formTitle}} 【主表信息】</div> |
||||
|
<!-- 表单 --> |
||||
|
<el-form |
||||
|
class="addEditFrom" |
||||
|
ref="addEditFrom_Ref" |
||||
|
v-if="formData" |
||||
|
:model="formData" |
||||
|
:rules="formRules" |
||||
|
> |
||||
|
<el-row :gutter="40"> |
||||
|
<el-col |
||||
|
:span="item.colSpan || 12" |
||||
|
v-for="(item, index) in formItemData" |
||||
|
:key="index" |
||||
|
> |
||||
|
<el-form-item |
||||
|
:label="item.label" |
||||
|
:prop="item.prop" |
||||
|
v-if="item.label.toUpperCase() != 'DETAILS'" |
||||
|
> |
||||
|
<!-- 数值 --> |
||||
|
<el-input-number |
||||
|
v-if="item.apiBaseType === 'number'" |
||||
|
v-model="formData[item.prop]" |
||||
|
:min="item.minimum || undefined" |
||||
|
:max="item.maximum || undefined" |
||||
|
:maxlength="item.maxLength || undefined" |
||||
|
:minlength="item.minLength || undefined" |
||||
|
:disabled="Boolean(item.disabled)" |
||||
|
:placeholder="item.placeholder || '请输入' + item.label" |
||||
|
@change="changeValue(item.prop,item,$event)" |
||||
|
@clear="clearValue(item.prop,$event)" |
||||
|
></el-input-number> |
||||
|
|
||||
|
<!-- 时间转换 --> |
||||
|
<el-date-picker |
||||
|
v-else-if="item.apiBaseType === 'datetime'" |
||||
|
v-model="formData[item.prop]" |
||||
|
type="datetime" |
||||
|
placeholder="选择日期时间" |
||||
|
format="yyyy-MM-dd HH:mm:ss" |
||||
|
value-format="yyyy-MM-ddTHH:mm:ss" |
||||
|
:disabled="Boolean(item.disabled)" |
||||
|
></el-date-picker> |
||||
|
|
||||
|
<!-- 布尔、枚举 --> |
||||
|
<el-select |
||||
|
v-else-if="item.isEnums || item.apiBaseType === 'boolean'" |
||||
|
v-model="formData[item.prop]" |
||||
|
:placeholder="item.placeholder || '请选择' + item.label" |
||||
|
:disabled="Boolean(item.disabled)" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in item.enums_list" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
></el-option> |
||||
|
</el-select> |
||||
|
|
||||
|
<!-- 文本框 --> |
||||
|
<!-- <el-input |
||||
|
v-else |
||||
|
type="textarea" |
||||
|
autosize |
||||
|
resize="none" |
||||
|
v-model="formData[item.prop]" |
||||
|
:placeholder="item.placeholder || '请输入' + item.label" |
||||
|
:disabled="Boolean(item.disabled)" |
||||
|
></el-input> --> |
||||
|
<el-input |
||||
|
v-else |
||||
|
v-model="formData[item.prop]" |
||||
|
:placeholder="item.placeholder || '请输入' + item.label" |
||||
|
:disabled="Boolean(item.disabled)" |
||||
|
></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<!-- 右侧子表 --> |
||||
|
<div class="rightDetailTable" v-if="flexTableData"> |
||||
|
<div class="dialogOuterTitle">{{formTitle}} 【子表信息】</div> |
||||
|
<currenTableFlex |
||||
|
ref="currenTableFlex_Ref" |
||||
|
:isShowIndex="true" |
||||
|
:isEditable="true" |
||||
|
:setUTableHeight="230" |
||||
|
class="currenTableFlex" |
||||
|
:flexTableData="flexTableData" |
||||
|
:flexTableColumns="flexTableColumns" |
||||
|
></currenTableFlex> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- 操作按钮 --> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="show = false">取 消</el-button> |
||||
|
<el-button type="primary" @click="submitHandle()">确 定</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- 成功提示 --> |
||||
|
<div v-if="active === 1"> |
||||
|
<el-result icon="success" title="成功提示" :subTitle="formTitle + '成功'"> |
||||
|
<template slot="extra"> |
||||
|
<el-button type="primary" size="medium" @click="exitHandle" |
||||
|
>退出</el-button |
||||
|
> |
||||
|
</template> |
||||
|
</el-result> |
||||
|
</div> |
||||
|
<!-- 错误提示 --> |
||||
|
<div v-if="active === 2"> |
||||
|
<el-result icon="error" title="错误提示" :subTitle="formTitle + '失败'"> |
||||
|
<template slot="extra"> |
||||
|
<el-button type="primary" size="medium" @click="changeActive(0)" |
||||
|
>返回</el-button |
||||
|
> |
||||
|
<el-button type="primary" size="medium" @click="exitHandle" |
||||
|
>退出</el-button |
||||
|
> |
||||
|
</template> |
||||
|
</el-result> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { ApiTypePost, ApiTypePut } from "@/api/wms-api" |
||||
|
import { LoadingMixins } from "@/mixins/LoadingMixins"; |
||||
|
import currenTableFlex from "@/components/currenTableFlex" |
||||
|
import * as allUrlOption from '@/utils/baseData/urlOption' |
||||
|
export default { |
||||
|
name:"addEditFromApiPop", |
||||
|
mixins:[ LoadingMixins ], |
||||
|
components: { currenTableFlex }, |
||||
|
props: { |
||||
|
// 编辑行数据 |
||||
|
editRowData:{ |
||||
|
type: Object, |
||||
|
default: null |
||||
|
}, |
||||
|
// 操作类型：add/edit |
||||
|
handleType:{ |
||||
|
type: String, |
||||
|
default: null |
||||
|
}, |
||||
|
// 提交事件 |
||||
|
submitForm:{ |
||||
|
type:Function, |
||||
|
default:null |
||||
|
}, |
||||
|
// 特殊的【新增】接口，如果没有就走路由下的配置文件 |
||||
|
addSubmitUrl:{ |
||||
|
type: String, |
||||
|
default: null |
||||
|
}, |
||||
|
// 特殊的【编辑】接口，如果没有就走路由下的配置文件 |
||||
|
editSubmitUrl:{ |
||||
|
type: String, |
||||
|
default: null |
||||
|
}, |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
//明细-列表 |
||||
|
URLOption_detailList:allUrlOption[this.$route.name].detailListURL, |
||||
|
// 当前的dto |
||||
|
currentDtos:this.$store.getters.dtoColumnTypes[this.$route.name], |
||||
|
active:0,//显示内容：0表单 1成功 2失败 |
||||
|
show:true, |
||||
|
formTitle:null,//form名称 |
||||
|
formData:{},//表单数据 |
||||
|
formItemData:null,//表单item配置 |
||||
|
formRules: {},//表单验证 |
||||
|
flexTableData:null,//子表table |
||||
|
// flexTableColumns:null,//子表table列 |
||||
|
flexTableColumns: null, |
||||
|
} |
||||
|
}, |
||||
|
mounted(){ |
||||
|
this.initTitle() |
||||
|
this.initFormItems() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 初始化form名称 |
||||
|
initTitle(){ |
||||
|
if(this.handleType){ |
||||
|
this.formTitle = this.handleType == 'add' ? '新增'+this.$route.name : '编辑'+this.$route.name |
||||
|
} |
||||
|
}, |
||||
|
// 初始化表单配置、rules |
||||
|
initFormItems(){ |
||||
|
let _dtoList_type = this.handleType == 'add' ? 'C' : 'U' |
||||
|
let _dtoList = this.currentDtos[_dtoList_type].dtoList |
||||
|
// 除去子表信息 |
||||
|
let _formItems = _dtoList.filter(item=>{ |
||||
|
return item.prop.toUpperCase() != 'DETAILS' |
||||
|
}) |
||||
|
if(_formItems)this.formItemData = _formItems |
||||
|
// 编辑格式：特殊处理默认值 |
||||
|
if(this.handleType == 'edit' && this.editRowData){ |
||||
|
this.formData = JSON.parse(JSON.stringify(this.editRowData)) |
||||
|
}else{ |
||||
|
this.formData = {} |
||||
|
} |
||||
|
// 子表数据 |
||||
|
let _list = _dtoList.filter(item=>{ |
||||
|
return item.prop.toUpperCase() == 'DETAILS' |
||||
|
}) |
||||
|
if(_list && _list.length > 0){ |
||||
|
if(this.handleType == 'edit'){ |
||||
|
this.flexTableData = this.formData[_list[0].prop] |
||||
|
}else{ |
||||
|
this.flexTableData = [] |
||||
|
} |
||||
|
} |
||||
|
// 子表数据列 |
||||
|
if(this.URLOption_detailList){ |
||||
|
let _detailApi = this.URLOption_detailList.slice(0,this.URLOption_detailList.lastIndexOf('/')) |
||||
|
let _detailDtos = this.$store.getters.dtoColumnTypes[_detailApi].S.dtoList |
||||
|
this.flexTableColumns = _detailDtos |
||||
|
} |
||||
|
|
||||
|
// 表单验证格式化 |
||||
|
this.formRules={} |
||||
|
_dtoList.forEach(item=>{ |
||||
|
if(item.isRequired){ |
||||
|
this.formRules[item.prop] = [{ required: true, trigger: "blur", message: "不可为空" }] |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 关闭弹窗 |
||||
|
close() { |
||||
|
this.show = false |
||||
|
this.$emit("closePop") |
||||
|
}, |
||||
|
// 提交表单 |
||||
|
submitHandle(){ |
||||
|
this.$refs.addEditFrom_Ref.validate((valid) => { |
||||
|
if(this.submitForm){ |
||||
|
this.submitForm(valid,this.formData,this.handleType,this.formItemData,this.formRules) |
||||
|
return |
||||
|
} |
||||
|
this.formData.details = this.flexTableData |
||||
|
this.Loading.addEditApiLoading = true |
||||
|
if (valid) { |
||||
|
// 新增 |
||||
|
if(this.handleType == 'add'){ |
||||
|
ApiTypePost( |
||||
|
this.formData, |
||||
|
this.currentDtos.C.actionsUrl |
||||
|
).then(res => { |
||||
|
this.changeActive(1) |
||||
|
}).catch(err => { |
||||
|
this.changeActive(2) |
||||
|
}) |
||||
|
} |
||||
|
// 编辑 |
||||
|
else{ |
||||
|
ApiTypePut( |
||||
|
this.formData, |
||||
|
this.formData.id, |
||||
|
this.currentDtos.U.actionsUrl |
||||
|
).then(res => { |
||||
|
this.changeActive(1) |
||||
|
}).catch(err => { |
||||
|
this.changeActive(2) |
||||
|
}) |
||||
|
} |
||||
|
} else { |
||||
|
return false; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 结果页退出 |
||||
|
exitHandle(){ |
||||
|
this.close() |
||||
|
if(this.active == '1')this.oldSkipCount = 1; |
||||
|
this.show = false |
||||
|
this.$emit("exitAfterHandle") |
||||
|
this.$nextTick(()=>{ |
||||
|
this.active = 0 |
||||
|
}) |
||||
|
}, |
||||
|
// 更改页面步骤 |
||||
|
changeActive(sta){ |
||||
|
this.active = sta |
||||
|
this.Loading.addEditApiLoading = false |
||||
|
}, |
||||
|
// 值更改函数 |
||||
|
changeValue(prop,item,val) { |
||||
|
this.$emit("changeValue", prop, item, val) |
||||
|
}, |
||||
|
// 值清除函数 |
||||
|
clearValue(prop,item,val) { |
||||
|
this.$emit("clearValue", prop, item, val) |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
::v-deep .el-dialog__header{ |
||||
|
padding: 0 !important; |
||||
|
} |
||||
|
::v-deep .el-row{ |
||||
|
width: 100%; |
||||
|
} |
||||
|
::v-deep .addEditFrom{ |
||||
|
height: calc(100%); |
||||
|
overflow: auto; |
||||
|
} |
||||
|
::v-deep .el-form-item__label{ |
||||
|
float: unset; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-input,.el-select,.el-input-number{ |
||||
|
width: 100% !important; |
||||
|
} |
||||
|
|
||||
|
.dialog-footer{ |
||||
|
padding-top: 15px; |
||||
|
text-align: right; |
||||
|
} |
||||
|
.centerInnerContent{ |
||||
|
height: calc(100% - 60px); |
||||
|
overflow: auto; |
||||
|
|
||||
|
.leftMainForm{ |
||||
|
height: calc(100% - 60px); |
||||
|
} |
||||
|
|
||||
|
&.hasDetails{ |
||||
|
display: flex; |
||||
|
|
||||
|
.leftMainForm{ |
||||
|
width: 50%; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.rightDetailTable{ |
||||
|
height: calc(100% - 60px); |
||||
|
width: calc(50%); |
||||
|
padding-left:40px; |
||||
|
border-left: #ddd solid 1px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,312 @@ |
|||||
|
<template> |
||||
|
<!-- 组件功能：普通新增编辑（目前只有主表）参数配置从api获取 --> |
||||
|
<el-dialog |
||||
|
:visible.sync="show" |
||||
|
:modal="false" |
||||
|
:modal-append-to-body="false" |
||||
|
:show-close="true" |
||||
|
@close="close" |
||||
|
class="searchPageComponents" |
||||
|
:fullscreen="true" |
||||
|
style="width:calc(100% - 28px);left:14px;top:14px;height:calc(100% - 28px)" |
||||
|
v-loading="Loading.addEditApiLoading" |
||||
|
> |
||||
|
<!-- 表单 --> |
||||
|
<div v-if="active === 0" style="height: 100%;"> |
||||
|
<!-- 标题 --> |
||||
|
<div class="dialogOuterTitle">{{formTitle}}</div> |
||||
|
<!-- 表单 --> |
||||
|
<el-form |
||||
|
class="addEditFrom" |
||||
|
ref="addEditFrom_Ref" |
||||
|
v-if="formData" |
||||
|
:model="formData" |
||||
|
:rules="formRules" |
||||
|
> |
||||
|
<el-row :gutter="40"> |
||||
|
<el-col |
||||
|
:span="item.colSpan || 12" |
||||
|
v-for="(item, index) in formItemData" |
||||
|
:key="index" |
||||
|
> |
||||
|
<el-form-item |
||||
|
:label="item.label" |
||||
|
:prop="item.prop" |
||||
|
> |
||||
|
<!-- 数值 --> |
||||
|
<el-input-number |
||||
|
v-if="item.apiBaseType === 'number'" |
||||
|
v-model="formData[item.prop]" |
||||
|
:min="item.minimum || undefined" |
||||
|
:max="item.maximum || undefined" |
||||
|
:maxlength="item.maxLength || undefined" |
||||
|
:minlength="item.minLength || undefined" |
||||
|
:disabled="Boolean(item.disabled)" |
||||
|
:placeholder="item.placeholder || '请输入' + item.label" |
||||
|
@change="changeValue(item.prop,item,$event)" |
||||
|
@clear="clearValue(item.prop,$event)" |
||||
|
></el-input-number> |
||||
|
|
||||
|
<!-- 时间转换 --> |
||||
|
<el-date-picker |
||||
|
v-else-if="item.apiBaseType === 'datetime'" |
||||
|
v-model="formData[item.prop]" |
||||
|
type="datetime" |
||||
|
placeholder="选择日期时间" |
||||
|
format="yyyy-MM-dd HH:mm:ss" |
||||
|
value-format="yyyy-MM-ddTHH:mm:ss" |
||||
|
:disabled="Boolean(item.disabled)" |
||||
|
></el-date-picker> |
||||
|
|
||||
|
<!-- 布尔、枚举 --> |
||||
|
<el-select |
||||
|
v-else-if="item.isEnums || item.apiBaseType === 'boolean'" |
||||
|
v-model="formData[item.prop]" |
||||
|
:placeholder="item.placeholder || '请选择' + item.label" |
||||
|
:disabled="Boolean(item.disabled)" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in getItemEnums(item)" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
></el-option> |
||||
|
</el-select> |
||||
|
|
||||
|
<!-- 文本框 --> |
||||
|
<!-- <el-input |
||||
|
v-else |
||||
|
type="textarea" |
||||
|
autosize |
||||
|
resize="none" |
||||
|
v-model="formData[item.prop]" |
||||
|
:placeholder="item.placeholder || '请输入' + item.label" |
||||
|
:disabled="Boolean(item.disabled)" |
||||
|
></el-input> --> |
||||
|
<el-input |
||||
|
v-else |
||||
|
v-model="formData[item.prop]" |
||||
|
:placeholder="item.placeholder || '请输入' + item.label" |
||||
|
:disabled="Boolean(item.disabled)" |
||||
|
></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
<!-- 操作按钮 --> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="show = false">取 消</el-button> |
||||
|
<el-button type="primary" @click="submitHandle()">确 定</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- 成功提示 --> |
||||
|
<div v-if="active === 1"> |
||||
|
<el-result icon="success" title="成功提示" :subTitle="formTitle + '成功'"> |
||||
|
<template slot="extra"> |
||||
|
<el-button type="primary" size="medium" @click="exitHandle" |
||||
|
>退出</el-button |
||||
|
> |
||||
|
</template> |
||||
|
</el-result> |
||||
|
</div> |
||||
|
<!-- 错误提示 --> |
||||
|
<div v-if="active === 2"> |
||||
|
<el-result icon="error" title="错误提示" :subTitle="formTitle + '失败'"> |
||||
|
<template slot="extra"> |
||||
|
<el-button type="primary" size="medium" @click="changeActive(0)" |
||||
|
>返回</el-button |
||||
|
> |
||||
|
<el-button type="primary" size="medium" @click="exitHandle" |
||||
|
>退出</el-button |
||||
|
> |
||||
|
</template> |
||||
|
</el-result> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { ApiTypePost, ApiTypePut } from "@/api/wms-api" |
||||
|
import { LoadingMixins } from "@/mixins/LoadingMixins"; |
||||
|
import { tableMixins } from "@/mixins/TableMixins" |
||||
|
export default { |
||||
|
name:"addEditFromApiPop", |
||||
|
mixins:[ LoadingMixins,tableMixins ], |
||||
|
props: { |
||||
|
// 编辑行数据 |
||||
|
editRowData:{ |
||||
|
type: Object, |
||||
|
default: null |
||||
|
}, |
||||
|
// 操作类型：add/edit |
||||
|
handleType:{ |
||||
|
type: String, |
||||
|
default: null |
||||
|
}, |
||||
|
// 提交事件 |
||||
|
submitForm:{ |
||||
|
type:Function, |
||||
|
default:null |
||||
|
}, |
||||
|
// 特殊的【新增】接口，如果没有就走路由下的配置文件 |
||||
|
addSubmitUrl:{ |
||||
|
type: String, |
||||
|
default: null |
||||
|
}, |
||||
|
// 特殊的【编辑】接口，如果没有就走路由下的配置文件 |
||||
|
editSubmitUrl:{ |
||||
|
type: String, |
||||
|
default: null |
||||
|
} |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
currentDtos:this.$store.getters.dtoColumnTypes[this.$route.name], |
||||
|
active:0,//显示内容：0表单 1成功 2失败 |
||||
|
show:true, |
||||
|
formTitle:null,//form名称 |
||||
|
formData:{},//表单数据 |
||||
|
formItemData:null,//表单item配置 |
||||
|
formRules: {},//表单验证 |
||||
|
} |
||||
|
}, |
||||
|
mounted(){ |
||||
|
this.initTitle() |
||||
|
this.initFormItems() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 初始化form名称 |
||||
|
initTitle(){ |
||||
|
if(this.handleType){ |
||||
|
this.formTitle = this.handleType == 'add' ? '新增'+this.$route.name : '编辑'+this.$route.name |
||||
|
} |
||||
|
}, |
||||
|
// 初始化表单配置、rules |
||||
|
initFormItems(){ |
||||
|
let _dtoList_type = this.handleType == 'add' ? 'C' : 'U' |
||||
|
let _dtoList = this.currentDtos[_dtoList_type].dtoList |
||||
|
this.formItemData = JSON.parse(JSON.stringify(_dtoList)) |
||||
|
// 编辑格式：特殊处理默认值 |
||||
|
if(this.handleType == 'edit' && this.editRowData){ |
||||
|
this.formData = JSON.parse(JSON.stringify(this.editRowData)) |
||||
|
}else{ |
||||
|
this.formData = {} |
||||
|
} |
||||
|
// 表单验证格式化 |
||||
|
this.formRules={} |
||||
|
_dtoList.forEach(item=>{ |
||||
|
if(item.isRequired){ |
||||
|
this.formRules[item.prop] = [{ required: true, trigger: "blur", message: "不可为空" }] |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 获取枚举、布尔 |
||||
|
getItemEnums(item){ |
||||
|
let _option = [] |
||||
|
// 布尔 |
||||
|
if(item.apiBaseType == 'boolean'){ |
||||
|
_option = [{ |
||||
|
value: true, |
||||
|
label: '是' |
||||
|
},{ |
||||
|
value: false, |
||||
|
label: '否' |
||||
|
},] |
||||
|
} |
||||
|
if(item.isEnums){ |
||||
|
_option = item.enums_list |
||||
|
} |
||||
|
return _option |
||||
|
}, |
||||
|
// 关闭弹窗 |
||||
|
close() { |
||||
|
this.show = false |
||||
|
this.$emit("closePop") |
||||
|
}, |
||||
|
// 提交表单 |
||||
|
submitHandle(){ |
||||
|
this.$refs.addEditFrom_Ref.validate((valid) => { |
||||
|
if(this.submitForm){ |
||||
|
this.submitForm(valid,this.formData,this.handleType,this.formItemData,this.formRules) |
||||
|
return |
||||
|
} |
||||
|
this.Loading.addEditApiLoading = true |
||||
|
if (valid) { |
||||
|
// 新增 |
||||
|
if(this.handleType == 'add'){ |
||||
|
ApiTypePost( |
||||
|
this.formData, |
||||
|
this.currentDtos.C.actionsUrl |
||||
|
).then(res => { |
||||
|
this.changeActive(1) |
||||
|
}).catch(err => { |
||||
|
this.changeActive(2) |
||||
|
}) |
||||
|
} |
||||
|
// 编辑 |
||||
|
else{ |
||||
|
ApiTypePut( |
||||
|
this.formData, |
||||
|
this.formData.id, |
||||
|
this.currentDtos.U.actionsUrl |
||||
|
).then(res => { |
||||
|
this.changeActive(1) |
||||
|
}).catch(err => { |
||||
|
this.changeActive(2) |
||||
|
}) |
||||
|
} |
||||
|
} else { |
||||
|
return false; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 结果页退出 |
||||
|
exitHandle(){ |
||||
|
this.close() |
||||
|
if(this.active == '1')this.oldSkipCount = 1; |
||||
|
this.show = false |
||||
|
this.paging() |
||||
|
this.$nextTick(()=>{ |
||||
|
this.active = 0 |
||||
|
}) |
||||
|
}, |
||||
|
// 更改页面步骤 |
||||
|
changeActive(sta){ |
||||
|
this.active = sta |
||||
|
this.Loading.addEditApiLoading = false |
||||
|
}, |
||||
|
// 值更改函数 |
||||
|
changeValue(prop,item,val) { |
||||
|
this.$emit("changeValue", prop, item, val) |
||||
|
}, |
||||
|
// 值清除函数 |
||||
|
clearValue(prop,item,val) { |
||||
|
this.$emit("clearValue", prop, item, val) |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
::v-deep .el-dialog__header{ |
||||
|
padding: 0 !important; |
||||
|
} |
||||
|
::v-deep .el-row{ |
||||
|
width: 100%; |
||||
|
} |
||||
|
::v-deep .addEditFrom{ |
||||
|
height: calc(100% - 120px); |
||||
|
overflow: auto; |
||||
|
} |
||||
|
::v-deep .el-form-item__label{ |
||||
|
float: unset; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-input,.el-select,.el-input-number{ |
||||
|
width: 100% !important; |
||||
|
} |
||||
|
|
||||
|
.dialog-footer{ |
||||
|
padding-top: 15px; |
||||
|
text-align: right; |
||||
|
} |
||||
|
</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,634 @@ |
|||||
|
<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="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> |
||||
|
<!-- 明细 包含分页 头部按钮等 --> |
||||
|
<tablePagination |
||||
|
ref="tablePaginationForMX_Ref" |
||||
|
v-if="scope.value == 'mx'" |
||||
|
:currenButtonData="detailHeaderButton" |
||||
|
:tableData="propsData.details" |
||||
|
:tableColumns="tableColumns" |
||||
|
:setUTableHeight="showDetailColumnsSet || showDetailFilters ? 220 : 180" |
||||
|
@rowDrop="rowDrop" |
||||
|
:searchOverallCoverHeight="'calc(100vh - 345px)'" |
||||
|
:rowSource="'detail_api'" |
||||
|
:selectMaxHeight="'116px'" |
||||
|
:rowMaxHeight="rowMaxHeight" |
||||
|
:totalCount="totalCountForDetail" |
||||
|
:MaxResultCount="MaxResultCount" |
||||
|
@sortChange="sortChangeForDetail" |
||||
|
@alertoldSkipCount="alertoldSkipCountForDetail" |
||||
|
@alterResultCount="alterResultCountForDetail" |
||||
|
@handleSelectionChange="handleSelectionChange" |
||||
|
:currentPageProps="oldSkipCount" |
||||
|
@overallSearchFormClick="overallSearchClickForDetail" |
||||
|
:httpOverallSearchData="httpOverallSearchData" |
||||
|
@buttonOperationClick_left="buttonOperationClick_left" |
||||
|
:buttonOperationList_left="buttonOperationList_left" |
||||
|
:tableLoading="Loading.tableLoading" |
||||
|
></tablePagination> |
||||
|
<!-- 新增汇总 表头 区分明细表头使用 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> |
||||
|
</template> |
||||
|
</curren-tabs> |
||||
|
</div> |
||||
|
<div class="drawer-Shut" @click="drawerShut"> |
||||
|
<el-button type="danger" size="mini">关闭</el-button> |
||||
|
</div> |
||||
|
<!-- 明细-查看详情 --> |
||||
|
<el-dialog |
||||
|
width="90%" |
||||
|
:modal-append-to-body="false" |
||||
|
:append-to-body="false" |
||||
|
:title="detailInfoTitle" |
||||
|
:visible.sync="displayDialog.detailInfoDialog" |
||||
|
:show-close="true" |
||||
|
:close-on-click-modal="true" |
||||
|
:close-on-press-escape="true" |
||||
|
> |
||||
|
<div> |
||||
|
<curren-descriptions |
||||
|
v-if="detailInfoTableData" |
||||
|
border |
||||
|
:column="column" |
||||
|
:direction="direction" |
||||
|
:colon="false" |
||||
|
:tabsDesTions="tableColumns" |
||||
|
:propsData="detailInfoTableData" |
||||
|
style="padding-bottom: 20px;" |
||||
|
></curren-descriptions> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</el-drawer> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { getPageListForDetail } from "@/api/wms-api" |
||||
|
import searchOverall from "@/components/searchOverall" |
||||
|
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" |
||||
|
import rowDrop from "@/components/rowDrop/index.vue" |
||||
|
import * as allUrlOption from '@/utils/baseData/urlOption' |
||||
|
import { LoadingMixins } from "@/mixins/LoadingMixins"; |
||||
|
export default { |
||||
|
name: 'currenTabel-drawer', |
||||
|
components: { |
||||
|
pagination, |
||||
|
currenButton, |
||||
|
currenDescriptions, |
||||
|
currenTabs, |
||||
|
currenTable, |
||||
|
searchOverall, |
||||
|
rowDrop |
||||
|
}, |
||||
|
mixins: [ |
||||
|
LoadingMixins, |
||||
|
], |
||||
|
props: { |
||||
|
rowMaxHeight:{ |
||||
|
type:String, |
||||
|
default:'calc(90vh - 450px)' |
||||
|
}, |
||||
|
// 操作列按钮 |
||||
|
buttonOperationList_left:{ |
||||
|
type: Array, |
||||
|
default: null, |
||||
|
}, |
||||
|
// 是否显示明细-字段设置 |
||||
|
showDetailColumnsSet:{ |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
// 是否显示明细-筛选 |
||||
|
showDetailFilters:{ |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
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) { |
||||
|
if (Object.keys(this.propsData)) { |
||||
|
this.initDropdownTabsData = [{ |
||||
|
label: "详情", |
||||
|
name: 'xq' |
||||
|
}] |
||||
|
// 明细可以为空数组，前端分页使用 |
||||
|
if(this.propsData.details){ |
||||
|
this.initDropdownTabsData.push({ |
||||
|
label: "明细", |
||||
|
name: 'mx' |
||||
|
}) |
||||
|
} |
||||
|
if(this.propsData.summaryDetails && this.propsData.summaryDetails.length > 0){ |
||||
|
this.initDropdownTabsData.push({ |
||||
|
label: "汇总", |
||||
|
name: 'hz' |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
return this.initDropdownTabsData |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
mounted () { |
||||
|
this.initDetailHeaderButton() |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
detailHeaderButton:null,//明细-上方按钮 |
||||
|
detailInfoTableData:null,//明细-查看详情弹窗数据 |
||||
|
detailInfoTitle:null,//明细-查看详情弹窗title |
||||
|
otherData:[], // 切换tabs页赋值 |
||||
|
zdyTableColumns:[], // 自定义表头 |
||||
|
zdyValue:'', // 自定义展现值 |
||||
|
// firstTabs:'xq', |
||||
|
initDropdownTabsData:[ |
||||
|
{ |
||||
|
label: "详情", |
||||
|
name: 'xq' |
||||
|
}, |
||||
|
{ |
||||
|
label: "明细", |
||||
|
name: 'mx' |
||||
|
}, |
||||
|
{ |
||||
|
label: "汇总", |
||||
|
name: 'hz' |
||||
|
} |
||||
|
], |
||||
|
//明细列表- 改变当前页 |
||||
|
oldSkipCount: 1, |
||||
|
// 明细列表- 全面搜索：当前列表数据请求接口的筛选条件 |
||||
|
httpOverallSearchData:null, |
||||
|
//明细列表- 分页参数 |
||||
|
PageListParams: { |
||||
|
condition: { |
||||
|
filters: [] |
||||
|
}, |
||||
|
Sorting: "", |
||||
|
SkipCount: 0, |
||||
|
MaxResultCount: 20, |
||||
|
}, |
||||
|
totalCountForDetail:0, |
||||
|
//明细-查看主表的连接id |
||||
|
URLOption_masterId:allUrlOption[this.$route.name].masterId || 'masterId', |
||||
|
//明细-列表 |
||||
|
URLOption_detailList:allUrlOption[this.$route.name].detailListURL, |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
// 明细列表 - 获取明细列表（后端分页） |
||||
|
getDetailList(data,successFn,errorFn){ |
||||
|
if(data)this.PageListParams.condition.filters = [] |
||||
|
// 获取明细分页信息 |
||||
|
let _hasId = false |
||||
|
this.PageListParams.condition.filters.forEach(item=>{ |
||||
|
if(item.column == this.URLOption_masterId){ |
||||
|
_hasId = true |
||||
|
} |
||||
|
}) |
||||
|
if(!_hasId || data){ |
||||
|
this.PageListParams.condition.filters.push({ |
||||
|
logic: "And", |
||||
|
column: this.URLOption_masterId, |
||||
|
action: "==", |
||||
|
value: data ? data.id : this.propsData.id |
||||
|
}) |
||||
|
} |
||||
|
this.PageListParams.SkipCount = (this.oldSkipCount - 1) * this.PageListParams.MaxResultCount |
||||
|
this.Loading.tableLoading = true |
||||
|
getPageListForDetail(this.PageListParams,this.URLOption_detailList) |
||||
|
.then(result => { |
||||
|
this.propsData.details = result.items |
||||
|
this.totalCountForDetail = result.totalCount |
||||
|
this.Loading.tableLoading = false |
||||
|
if(successFn)successFn() |
||||
|
}) |
||||
|
.catch(err => { |
||||
|
this.Loading.tableLoading = false |
||||
|
if(errorFn)errorFn() |
||||
|
this.$message.error("数据获取失败") |
||||
|
}) |
||||
|
}, |
||||
|
// 明细列表 - 全面筛选组件查询 |
||||
|
overallSearchForDetailHandle(options){ |
||||
|
let _data_primary = options.data_primary, |
||||
|
_data_moreList = options.data_moreList, |
||||
|
_option_primary = options.option_primary, |
||||
|
_vm_quickly = options.vm_quickly, |
||||
|
_vm_moreList = options.vm_moreList |
||||
|
|
||||
|
//普通筛选数据集合 |
||||
|
let _primary_filters = [] |
||||
|
_option_primary.forEach(item=>{ |
||||
|
if(_data_primary[item.prop] && String(_data_primary[item.prop]).length > 0){ |
||||
|
let _item = { |
||||
|
action:item.action || '==', |
||||
|
column:item.prop, |
||||
|
logic:'And', |
||||
|
value:String(_data_primary[item.prop]) |
||||
|
} |
||||
|
_primary_filters.push(_item) |
||||
|
} |
||||
|
}) |
||||
|
//高级筛选数据集合 |
||||
|
let _moreList_filters = [] |
||||
|
_data_moreList.filters.forEach(item=>{ |
||||
|
if(String(item.column).length > 0 && String(item.value).length > 0){ |
||||
|
_moreList_filters.push(item) |
||||
|
} |
||||
|
}) |
||||
|
// 全部筛选数据集合 |
||||
|
let _all_filters = [] |
||||
|
_all_filters = _primary_filters.concat(_moreList_filters) |
||||
|
// 调用接口数据配置 |
||||
|
this.oldSkipCount = 1 |
||||
|
this.Loading.tableLoading = true; |
||||
|
this.PageListParams.SkipCount = (this.oldSkipCount - 1) * this.PageListParams.MaxResultCount; |
||||
|
this.PageListParams.condition = {filters:_all_filters} |
||||
|
this.getDetailList(null,()=>{ |
||||
|
//快速搜索清空 |
||||
|
if(_vm_quickly){_vm_quickly.searchNormalClear(true)} |
||||
|
//关闭高级筛选 |
||||
|
if(_vm_moreList){_vm_moreList.changeMoreListShow(false)} |
||||
|
// 同步当前列表数据请求接口的筛选条件 |
||||
|
this.httpOverallSearchData = {} |
||||
|
this.httpOverallSearchData.params = JSON.parse(JSON.stringify(_data_primary)) |
||||
|
this.httpOverallSearchData.moreList = JSON.parse(JSON.stringify(_data_moreList)) |
||||
|
},()=>{ |
||||
|
//快速搜索清空 |
||||
|
if(_vm_quickly){_vm_quickly.searchNormalClear(true)} |
||||
|
//关闭高级筛选 |
||||
|
if(_vm_moreList){_vm_moreList.changeMoreListShow(false)} |
||||
|
}) |
||||
|
}, |
||||
|
// 明细列表 - 全面筛选所有按钮操作集 |
||||
|
overallSearchClickForDetail(options){ |
||||
|
let _item = options.item; |
||||
|
// 普通搜索 + 高级搜索 + 普通重置 + 高级重置 |
||||
|
if( |
||||
|
_item.name == 'search' || _item.name == 'moreList-search' || |
||||
|
_item.name == 'reset' || _item.name == 'moreList-reset' |
||||
|
){ |
||||
|
this.overallSearchForDetailHandle(options) |
||||
|
} |
||||
|
}, |
||||
|
// 明细列表 -接收分页组件emit改变当前页 |
||||
|
alertoldSkipCountForDetail(val) { |
||||
|
this.oldSkipCount = val; |
||||
|
this.getDetailList(); |
||||
|
}, |
||||
|
// 明细列表 -接收分页组件emit改变每页最大页数 |
||||
|
alterResultCountForDetail(val) { |
||||
|
this.PageListParams.MaxResultCount = val; |
||||
|
this.getDetailList(); |
||||
|
}, |
||||
|
// 明细列表 - 排序查询 |
||||
|
sortChangeForDetail(val) { |
||||
|
const { |
||||
|
prop, |
||||
|
order |
||||
|
} = val; |
||||
|
if (!prop || !order) { |
||||
|
this.PageListParams.Sorting = ""; |
||||
|
this.oldSkipCount = 1; |
||||
|
this.getDetailList(); |
||||
|
return; |
||||
|
} |
||||
|
let orderdata = order.substr(0, order.indexOf("c") + 1); |
||||
|
const props = prop.charAt(0).toUpperCase() + prop.slice(1) |
||||
|
this.PageListParams.Sorting = props + " " + orderdata.toUpperCase(); |
||||
|
this.oldSkipCount = 1; |
||||
|
this.getDetailList(); |
||||
|
}, |
||||
|
// 初始化明细-上方按钮 |
||||
|
initDetailHeaderButton(){ |
||||
|
this.detailHeaderButton = [] |
||||
|
if(this.showDetailColumnsSet){this.detailHeaderButton.push(this.defaultFieldSettingBtn())} |
||||
|
if(this.showDetailFilters){this.detailHeaderButton.push(this.defaultFilterBtn())} |
||||
|
}, |
||||
|
// 关闭明细-详情弹窗 |
||||
|
closeDetailInfo(val){ |
||||
|
this.displayDialog.detailInfoDialog = val || false |
||||
|
}, |
||||
|
// 明细-操作列事件 |
||||
|
buttonOperationClick_left(row, item, index){ |
||||
|
// 查看详情 |
||||
|
if(item.name == "info"){ |
||||
|
this.displayDialog.detailInfoDialog = true |
||||
|
this.detailInfoTableData = row |
||||
|
let _name = allUrlOption[this.$route.name].detailInfoName |
||||
|
this.detailInfoTitle = _name ? row[_name] + ' 详情' : '详情' |
||||
|
} |
||||
|
this.$emit('buttonOperationClick_left',row, item, index) |
||||
|
}, |
||||
|
rowDrop(data,type) { |
||||
|
this.$emit('rowDrop',data,type) |
||||
|
}, |
||||
|
handleCommand (command) { |
||||
|
this.$emit('handleCommand', command) |
||||
|
}, |
||||
|
drawerShut () { |
||||
|
this.closeDetailInfo(false) |
||||
|
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); |
||||
|
}, |
||||
|
// 重新渲染表格 |
||||
|
doFreshTableLayout(){ |
||||
|
this.$nextTick(() => { |
||||
|
if(this.$refs.tablePaginationForMX_Ref && this.$refs.tablePaginationForMX_Ref.doFreshTableLayout){ |
||||
|
this.$refs.tablePaginationForMX_Ref.doFreshTableLayout() |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 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 == "customerDismantleBackFlushNote"){ |
||||
|
// let zdyTableColumnsJSON = JSON.parse(JSON.stringify(this.$isTableColumns[item.tableColumns])); |
||||
|
// delete zdyTableColumnsJSON[0].type |
||||
|
// this.zdyTableColumns = zdyTableColumnsJSON |
||||
|
// this.otherData = this.propsData.noteAndBackFlushDetails |
||||
|
// } |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
this.doFreshTableLayout() |
||||
|
}, |
||||
|
// 递归 子级层级 |
||||
|
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,66 @@ |
|||||
|
<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)" |
||||
|
v-permission="item.permission || []" |
||||
|
>{{ 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> |
||||
|
<style lang="scss" scoped> |
||||
|
.el-button{ |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,181 @@ |
|||||
|
<template> |
||||
|
<el-descriptions |
||||
|
class="currenDescriptionsPage" |
||||
|
: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/formatTime" |
||||
|
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> |
||||
|
<style lang="scss"> |
||||
|
.currenDescriptionsPage{ |
||||
|
th{ |
||||
|
min-width: 200px !important; |
||||
|
width: auto; |
||||
|
} |
||||
|
td{ |
||||
|
span{ |
||||
|
display: inline-block; |
||||
|
max-height: 150px; |
||||
|
overflow: auto; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,174 @@ |
|||||
|
<template> |
||||
|
<el-descriptions |
||||
|
class="currenDescriptionsPage" |
||||
|
: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.apiBaseType && item.apiBaseType == 'datetime'">{{ |
||||
|
propsData[item.prop] | formatDate |
||||
|
}}</span> |
||||
|
<!-- 枚举 --> |
||||
|
<span v-else-if="item.isEnums"> |
||||
|
{{ initApiEnumList(item,propsData[item.prop]) }} |
||||
|
</span> |
||||
|
<!-- 布尔 --> |
||||
|
<span v-else-if="item.apiBaseType == 'boolean'"> |
||||
|
{{ propsData[item.prop] ? '是' : '否' }} |
||||
|
</span> |
||||
|
<!-- 数值 --> |
||||
|
<span v-else-if="item.apiBaseType == 'number'"> |
||||
|
{{ propsData[item.prop] }} |
||||
|
</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/formatTime" |
||||
|
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 {} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
methods:{ |
||||
|
// 转义枚举值 |
||||
|
initApiEnumList(item,data){ |
||||
|
let _item_enumList = {} |
||||
|
if(item.enums_list){ |
||||
|
item.enums_list.forEach((item,key)=>{ |
||||
|
_item_enumList[item.value] = item.label |
||||
|
}) |
||||
|
} |
||||
|
return _item_enumList[data] || '未定义' |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss"> |
||||
|
.currenDescriptionsPage{ |
||||
|
th{ |
||||
|
min-width: 200px !important; |
||||
|
width: auto; |
||||
|
} |
||||
|
td{ |
||||
|
span{ |
||||
|
display: inline-block; |
||||
|
max-height: 150px; |
||||
|
overflow: auto; |
||||
|
min-width: 200px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -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) || |
||||
|
item.userOptions" |
||||
|
: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,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) || |
||||
|
item.userOptions" |
||||
|
: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,322 @@ |
|||||
|
<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】 --> |
||||
|
<umyTable |
||||
|
:isEditable="isEditable" |
||||
|
class="flexTable" |
||||
|
:tableData="flexTableData" |
||||
|
:searchOptions="flexSearchOptions" |
||||
|
:tableColumns="flexTableColumns" |
||||
|
:selectionTable="selectionTable" |
||||
|
:isShowIndex="isShowIndex" |
||||
|
:setUTableHeight="setUTableHeight" |
||||
|
@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> |
||||
|
</umyTable> |
||||
|
</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: { |
||||
|
// table内表单数据是否可编辑 |
||||
|
isEditable:{ |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
// 已app-main高度为100% 需要减掉的高度 |
||||
|
setUTableHeight: { |
||||
|
type: Number, |
||||
|
default: () => { |
||||
|
return 280; |
||||
|
} |
||||
|
}, |
||||
|
// 是否显示添加一行按钮 |
||||
|
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,89 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<el-dialog |
||||
|
title="导出" |
||||
|
:visible.sync="show" |
||||
|
:append-to-body="true" |
||||
|
:modal-append-to-body="false" |
||||
|
width="800px" |
||||
|
:show-close="true" |
||||
|
@close="close" |
||||
|
> |
||||
|
<div class="formItem"> |
||||
|
<span class="title">是否显示明细：</span> |
||||
|
<el-radio-group v-model="form.isDetail" > |
||||
|
<el-radio :label="true">是</el-radio> |
||||
|
<el-radio :label="false">否</el-radio> |
||||
|
</el-radio-group> |
||||
|
</div> |
||||
|
<div class="formItem"> |
||||
|
<span class="title">是否冗余主表数据：</span> |
||||
|
<el-radio-group v-model="form.isRedundance" > |
||||
|
<el-radio :label="true">是</el-radio> |
||||
|
<el-radio :label="false">否</el-radio> |
||||
|
</el-radio-group> |
||||
|
</div> |
||||
|
<span slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="submit('page')">本页导出</el-button> |
||||
|
<el-button |
||||
|
:spinner="'el-icon-loading'" |
||||
|
type="primary" |
||||
|
@click="submit('all')" |
||||
|
>全部导出</el-button> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'exportDrop', |
||||
|
props: { |
||||
|
// 导出是【否冗余主表数据】配置 |
||||
|
isDetail:{ |
||||
|
type: Boolean, |
||||
|
default: true, |
||||
|
}, |
||||
|
// 导出是【显示明细】配置 |
||||
|
isRedundance:{ |
||||
|
type: Boolean, |
||||
|
default: true, |
||||
|
}, |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
show:true, |
||||
|
form:{ |
||||
|
isDetail:null, |
||||
|
isRedundance:null, |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted () { |
||||
|
this.form={ |
||||
|
isDetail:this.isDetail, |
||||
|
isRedundance:this.isRedundance, |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
close() { |
||||
|
this.show = false |
||||
|
this.$emit("closeDialog") |
||||
|
}, |
||||
|
submit(type){ |
||||
|
this.$emit("exportDropSubmit",type,this.form) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.formItem{ |
||||
|
padding-bottom: 15px; |
||||
|
display: flex; |
||||
|
.title{ |
||||
|
width: 180px; |
||||
|
text-align: right; |
||||
|
padding-right: 10px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,338 @@ |
|||||
|
<template> |
||||
|
<div class="filterForDetailPage" v-if="dialogShow"> |
||||
|
<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)" |
||||
|
class="mainTable-dialog" |
||||
|
> |
||||
|
<div |
||||
|
class="filterForDetailPage-list" |
||||
|
v-loading="Loading.tableLoading" |
||||
|
> |
||||
|
<!-- 列表 --> |
||||
|
<tablePagination |
||||
|
v-if="dialogShow && listColumns && listColumns.length > 0" |
||||
|
:currenButtonData="currenButtonData" |
||||
|
:tableData="tableData" |
||||
|
:tableLoading="Loading.tableLoading" |
||||
|
@rowDrop="rowDropForDetail" |
||||
|
:rowSource="'detailPage_api'" |
||||
|
:searchOverallCoverHeight="'calc(100vh - 380px)'" |
||||
|
:rowMaxHeight="rowMaxHeight" |
||||
|
:tableColumns="listColumns" |
||||
|
:totalCount="totalCount" |
||||
|
:multipleSelection="multipleSelection" |
||||
|
:MaxResultCount="PageListParams.MaxResultCount" |
||||
|
:setUTableHeight="setUTableHeight" |
||||
|
:selectMaxHeight="'116px'" |
||||
|
@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" |
||||
|
fixed="left" |
||||
|
> |
||||
|
<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" |
||||
|
:close-on-click-modal="true" |
||||
|
:close-on-press-escape="true" |
||||
|
:show-close="true" |
||||
|
width="70%" |
||||
|
> |
||||
|
<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 {getListDesById,getPageListForDetail} from "@/api/wms-api" |
||||
|
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: false, |
||||
|
}, |
||||
|
// 删除api |
||||
|
DeleteApi: { |
||||
|
type: String, |
||||
|
default: null |
||||
|
}, |
||||
|
// 主表数据-表头 |
||||
|
parentColumns:{ |
||||
|
type: Array, |
||||
|
default: null |
||||
|
}, |
||||
|
showHandleButtons:{ |
||||
|
type:Array, |
||||
|
default:() => { |
||||
|
//'add','edit'暂未处理操作 'delete'暂时隐藏 |
||||
|
// showParent查看主表信息，fresh刷新，filter筛选，field字段设置 |
||||
|
return ['showParent','fresh','filter','field']; |
||||
|
} |
||||
|
}, |
||||
|
// 父级展现列数，默认为2列展现 |
||||
|
column: { |
||||
|
type: Number, |
||||
|
default: 2 |
||||
|
}, |
||||
|
// 父级展示方式，默认水平分布 |
||||
|
direction: { |
||||
|
type: String, |
||||
|
default: 'horizontal' |
||||
|
}, |
||||
|
rowMaxHeight:{ |
||||
|
type:String, |
||||
|
default:'calc(90vh - 450px)' |
||||
|
}, |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
dialogShow:true, |
||||
|
// URLOption_detailList:allUrlOption[this.$route.name].detailListURL,//明细-列表 |
||||
|
// URLOption_masterId:allUrlOption[this.$route.name].masterId || 'masterId',//明细-查看主表的连接id |
||||
|
// URLOption_masterName:allUrlOption[this.$route.name].masterName,//明细-列表//明细-查看主表的连接title名称 |
||||
|
// 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,//显示父级数据弹窗-加载 |
||||
|
listColumns:[],//表头数据 |
||||
|
} |
||||
|
}, |
||||
|
activated(){ |
||||
|
// 解决切换页面的时候，遮罩层消失的问题 |
||||
|
this.dialogShow = false |
||||
|
this.$nextTick(() => { |
||||
|
this.dialogShow = true |
||||
|
}); |
||||
|
}, |
||||
|
mounted(){ |
||||
|
this.paging() |
||||
|
this.initHandleButtons() |
||||
|
}, |
||||
|
methods: { |
||||
|
rowDropForDetail(data,type){ |
||||
|
this.listColumns = data |
||||
|
this.$emit("rowDropForDetail", data,type) |
||||
|
}, |
||||
|
// 初始化显示按钮 |
||||
|
initHandleButtons(){ |
||||
|
// 头部按钮 |
||||
|
let _arr_header = [] |
||||
|
if(this.showHandleButtons.indexOf('add') >= 0){_arr_header.push(this.defaultAddBtn())} |
||||
|
if(this.showHandleButtons.indexOf('field') >= 0){_arr_header.push(this.defaultFieldSettingBtn())} |
||||
|
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) |
||||
|
.then(res=>{ |
||||
|
// 表头处理 |
||||
|
let _parentName = this.URLOption_detailList.substr(0,this.URLOption_detailList.indexOf('/')) |
||||
|
let _Columns = this.initApiColumnsForDto(res.items[0],_parentName) |
||||
|
this.listColumns = this.initTableColumns(_Columns,'detailPage_api') |
||||
|
// 页面数据处理 |
||||
|
if(res){ |
||||
|
this.Loading.tableLoading = false |
||||
|
this.tableData = [] |
||||
|
res.items.forEach(item=>{ |
||||
|
item.deleteTipVisible = false |
||||
|
this.tableData.push(item) |
||||
|
}) |
||||
|
this.totalCount = res.totalCount |
||||
|
} |
||||
|
this.pagingCallback(callback) |
||||
|
}) |
||||
|
.catch(err=>{ |
||||
|
this.Loading.tableLoading = false |
||||
|
this.$message.error("数据获取失败") |
||||
|
}) |
||||
|
}, |
||||
|
// 查看主表信息 |
||||
|
showParentHandleForDetail(data){ |
||||
|
this.showParentTitle = `${data[this.URLOption_masterName] || ''} 主表信息` |
||||
|
this.showParentDialog = true |
||||
|
this.showParentLoading = true |
||||
|
getListDesById(this.URLOption_parent,data[this.URLOption_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 { |
||||
|
|
||||
|
.mainTable-dialog{ |
||||
|
.el-dialog{ |
||||
|
height: calc(100% - 100px); |
||||
|
} |
||||
|
} |
||||
|
.el-dialog__body{ |
||||
|
min-height: 200px; |
||||
|
padding-bottom: 20px !important; |
||||
|
} |
||||
|
} |
||||
|
.filterForDetailPage-list{ |
||||
|
height: calc(100%); |
||||
|
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,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,278 @@ |
|||||
|
<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; |
||||
|
} |
||||
|
::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,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> |
||||
@ -0,0 +1,43 @@ |
|||||
|
<template> |
||||
|
<div class="resultStatusComponents"> |
||||
|
<!-- // todo-An icon插槽组件化 --> |
||||
|
<el-result |
||||
|
:icon="status" |
||||
|
:title="title" |
||||
|
:subTitle="subTitle" |
||||
|
> |
||||
|
<template slot="extra"> |
||||
|
<slot></slot> |
||||
|
</template> |
||||
|
</el-result> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'resultStatus', |
||||
|
props: { |
||||
|
// 状态 success / warning / info / error |
||||
|
status: { |
||||
|
type: String, |
||||
|
default: 'success' |
||||
|
}, |
||||
|
// 主标题 |
||||
|
title:{ |
||||
|
type: String, |
||||
|
default: '成功' |
||||
|
}, |
||||
|
//次标题 |
||||
|
subTitle:{ |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,265 @@ |
|||||
|
<template> |
||||
|
<el-popover |
||||
|
placement="top" |
||||
|
v-model="visible" |
||||
|
class="rowDropContain rowDropNotHideItem" |
||||
|
width="270" |
||||
|
> |
||||
|
<div class="test_wrapper" @dragover="dragover($event)"> |
||||
|
<div class="text" >字段设置</div> |
||||
|
<el-divider></el-divider> |
||||
|
<!-- 全选 --> |
||||
|
<div class="allSelectContent" @click="redioAllChange()"> |
||||
|
<i class="el-icon-success icon" v-if="allSeletType == 'allSelect'"></i> |
||||
|
<i class="el-icon-remove icon" v-if="allSeletType == 'hasSelect'"></i> |
||||
|
<i class="el-icon-success icon" v-if="allSeletType == 'NoSelect'" style="color:#999" ></i> |
||||
|
全选 |
||||
|
</div> |
||||
|
<transition-group class="transition-wrapper" :style="{maxHeight:innerMaxHeight}" name="sort"> |
||||
|
<div |
||||
|
v-for="(item,index) in dataList" |
||||
|
:key='index+item.label' |
||||
|
class="sort-item" |
||||
|
:draggable="true" |
||||
|
@dragstart="dragstart(item)" |
||||
|
@dragenter="dragenter(item,$event)" |
||||
|
@dragend="dragend(item,$event)" |
||||
|
@dragover="dragover($event)" |
||||
|
> |
||||
|
<svg-icon |
||||
|
class="checkbox-svg" |
||||
|
:class="{'show': dataList[index].istrue}" |
||||
|
@click="rediochange(index)" |
||||
|
:icon-class="dataList[index].istrue ? 'svg_show' : 'svg_hide'" |
||||
|
/> |
||||
|
<div class="lable">{{ item.label }}</div> |
||||
|
</div> |
||||
|
</transition-group> |
||||
|
</div> |
||||
|
<div class="buttonsBox"> |
||||
|
<el-button size="mini" @click="reset">重置</el-button> |
||||
|
<el-button size="mini" @click="close">关闭</el-button> |
||||
|
<!-- <el-button type="primary" size="mini" @click="save">保存</el-button> --> |
||||
|
</div> |
||||
|
</el-popover> |
||||
|
|
||||
|
</template> |
||||
|
<script> |
||||
|
import draggable from "vuedraggable"; |
||||
|
import Sortable from "sortablejs"; |
||||
|
import { getLoginName } from "@/utils/auth" |
||||
|
export default { |
||||
|
components: { |
||||
|
draggable, |
||||
|
Sortable, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
historyTableColumns:null, |
||||
|
name: null, |
||||
|
oldData: null, |
||||
|
newData: null, |
||||
|
dataList: [], |
||||
|
// 全选 allSelect hasSelect NoSelect |
||||
|
allSeletType:'NoSelect', |
||||
|
userName: getLoginName() |
||||
|
} |
||||
|
}, |
||||
|
props: { |
||||
|
innerMaxHeight:{ |
||||
|
type:String, |
||||
|
default:'calc(90vh - 280px)' |
||||
|
}, |
||||
|
visible: { |
||||
|
type: Boolean, |
||||
|
default: () => { |
||||
|
return false |
||||
|
} |
||||
|
}, |
||||
|
tableColumns: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return []; |
||||
|
}, |
||||
|
}, |
||||
|
// list_api detail_api detailPage_api list detail detailPage |
||||
|
source:{ |
||||
|
type:String, |
||||
|
default:'list_api' |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.historyTableColumns = JSON.parse(JSON.stringify(this.tableColumns)) |
||||
|
this.formatData(this.tableColumns) |
||||
|
this.initSelectSta() |
||||
|
}, |
||||
|
methods: { |
||||
|
reset() { |
||||
|
this.$confirm('重置后，字段设置将恢复初始设置，是否继续?', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning', |
||||
|
cancelButtonClass:'rowDropNotHideItem' |
||||
|
}).then(() => { |
||||
|
// 先set是为了字段设置按钮可以监听到缓存变化，之后在移除缓存 |
||||
|
localStorage.setItem('file_Columns_' + this.source + '_' + this.userName + '_' + this.$route.name, JSON.stringify([])) |
||||
|
localStorage.removeItem('file_Columns_' + this.source + '_' +this.userName + '_' + this.$route.name) |
||||
|
// let _resetCol = this.$isTableColumns[this.$route.name] |
||||
|
let _resetCol = this.historyTableColumns |
||||
|
_resetCol.forEach(item => { |
||||
|
item.istrue = true |
||||
|
}) |
||||
|
this.dataList = _resetCol |
||||
|
this.initSelectSta() |
||||
|
this.$emit('radio',_resetCol,this.source) |
||||
|
this.close() |
||||
|
}).catch(() => { |
||||
|
|
||||
|
}); |
||||
|
}, |
||||
|
close() { |
||||
|
this.$emit('closeRowDrop') |
||||
|
}, |
||||
|
// 格式化表头数据 |
||||
|
formatData (val) { |
||||
|
this.dataList = JSON.parse(JSON.stringify(val)) |
||||
|
this.dataList.forEach(item => { |
||||
|
if (item.istrue == undefined) { |
||||
|
item.istrue = true |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
save () { |
||||
|
this.$forceUpdate() |
||||
|
this.$emit('radio',this.dataList,this.source) |
||||
|
// 本地缓存 当前用户名 + 路由名称 |
||||
|
localStorage.setItem('file_Columns_' + this.source + '_' + this.userName + '_' + this.$route.name, JSON.stringify(this.dataList)) |
||||
|
}, |
||||
|
dragstart(value) { |
||||
|
this.oldData = value |
||||
|
}, |
||||
|
// 记录移动过程中信息 |
||||
|
dragenter(value, e) { |
||||
|
this.newData = value |
||||
|
e.preventDefault() |
||||
|
}, |
||||
|
// 拖拽最终操作 |
||||
|
dragend(value, e) { |
||||
|
if (this.oldData !== this.newData) { |
||||
|
let oldIndex = this.dataList.indexOf(this.oldData) |
||||
|
let newIndex = this.dataList.indexOf(this.newData) |
||||
|
let newItems = [...this.dataList] |
||||
|
// 删除老的节点 |
||||
|
newItems.splice(oldIndex, 1) |
||||
|
// 在列表中目标位置增加新的节点 |
||||
|
newItems.splice(newIndex, 0, this.oldData) |
||||
|
this.dataList = [...newItems] |
||||
|
this.save() |
||||
|
} |
||||
|
}, |
||||
|
// 拖动事件（主要是为了拖动时鼠标光标不变为禁止） |
||||
|
dragover(e) { |
||||
|
e.preventDefault() |
||||
|
}, |
||||
|
// item元素点击眼睛事件 |
||||
|
rediochange(index){ |
||||
|
// this.dataList[index].istrue = !this.dataList[index].istrue |
||||
|
this.$set(this.dataList[index],'istrue', !this.dataList[index].istrue) |
||||
|
this.initSelectSta() |
||||
|
this.$nextTick(()=>{ |
||||
|
this.save() |
||||
|
}) |
||||
|
}, |
||||
|
// 初始化当前全选状态 |
||||
|
initSelectSta(){ |
||||
|
let _num = 0 |
||||
|
this.dataList.forEach(item=>{ |
||||
|
if(item.istrue){ |
||||
|
_num ++ |
||||
|
} |
||||
|
}) |
||||
|
if(_num == 0){this.allSeletType = 'NoSelect'} |
||||
|
if(_num == this.dataList.length){this.allSeletType = 'allSelect'} |
||||
|
if(_num > 0 && _num != this.dataList.length){this.allSeletType = 'hasSelect'} |
||||
|
}, |
||||
|
// 全选点击事件 |
||||
|
redioAllChange(){ |
||||
|
let isSelectAll = !(this.allSeletType == 'allSelect') |
||||
|
this.allSeletType = isSelectAll ? 'allSelect' : 'NoSelect'; |
||||
|
this.dataList.forEach(item=>{ |
||||
|
return item.istrue = isSelectAll |
||||
|
}) |
||||
|
this.save() |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss"> |
||||
|
$paddingSize:20px; |
||||
|
.rowDropContain{ |
||||
|
.el-popover{ |
||||
|
position: fixed; |
||||
|
right: 30px; |
||||
|
padding: 0; |
||||
|
} |
||||
|
.transition-wrapper { |
||||
|
display: block; |
||||
|
// max-height: calc(90vh - 280px); |
||||
|
overflow: auto; |
||||
|
padding: 0 0 $paddingSize $paddingSize; |
||||
|
|
||||
|
.sort-item{ |
||||
|
margin-bottom: 6px; |
||||
|
display: flex; |
||||
|
cursor: grab; |
||||
|
align-items: center; |
||||
|
|
||||
|
&:last-child{ |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.lable{ |
||||
|
padding: 0 15px 0 10px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.el-divider--horizontal { |
||||
|
margin: $paddingSize; |
||||
|
width: calc(100% - 40px); |
||||
|
} |
||||
|
.text { |
||||
|
color: #333; |
||||
|
font-weight: bold; |
||||
|
padding: $paddingSize 0 0 $paddingSize; |
||||
|
} |
||||
|
.allSelectContent{ |
||||
|
user-select: none; |
||||
|
cursor: pointer; |
||||
|
padding:0 0 10px $paddingSize; |
||||
|
.icon{ |
||||
|
font-size:18px; |
||||
|
vertical-align: middle; |
||||
|
color: #409EFF; |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
} |
||||
|
.buttonsBox{ |
||||
|
text-align: center; |
||||
|
margin: 0; |
||||
|
padding: 15px; |
||||
|
border-top: #eee solid 1px; |
||||
|
} |
||||
|
.checkbox-svg{ |
||||
|
width: 20px; |
||||
|
flex-shrink: 0; |
||||
|
fill:currentColor; |
||||
|
color:#999; |
||||
|
font-size: 18px; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
&.show{ |
||||
|
color: #409EFF; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,66 @@ |
|||||
|
<template> |
||||
|
<!-- 组件功能：普通搜索（列表中的快速搜索） --> |
||||
|
<div class="normalSearchComponentsContain"> |
||||
|
<div class="leftInputBox"> |
||||
|
<i class="el-icon-search searchIcon"></i> |
||||
|
<el-input |
||||
|
v-model="searchValue" |
||||
|
:placeholder="searchNormalOption && searchNormalOption.placeholder ? searchNormalOption.placeholder : '这里是快速搜索'" |
||||
|
clearable |
||||
|
@keyup.enter.native="searchNormalClick" |
||||
|
@clear="searchNormalClear" |
||||
|
></el-input> |
||||
|
</div> |
||||
|
<el-button |
||||
|
class="searchButton" |
||||
|
size="mini" |
||||
|
@click="searchNormalClick" |
||||
|
>搜索</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
props: { |
||||
|
// 格式：{ |
||||
|
// prop:'asnNumber',//查询的接口过滤数据 |
||||
|
// placeholder:'请输入发货单号',//placeholder |
||||
|
// }, |
||||
|
searchNormalOption: { |
||||
|
type: Object, |
||||
|
default: null |
||||
|
}, |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
searchValue:null,//搜索内容数据 |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
// 搜索 |
||||
|
searchNormalClick(){ |
||||
|
this.$emit('searchNormalClick', this.searchValue, this.searchNormalOption) |
||||
|
}, |
||||
|
// 清除搜索 |
||||
|
searchNormalClear(noflesh){ |
||||
|
this.searchValue = "" |
||||
|
if(!noflesh){ |
||||
|
this.$emit('searchNormalClear',this.searchValue, this.searchNormalOption) |
||||
|
} |
||||
|
}, |
||||
|
// 设置值 |
||||
|
setSearchNormalValue(val,noflesh){ |
||||
|
this.searchValue = val |
||||
|
if(!noflesh){ |
||||
|
this.searchNormalClick() |
||||
|
} |
||||
|
}, |
||||
|
// 获取值 |
||||
|
getSearchNormalValue(){ |
||||
|
return this.searchValue |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss"> |
||||
|
@import "./style/index.scss"; |
||||
|
</style> |
||||
@ -0,0 +1,63 @@ |
|||||
|
$searchWidth:60px; |
||||
|
.normalSearchComponentsContain{ |
||||
|
min-height: 29px; |
||||
|
width: 230px; |
||||
|
overflow: hidden; |
||||
|
position: relative; |
||||
|
caret-color:#ccc; |
||||
|
background: #fff; |
||||
|
|
||||
|
.leftInputBox{ |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
right: $searchWidth; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
border: #e8e8e8 solid 1px; |
||||
|
overflow: hidden; |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
.searchIcon{ |
||||
|
display: block; |
||||
|
position: absolute; |
||||
|
left: 10px; |
||||
|
top: 0; |
||||
|
height: 100%; |
||||
|
line-height: 28px; |
||||
|
text-align: center; |
||||
|
color: #ccc; |
||||
|
} |
||||
|
|
||||
|
.el-input{ |
||||
|
position: absolute; |
||||
|
left: 30px; |
||||
|
right: 0; |
||||
|
height: 100%; |
||||
|
width: auto; |
||||
|
|
||||
|
input{ |
||||
|
border: none; |
||||
|
height: 100%; |
||||
|
padding: 0 30px 0 0; |
||||
|
} |
||||
|
|
||||
|
.el-input__icon{ |
||||
|
line-height: 28px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.searchButton{ |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
top: 0; |
||||
|
width: $searchWidth + 3px; |
||||
|
border-radius: 0 4px 4px 0; |
||||
|
border: none; |
||||
|
color: #1890ff; |
||||
|
height: 100%; |
||||
|
background: #d5eaff; |
||||
|
font-size: 13px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,611 @@ |
|||||
|
<template> |
||||
|
<!-- 全面的筛选组件：初级普通筛选 + 高级筛选（按照配置来判断显示情况）--> |
||||
|
<!-- todo:使用v-if每次重新赋值，与接口查询保持一致 --> |
||||
|
<div |
||||
|
class="searchOverallComponent" |
||||
|
:style="{height:componentsHeight+'px',overflow:isShowMoreList ? 'unset' : 'hidden'}" |
||||
|
v-show="isShow" |
||||
|
> |
||||
|
<div |
||||
|
class="border-outer" |
||||
|
> |
||||
|
<!-- 整体背景遮罩 --> |
||||
|
<div |
||||
|
v-if="isShow && isShowMoreList" |
||||
|
class="fullPageCover" |
||||
|
:style="{height:searchOverallCoverHeight}" |
||||
|
></div> |
||||
|
<div class="title" v-if="isShowMoreList">高级筛选</div> |
||||
|
<!-- 普通筛选界面 --> |
||||
|
<searchPrimary |
||||
|
v-if="primarySearchOption && primarySearchOption.length > 0" |
||||
|
ref="searchPrimaryRef" |
||||
|
:showBaseButton="!isShowMoreList" |
||||
|
:primarySearchOption="primarySearchOption" |
||||
|
:primarySearchButton="isShowMoreList ? primarySearchButton : primarySearchAllButton" |
||||
|
@primarySearchButtonClick="primarySearchButtonClick" |
||||
|
@primarySearchBaseHandle="primarySearchBaseHandle" |
||||
|
> |
||||
|
<slot></slot> |
||||
|
</searchPrimary> |
||||
|
<!-- 高级筛选界面 --> |
||||
|
<div v-if="isShow && isShowMoreList" class="moreListOuter"> |
||||
|
<curren-Form |
||||
|
class="navFilter" |
||||
|
size="medium" |
||||
|
labelWidth="0" |
||||
|
:searchData="moreListData" |
||||
|
> |
||||
|
<el-row :gutter="20"> |
||||
|
<el-form-item |
||||
|
v-for="(item, index) in moreListData.filters" |
||||
|
:key="index" |
||||
|
> |
||||
|
<el-col :span="5"> |
||||
|
<el-form-item |
||||
|
:prop="'filters.' + index + '.column'" |
||||
|
:rules="rules && rules.column ? rules.column : []" |
||||
|
> |
||||
|
<el-select |
||||
|
v-model="item.column" |
||||
|
placeholder="请选择筛选对象" |
||||
|
:disabled="item.hide" |
||||
|
:filterable="true" |
||||
|
@change="resetSelect(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'" |
||||
|
> |
||||
|
<el-select |
||||
|
v-model="item.action" |
||||
|
placeholder="请选择条件" |
||||
|
:disabled="disabledAction || item.column == '' || item.hide ? true : false" |
||||
|
> |
||||
|
<!-- moreListOptions.action --> |
||||
|
<el-option |
||||
|
v-for="item in formatMoreListOptions(item.column) " |
||||
|
: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="rules && rules.value ? rules.value : []" |
||||
|
> |
||||
|
<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" |
||||
|
:value=" |
||||
|
typeof item.value == 'string' |
||||
|
? item.value |
||||
|
: String(item.value) |
||||
|
" |
||||
|
> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
<!-- 日期时间 --> |
||||
|
<el-date-picker |
||||
|
v-else-if="getColumnType(item.column) == 'dateTime'" |
||||
|
type="datetime" |
||||
|
v-model="item.value" |
||||
|
:placeholder="'选择日期时间'" |
||||
|
style="width: 100%" |
||||
|
format="yyyy-MM-dd HH:mm:ss" |
||||
|
value-format="yyyy-MM-ddTHH:mm:ss" |
||||
|
></el-date-picker> |
||||
|
<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'" |
||||
|
> |
||||
|
<el-select |
||||
|
v-model="item.logic" |
||||
|
placeholder="请选择关系" |
||||
|
:disabled="disabledLogic || item.column == '' || item.hide ? true : false" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in moreListOptions.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="moreListDelete(index,item)" |
||||
|
></el-button> |
||||
|
</el-col> |
||||
|
</el-form-item> |
||||
|
</el-row> |
||||
|
</curren-Form> |
||||
|
<!-- 添加筛选条件 --> |
||||
|
<div class="moreListPush-btn"> |
||||
|
<span @click="moreListPush">+ 添加筛选条件</span> |
||||
|
</div> |
||||
|
<!-- 按钮 --> |
||||
|
<div class="moreListBaseBts" v-if="moreListbuttons && moreListbuttons.length > 0" > |
||||
|
<el-button |
||||
|
v-for="(item,index) in moreListbuttons" |
||||
|
:key="index" |
||||
|
:type="item.type" |
||||
|
:size="item.size || 'medium'" |
||||
|
@click="moreListButtonHandle(item)" |
||||
|
:icon="item.iconRight ? '' : item.icon" |
||||
|
> |
||||
|
{{ item.label }} |
||||
|
<!-- 自定义右侧图标 --> |
||||
|
<i |
||||
|
style="margin-left:0" |
||||
|
v-if="item.iconRight" |
||||
|
:class="['el-icon--right',item.icon]" |
||||
|
></i> |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import searchPrimary from "@/components/searchPrimary" |
||||
|
export default { |
||||
|
name:'searchOverallComponent', |
||||
|
components: { |
||||
|
searchPrimary, |
||||
|
}, |
||||
|
watch:{ |
||||
|
// 监听显示切换 |
||||
|
showSearchOverall(n){ |
||||
|
// 控制是否显示 + 动画效果处理 |
||||
|
// 没有普通查询配置 |
||||
|
if(this.primarySearchOption.length <= 0){ |
||||
|
this.changeSearchOverallShow(n) |
||||
|
this.changeMoreListShow(n) |
||||
|
return |
||||
|
} |
||||
|
// 有普通查询配置 |
||||
|
if(n){ |
||||
|
this.changeSearchOverallShow(n) |
||||
|
this.changeMoreListShow(false) |
||||
|
} |
||||
|
this.$nextTick(()=>{ |
||||
|
if(n){ |
||||
|
this.componentsHeight = this.getSearchPrimaryHeight() + 20 |
||||
|
}else{ |
||||
|
this.componentsHeight = 0 |
||||
|
this.changeMoreListShow(false) |
||||
|
// setTimeout(()=>{ |
||||
|
// this.changeSearchOverallShow(n) |
||||
|
// },500) |
||||
|
} |
||||
|
}) |
||||
|
this.setOverallSearchData(this.httpOverallSearchData) |
||||
|
}, |
||||
|
// 监听接口搜索的筛选数据 |
||||
|
httpOverallSearchData(n,o){ |
||||
|
this.setOverallSearchData(n) |
||||
|
}, |
||||
|
isShowMoreList(){ |
||||
|
this.setOverallSearchData(this.httpOverallSearchData) |
||||
|
} |
||||
|
}, |
||||
|
props: { |
||||
|
// 筛选遮罩高度 |
||||
|
searchOverallCoverHeight:{ |
||||
|
type: String, |
||||
|
default: 'calc(100vh - 200px)' |
||||
|
}, |
||||
|
// 禁用选择条件 |
||||
|
disabledAction:{ |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
// 禁用选择关系 |
||||
|
disabledLogic:{ |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
// 是否显示全面筛选组件 |
||||
|
showSearchOverall:{ |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
// 是否显示高级筛选 |
||||
|
showMoreSearch:{ |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
//普通筛选绑定表单数据 |
||||
|
primarySearchOption: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
//普通筛选自定义按钮 |
||||
|
primarySearchButton:{ |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
// 显示数据配置 |
||||
|
tableColumns: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
// 当前接口中的筛选数据（用于同步全面筛选的数据） |
||||
|
httpOverallSearchData:{ |
||||
|
type: Object, |
||||
|
default: null |
||||
|
}, |
||||
|
// 自定义配置条件 |
||||
|
filterActionOptions:{ |
||||
|
type: Array, |
||||
|
default: null |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
// 普通筛选自定义所有按钮(包括高级筛选) |
||||
|
primarySearchAllButton:[], |
||||
|
// 高级筛选列表是否显示 |
||||
|
isShowMoreList:false, |
||||
|
// 组件高度（用于动画效果） |
||||
|
componentsHeight:0, |
||||
|
// 是否显示总组件，与showSearchOverall相通（重新定义一遍目的是为了动画效果） |
||||
|
isShow:false, |
||||
|
// 高级筛选列表内部按钮 |
||||
|
moreListbuttons: [ |
||||
|
{ label: "搜索", type: "primary", name: "moreList-search" }, |
||||
|
{ label: '重置', name: 'moreList-reset' }, |
||||
|
{ label:'收起筛选', name:'moreList-up', type: 'text', icon:'el-icon-arrow-up', iconRight:true} |
||||
|
], |
||||
|
// 高级筛选数据列表/值 |
||||
|
moreListData: {filters:[]}, |
||||
|
// 高级筛选条件列表配置 |
||||
|
moreListOptions: { |
||||
|
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暂未使用验证，但是不能删除rules定义 |
||||
|
// todo:优化后放开，优化内容：如果选择了筛选对象【column】，则验证【value】，否则都不验证 |
||||
|
rules:{ |
||||
|
// column: [ |
||||
|
// { required: true, message: '请选择筛选对象', trigger: 'change' } |
||||
|
// ], |
||||
|
// value: [ |
||||
|
// { required: true, message: '请输入内容', trigger: 'blur' } |
||||
|
// ], |
||||
|
}, |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.moreListPush() |
||||
|
}, |
||||
|
mounted() { |
||||
|
// 配置普通筛选默认按钮(是否包含高级筛选按钮) |
||||
|
this.setPrimarySearchAllButton() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 获取普通筛选的高度,外部也有使用，用于动画样式 |
||||
|
getSearchPrimaryHeight(){ |
||||
|
return document.getElementsByClassName('searchPrimaryComponent')[0].clientHeight |
||||
|
}, |
||||
|
// 配置普通筛选自定义按钮 |
||||
|
setPrimarySearchAllButton(){ |
||||
|
let _more_btn = [{ |
||||
|
label:'高级筛选', |
||||
|
name:'more', |
||||
|
type: 'text', |
||||
|
icon:'el-icon-arrow-down', |
||||
|
iconRight:true |
||||
|
}] |
||||
|
if(this.showMoreSearch){ |
||||
|
this.primarySearchAllButton = _more_btn.concat(this.primarySearchButton) |
||||
|
}else{ |
||||
|
this.primarySearchAllButton= this.primarySearchButton |
||||
|
} |
||||
|
}, |
||||
|
// 普通查询基础按钮点击事件 |
||||
|
primarySearchBaseHandle(item,data, option, that){ |
||||
|
this.overallSearchFormClick(item,data, option, that) |
||||
|
}, |
||||
|
// 普通筛选自定义按钮点击事件 |
||||
|
primarySearchButtonClick( item,data, option,that){ |
||||
|
// 点击[高级筛选]按钮 |
||||
|
if(item.name == 'more'){ |
||||
|
this.changeMoreListShow(true) |
||||
|
} |
||||
|
this.overallSearchFormClick(item,data, option, that) |
||||
|
}, |
||||
|
// 高级筛选基础按钮点击事件 |
||||
|
moreListButtonHandle(item){ |
||||
|
this.overallSearchFormClick(item) |
||||
|
}, |
||||
|
// 设置moreList的列表值（默认按tableColumns设置） |
||||
|
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 |
||||
|
}, |
||||
|
// 判断筛选类型是否是时间格式 |
||||
|
getColumnType(val) { |
||||
|
var columnsType = this.tableColumns.filter(item => item.prop == val) |
||||
|
if (columnsType.length > 0) { |
||||
|
if (columnsType[0].type) { |
||||
|
return columnsType[0].type |
||||
|
} |
||||
|
} else { |
||||
|
return '' |
||||
|
} |
||||
|
}, |
||||
|
// 筛选条件改变重置其他项 |
||||
|
resetSelect(val) { |
||||
|
val.action = "==" |
||||
|
val.value = "" |
||||
|
}, |
||||
|
// 根据数据内容约束条件选项 |
||||
|
formatMoreListOptions(val) { |
||||
|
// 自定义配置条件filterActionOptions |
||||
|
if(this.filterActionOptions){ |
||||
|
this.moreListOptions.action = this.filterActionOptions |
||||
|
return this.moreListOptions.action |
||||
|
} |
||||
|
if (val) { |
||||
|
for(var i =0; i< this.tableColumns.length; i++) { |
||||
|
if (val == this.tableColumns[i].prop) { |
||||
|
if (this.tableColumns[i].filters) { |
||||
|
return this.moreListOptions.action.filter(item => item.value == '==' || item.value == '!=') |
||||
|
} else if (this.tableColumns[i].type == 'dateTime') { |
||||
|
return this.moreListOptions.action.filter(item => |
||||
|
item.value == '==' || |
||||
|
item.value == '!=' || |
||||
|
item.value == '>' || |
||||
|
item.value == '<' || |
||||
|
item.value == '>=' || |
||||
|
item.value == '<=' ) |
||||
|
} else { |
||||
|
return this.moreListOptions.action |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
return this.moreListOptions.action |
||||
|
}, |
||||
|
// 设置moreList列表的内容项是input还是select |
||||
|
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 |
||||
|
}, |
||||
|
// 高级筛选列表-删除筛选条件行 |
||||
|
moreListDelete(val,item) { |
||||
|
if (this.moreListData.filters.length == 1) { |
||||
|
this.$warningMsg('必须保留一条筛选条件！') |
||||
|
} else { |
||||
|
this.$confirm('您确定删除吗, 是否继续?', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
this.moreListData.filters.splice(val, 1) |
||||
|
}).catch(() => { |
||||
|
// this.modalAppendToBody = false |
||||
|
}); |
||||
|
} |
||||
|
this.overallSearchFormClick({name:'moreList-deleteRow'}) |
||||
|
}, |
||||
|
// 高级筛选列表-添加筛选条件行 |
||||
|
moreListPush() { |
||||
|
let data = { |
||||
|
logic: "And", |
||||
|
column: "", |
||||
|
action: "==", |
||||
|
value: "" |
||||
|
} |
||||
|
this.moreListData.filters.push(data) |
||||
|
this.overallSearchFormClick({name:'moreList-addRow'}) |
||||
|
}, |
||||
|
// 重置数据，高级（单纯节点显示数据，不重新查询接口） |
||||
|
resetMoreListData(){ |
||||
|
this.moreListData = {filters:[]} |
||||
|
this.moreListPush() |
||||
|
}, |
||||
|
// 设置数据值，高级（单纯节点显示数据，不重新查询接口） |
||||
|
setMoreListData(val){ |
||||
|
this.moreListData = JSON.parse(JSON.stringify(val)) |
||||
|
}, |
||||
|
// 重置数据，普通+高级（单纯节点显示数据，不重新查询接口） |
||||
|
resetOverallSearchData(){ |
||||
|
if(this.$refs.searchPrimaryRef)this.$refs.searchPrimaryRef.resetPrimarySearchData(); |
||||
|
this.resetMoreListData() |
||||
|
}, |
||||
|
// 设置数据，普通+高级（单纯节点显示数据，不重新查询接口） |
||||
|
setOverallSearchData(data){ |
||||
|
// 普通筛选数据同步 |
||||
|
if(data && data.params){ |
||||
|
if(this.$refs.searchPrimaryRef)this.$refs.searchPrimaryRef.setPrimarySearchData(data.params) |
||||
|
}else{ |
||||
|
if(this.$refs.searchPrimaryRef)this.$refs.searchPrimaryRef.resetPrimarySearchData() |
||||
|
} |
||||
|
// 高级筛选数据同步 |
||||
|
if(data && data.moreList){ |
||||
|
let _list = {filters:[]} |
||||
|
data.moreList.filters.forEach(item=>{ |
||||
|
if(String(item.column).length > 0 && String(item.value).length > 0){ |
||||
|
_list.filters.push(item) |
||||
|
} |
||||
|
}) |
||||
|
if(_list.filters.length <= 0){ |
||||
|
_list.filters.push({ |
||||
|
logic: "And", |
||||
|
column: "", |
||||
|
action: "==", |
||||
|
value: "" |
||||
|
}) |
||||
|
} |
||||
|
this.setMoreListData(_list) |
||||
|
}else{ |
||||
|
this.resetMoreListData() |
||||
|
} |
||||
|
}, |
||||
|
// 展开-收缩高级筛选 |
||||
|
changeMoreListShow(val){ |
||||
|
this.isShowMoreList = val || false |
||||
|
// 如果没有初级筛选 |
||||
|
if(!this.primarySearchOption || this.primarySearchOption.length <= 0){ |
||||
|
// 关闭时候直接整个全面筛选组件 |
||||
|
if(!this.isShowMoreList){ |
||||
|
this.isShow = false |
||||
|
this.$emit("getShowSearchOverall",this.isShow) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
// 关闭整个全面组件 |
||||
|
changeSearchOverallShow(val){ |
||||
|
if(!val){ |
||||
|
this.changeMoreListShow(false) |
||||
|
} |
||||
|
this.isShow = val || false |
||||
|
this.$emit("getShowSearchOverall",this.isShow) |
||||
|
}, |
||||
|
// 全面筛选组件所有按钮事件 |
||||
|
overallSearchFormClick(item,data, option) { |
||||
|
// 页面功能 |
||||
|
// 收缩筛选 |
||||
|
if(item.name == 'moreList-up'){ |
||||
|
this.changeMoreListShow(false) |
||||
|
} |
||||
|
// 高级筛选内-重置 || 普通格式-重置 |
||||
|
else if(item.name == "moreList-reset" || item.name == "reset"){ |
||||
|
this.resetOverallSearchData() |
||||
|
} |
||||
|
// 抛出函数传参 |
||||
|
let _searchPrimaryRef = this.$refs.searchPrimaryRef |
||||
|
let _options = { |
||||
|
item:item, |
||||
|
data_primary:_searchPrimaryRef ? _searchPrimaryRef.getPrimarySearchData() : null, |
||||
|
data_moreList:this.moreListData, |
||||
|
option_primary:this.primarySearchOption, |
||||
|
option_moreList:this.tableColumns, |
||||
|
vm_primary:_searchPrimaryRef, |
||||
|
vm_moreList:this |
||||
|
} |
||||
|
this.$emit("overallSearchFormClick",_options) |
||||
|
}, |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
@import "./style/index.scss"; |
||||
|
</style> |
||||
@ -0,0 +1,647 @@ |
|||||
|
<template> |
||||
|
<!-- 全面的筛选组件：初级普通筛选 + 高级筛选（按照配置来判断显示情况）--> |
||||
|
<!-- todo:使用v-if每次重新赋值，与接口查询保持一致 --> |
||||
|
<div |
||||
|
class="searchOverallComponent" |
||||
|
:style="{height:componentsHeight+'px',overflow:isShowMoreList ? 'unset' : 'hidden'}" |
||||
|
v-show="isShow" |
||||
|
> |
||||
|
<div |
||||
|
class="border-outer" |
||||
|
ref="searchOverallComponent_inner" |
||||
|
> |
||||
|
<!-- 整体背景遮罩 --> |
||||
|
<!-- <div |
||||
|
v-if="isShow && isShowMoreList" |
||||
|
class="fullPageCover" |
||||
|
:style="{height:searchOverallCoverHeight}" |
||||
|
></div> --> |
||||
|
<!-- <div class="title" v-if="isShowMoreList">高级筛选</div> --> |
||||
|
<!-- 普通筛选界面 --> |
||||
|
<searchPrimary |
||||
|
v-if="primarySearchOption && primarySearchOption.length > 0" |
||||
|
ref="searchPrimaryRef" |
||||
|
:showBaseButton="!isShowMoreList" |
||||
|
:primarySearchOption="primarySearchOption" |
||||
|
:primarySearchButton="isShowMoreList ? primarySearchButton : primarySearchAllButton" |
||||
|
@primarySearchButtonClick="primarySearchButtonClick" |
||||
|
@primarySearchBaseHandle="primarySearchBaseHandle" |
||||
|
> |
||||
|
<slot></slot> |
||||
|
</searchPrimary> |
||||
|
<!-- 高级筛选界面 --> |
||||
|
<div v-if="isShow && isShowMoreList" class="moreListOuter"> |
||||
|
<curren-Form |
||||
|
:style="`--navFilterMaxHeight: ${selectMaxHeight};`" |
||||
|
class="navFilter" |
||||
|
size="medium" |
||||
|
labelWidth="0" |
||||
|
:searchData="moreListData" |
||||
|
> |
||||
|
<el-row :gutter="20"> |
||||
|
<el-form-item |
||||
|
v-for="(item, index) in moreListData.filters" |
||||
|
:key="index" |
||||
|
> |
||||
|
<el-col :span="5"> |
||||
|
<el-form-item |
||||
|
:prop="'filters.' + index + '.column'" |
||||
|
:rules="rules && rules.column ? rules.column : []" |
||||
|
> |
||||
|
<el-select |
||||
|
v-model="item.column" |
||||
|
placeholder="请选择筛选对象" |
||||
|
:disabled="item.hide" |
||||
|
:filterable="true" |
||||
|
@change="resetSelect(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'" |
||||
|
> |
||||
|
<el-select |
||||
|
v-model="item.action" |
||||
|
placeholder="请选择条件" |
||||
|
:disabled="disabledAction || item.column == '' || item.hide ? true : false" |
||||
|
> |
||||
|
<!-- moreListOptions.action --> |
||||
|
<el-option |
||||
|
v-for="item in formatMoreListOptions(item.column) " |
||||
|
: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="rules && rules.value ? rules.value : []" |
||||
|
> |
||||
|
<el-select |
||||
|
v-if="inputOrSelect(item.column)" |
||||
|
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 inputOrSelect(item.column)" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value=" |
||||
|
typeof item.value == 'string' |
||||
|
? item.value |
||||
|
: String(item.value) |
||||
|
" |
||||
|
> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
<!-- 日期时间 --> |
||||
|
<el-date-picker |
||||
|
v-else-if="getColumnType(item.column) == 'datetime'" |
||||
|
type="datetime" |
||||
|
v-model="item.value" |
||||
|
:placeholder="'选择日期时间'" |
||||
|
style="width: 100%" |
||||
|
format="yyyy-MM-dd HH:mm:ss" |
||||
|
value-format="yyyy-MM-ddTHH:mm:ss" |
||||
|
></el-date-picker> |
||||
|
<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'" |
||||
|
> |
||||
|
<el-select |
||||
|
v-model="item.logic" |
||||
|
placeholder="请选择关系" |
||||
|
:disabled="disabledLogic || item.column == '' || item.hide ? true : false" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in moreListOptions.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="moreListDelete(index,item)" |
||||
|
></el-button> |
||||
|
</el-col> |
||||
|
</el-form-item> |
||||
|
</el-row> |
||||
|
</curren-Form> |
||||
|
<div class="buttonsContent"> |
||||
|
<div class="leftButtons"> |
||||
|
<!-- 添加筛选条件 --> |
||||
|
<el-button size="small" @click="moreListPush(true)">+ 添加筛选条件</el-button> |
||||
|
<!-- 收起 --> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
size="small" |
||||
|
@click="moreListButtonHandle({ label:'收起筛选', name:'moreList-up', type: 'text', icon:'el-icon-arrow-up', iconRight:true})" |
||||
|
> |
||||
|
收起筛选 |
||||
|
<i |
||||
|
style="margin-left:0" |
||||
|
:class="['el-icon--right','el-icon-arrow-up']" |
||||
|
></i> |
||||
|
</el-button> |
||||
|
</div> |
||||
|
<!-- 按钮 --> |
||||
|
<div class="rightButtons" v-if="moreListbuttons && moreListbuttons.length > 0" > |
||||
|
<el-button |
||||
|
v-for="(item,index) in moreListbuttons" |
||||
|
:key="index" |
||||
|
:type="item.type" |
||||
|
:size="item.size || 'small'" |
||||
|
@click="moreListButtonHandle(item)" |
||||
|
:icon="item.iconRight ? '' : item.icon" |
||||
|
> |
||||
|
{{ item.label }} |
||||
|
<!-- 自定义右侧图标 --> |
||||
|
<i |
||||
|
style="margin-left:0" |
||||
|
v-if="item.iconRight" |
||||
|
:class="['el-icon--right',item.icon]" |
||||
|
></i> |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import searchPrimary from "@/components/searchPrimary" |
||||
|
export default { |
||||
|
name:'searchOverallComponent', |
||||
|
components: { |
||||
|
searchPrimary, |
||||
|
}, |
||||
|
watch:{ |
||||
|
// 监听显示切换 |
||||
|
showSearchOverall(n){ |
||||
|
// 控制是否显示 + 动画效果处理 |
||||
|
// 没有普通查询配置 |
||||
|
if(this.primarySearchOption.length <= 0){ |
||||
|
this.changeSearchOverallShow(n) |
||||
|
this.changeMoreListShow(n) |
||||
|
this.$nextTick(()=>{ |
||||
|
this.componentsHeight = this.getAllSearchInnerHeight() + 20 |
||||
|
// 收起 |
||||
|
if(!n && this.$parent.changeTableHeight){ |
||||
|
this.$parent.changeTableHeight() |
||||
|
} |
||||
|
}) |
||||
|
return |
||||
|
} |
||||
|
// 有普通查询配置 |
||||
|
if(n){ |
||||
|
this.changeSearchOverallShow(n) |
||||
|
this.changeMoreListShow(false) |
||||
|
} |
||||
|
this.$nextTick(()=>{ |
||||
|
if(n){ |
||||
|
this.componentsHeight = this.getSearchPrimaryHeight() + 20 |
||||
|
}else{ |
||||
|
this.componentsHeight = 0 |
||||
|
this.changeMoreListShow(false) |
||||
|
// setTimeout(()=>{ |
||||
|
// this.changeSearchOverallShow(n) |
||||
|
// },500) |
||||
|
} |
||||
|
}) |
||||
|
this.setOverallSearchData(this.httpOverallSearchData) |
||||
|
}, |
||||
|
// 监听接口搜索的筛选数据 |
||||
|
httpOverallSearchData(n,o){ |
||||
|
this.setOverallSearchData(n) |
||||
|
}, |
||||
|
isShowMoreList(){ |
||||
|
this.setOverallSearchData(this.httpOverallSearchData) |
||||
|
} |
||||
|
}, |
||||
|
props: { |
||||
|
// 筛选条件最大高度 |
||||
|
selectMaxHeight:{ |
||||
|
type: String, |
||||
|
default: '174px' |
||||
|
}, |
||||
|
// 筛选遮罩高度 |
||||
|
searchOverallCoverHeight:{ |
||||
|
type: String, |
||||
|
default: 'calc(100vh - 200px)' |
||||
|
}, |
||||
|
// 禁用选择条件 |
||||
|
disabledAction:{ |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
// 禁用选择关系 |
||||
|
disabledLogic:{ |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
// 是否显示全面筛选组件 |
||||
|
showSearchOverall:{ |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
// 是否显示高级筛选 |
||||
|
showMoreSearch:{ |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
//普通筛选绑定表单数据 |
||||
|
primarySearchOption: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
//普通筛选自定义按钮 |
||||
|
primarySearchButton:{ |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
// 显示数据配置 |
||||
|
tableColumns: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
// 当前接口中的筛选数据（用于同步全面筛选的数据） |
||||
|
httpOverallSearchData:{ |
||||
|
type: Object, |
||||
|
default: null |
||||
|
}, |
||||
|
// 自定义配置条件 |
||||
|
filterActionOptions:{ |
||||
|
type: Array, |
||||
|
default: null |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
// 普通筛选自定义所有按钮(包括高级筛选) |
||||
|
primarySearchAllButton:[], |
||||
|
// 高级筛选列表是否显示 |
||||
|
isShowMoreList:false, |
||||
|
// 组件高度（用于动画效果） |
||||
|
componentsHeight:0, |
||||
|
// 是否显示总组件，与showSearchOverall相通（重新定义一遍目的是为了动画效果） |
||||
|
isShow:false, |
||||
|
// 高级筛选列表内部按钮 |
||||
|
moreListbuttons: [ |
||||
|
{ label: "搜索", type: "primary", name: "moreList-search" }, |
||||
|
{ label: '重置', name: 'moreList-reset' }, |
||||
|
// { label:'收起筛选', name:'moreList-up', type: 'text', icon:'el-icon-arrow-up', iconRight:true} |
||||
|
], |
||||
|
// 高级筛选数据列表/值 |
||||
|
moreListData: {filters:[]}, |
||||
|
// 高级筛选条件列表配置 |
||||
|
moreListOptions: { |
||||
|
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暂未使用验证，但是不能删除rules定义 |
||||
|
// todo:优化后放开，优化内容：如果选择了筛选对象【column】，则验证【value】，否则都不验证 |
||||
|
rules:{ |
||||
|
// column: [ |
||||
|
// { required: true, message: '请选择筛选对象', trigger: 'change' } |
||||
|
// ], |
||||
|
// value: [ |
||||
|
// { required: true, message: '请输入内容', trigger: 'blur' } |
||||
|
// ], |
||||
|
}, |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.moreListPush() |
||||
|
}, |
||||
|
mounted() { |
||||
|
// 配置普通筛选默认按钮(是否包含高级筛选按钮) |
||||
|
this.setPrimarySearchAllButton() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 获取普通筛选的高度,外部也有使用，用于动画样式 |
||||
|
getSearchPrimaryHeight(){ |
||||
|
return document.getElementsByClassName('searchPrimaryComponent')[0].clientHeight |
||||
|
}, |
||||
|
// 获取普高级筛选的高度,外部也有使用，用于动画样式 |
||||
|
getAllSearchInnerHeight(){ |
||||
|
return this.$refs.searchOverallComponent_inner ? this.$refs.searchOverallComponent_inner.clientHeight : 0 |
||||
|
}, |
||||
|
// 配置普通筛选自定义按钮 |
||||
|
setPrimarySearchAllButton(){ |
||||
|
let _more_btn = [{ |
||||
|
label:'高级筛选', |
||||
|
name:'more', |
||||
|
type: 'text', |
||||
|
icon:'el-icon-arrow-down', |
||||
|
iconRight:true |
||||
|
}] |
||||
|
if(this.showMoreSearch){ |
||||
|
this.primarySearchAllButton = _more_btn.concat(this.primarySearchButton) |
||||
|
}else{ |
||||
|
this.primarySearchAllButton= this.primarySearchButton |
||||
|
} |
||||
|
}, |
||||
|
// 普通查询基础按钮点击事件 |
||||
|
primarySearchBaseHandle(item,data, option, that){ |
||||
|
this.overallSearchFormClick(item,data, option, that) |
||||
|
}, |
||||
|
// 普通筛选自定义按钮点击事件 |
||||
|
primarySearchButtonClick( item,data, option,that){ |
||||
|
// 点击[高级筛选]按钮 |
||||
|
if(item.name == 'more'){ |
||||
|
this.changeMoreListShow(true) |
||||
|
} |
||||
|
this.overallSearchFormClick(item,data, option, that) |
||||
|
}, |
||||
|
// 高级筛选基础按钮点击事件 |
||||
|
moreListButtonHandle(item){ |
||||
|
this.overallSearchFormClick(item) |
||||
|
}, |
||||
|
// 设置moreList的列表值（默认按tableColumns设置） |
||||
|
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 |
||||
|
}, |
||||
|
// 判断筛选类型是否是时间格式 |
||||
|
getColumnType(val) { |
||||
|
var columnsType = this.tableColumns.filter(item => item.prop == val) |
||||
|
if (columnsType.length > 0) { |
||||
|
if (columnsType[0].apiBaseType) { |
||||
|
return columnsType[0].apiBaseType |
||||
|
} |
||||
|
} else { |
||||
|
return '' |
||||
|
} |
||||
|
}, |
||||
|
// 筛选条件改变重置其他项 |
||||
|
resetSelect(val) { |
||||
|
val.action = "==" |
||||
|
val.value = "" |
||||
|
}, |
||||
|
// 根据数据内容约束条件选项 |
||||
|
formatMoreListOptions(val) { |
||||
|
// 自定义配置条件filterActionOptions |
||||
|
if(this.filterActionOptions){ |
||||
|
this.moreListOptions.action = this.filterActionOptions |
||||
|
return this.moreListOptions.action |
||||
|
} |
||||
|
if (val) { |
||||
|
for(var i =0; i< this.tableColumns.length; i++) { |
||||
|
if (val == this.tableColumns[i].prop) { |
||||
|
if (this.tableColumns[i].filters) { |
||||
|
return this.moreListOptions.action.filter(item => item.value == '==' || item.value == '!=') |
||||
|
} else if (this.tableColumns[i].type == 'dateTime') { |
||||
|
return this.moreListOptions.action.filter(item => |
||||
|
item.value == '==' || |
||||
|
item.value == '!=' || |
||||
|
item.value == '>' || |
||||
|
item.value == '<' || |
||||
|
item.value == '>=' || |
||||
|
item.value == '<=' ) |
||||
|
} else { |
||||
|
return this.moreListOptions.action |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
return this.moreListOptions.action |
||||
|
}, |
||||
|
// 设置moreList列表的内容项是input还是select |
||||
|
inputOrSelect(val) { |
||||
|
let data = null |
||||
|
if (val) { |
||||
|
this.tableColumns.forEach((key) => { |
||||
|
if (val == key.prop) { |
||||
|
if (key.enums_list && key.enums_list.length > 0) { |
||||
|
data = key.enums_list |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
return data |
||||
|
}, |
||||
|
// 高级筛选列表-删除筛选条件行 |
||||
|
moreListDelete(val,item) { |
||||
|
if (this.moreListData.filters.length == 1) { |
||||
|
this.$warningMsg('必须保留一条筛选条件！') |
||||
|
} else { |
||||
|
this.$confirm('您确定删除吗, 是否继续?', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
this.moreListData.filters.splice(val, 1) |
||||
|
this.$nextTick(()=>{ |
||||
|
this.componentsHeight = this.getAllSearchInnerHeight() + 20 |
||||
|
this.$parent.changeTableHeight(this.getAllSearchInnerHeight()) |
||||
|
}) |
||||
|
}).catch(() => { |
||||
|
// this.modalAppendToBody = false |
||||
|
}); |
||||
|
} |
||||
|
this.overallSearchFormClick({name:'moreList-deleteRow'}) |
||||
|
}, |
||||
|
// 高级筛选列表-添加筛选条件行 |
||||
|
moreListPush(handle) { |
||||
|
let data = { |
||||
|
logic: "And", |
||||
|
column: "", |
||||
|
action: "==", |
||||
|
value: "" |
||||
|
} |
||||
|
this.moreListData.filters.push(data) |
||||
|
this.overallSearchFormClick({name:'moreList-addRow'}) |
||||
|
if(handle){ |
||||
|
this.$nextTick(()=>{ |
||||
|
this.componentsHeight = this.getAllSearchInnerHeight() + 20 |
||||
|
this.$parent.changeTableHeight(this.getAllSearchInnerHeight()) |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
// 重置数据，高级（单纯节点显示数据，不重新查询接口） |
||||
|
resetMoreListData(){ |
||||
|
this.moreListData = {filters:[]} |
||||
|
this.moreListPush() |
||||
|
}, |
||||
|
// 设置数据值，高级（单纯节点显示数据，不重新查询接口） |
||||
|
setMoreListData(val){ |
||||
|
this.moreListData = JSON.parse(JSON.stringify(val)) |
||||
|
}, |
||||
|
// 重置数据，普通+高级（单纯节点显示数据，不重新查询接口） |
||||
|
resetOverallSearchData(){ |
||||
|
if(this.$refs.searchPrimaryRef)this.$refs.searchPrimaryRef.resetPrimarySearchData(); |
||||
|
this.resetMoreListData() |
||||
|
}, |
||||
|
// 设置数据，普通+高级（单纯节点显示数据，不重新查询接口） |
||||
|
setOverallSearchData(data){ |
||||
|
// 普通筛选数据同步 |
||||
|
if(data && data.params){ |
||||
|
if(this.$refs.searchPrimaryRef)this.$refs.searchPrimaryRef.setPrimarySearchData(data.params) |
||||
|
}else{ |
||||
|
if(this.$refs.searchPrimaryRef)this.$refs.searchPrimaryRef.resetPrimarySearchData() |
||||
|
} |
||||
|
// 高级筛选数据同步 |
||||
|
if(data && data.moreList){ |
||||
|
let _list = {filters:[]} |
||||
|
data.moreList.filters.forEach(item=>{ |
||||
|
if(String(item.column).length > 0 && String(item.value).length > 0){ |
||||
|
_list.filters.push(item) |
||||
|
} |
||||
|
}) |
||||
|
if(_list.filters.length <= 0){ |
||||
|
_list.filters.push({ |
||||
|
logic: "And", |
||||
|
column: "", |
||||
|
action: "==", |
||||
|
value: "" |
||||
|
}) |
||||
|
} |
||||
|
this.setMoreListData(_list) |
||||
|
}else{ |
||||
|
this.resetMoreListData() |
||||
|
} |
||||
|
}, |
||||
|
// 展开-收缩高级筛选 |
||||
|
changeMoreListShow(val){ |
||||
|
this.isShowMoreList = val || false |
||||
|
// 如果没有初级筛选 |
||||
|
if(!this.primarySearchOption || this.primarySearchOption.length <= 0){ |
||||
|
// 关闭时候直接整个全面筛选组件 |
||||
|
if(!this.isShowMoreList){ |
||||
|
this.isShow = false |
||||
|
this.$emit("getShowSearchOverall",this.isShow) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
// 关闭整个全面组件 |
||||
|
changeSearchOverallShow(val){ |
||||
|
if(!val){ |
||||
|
this.changeMoreListShow(false) |
||||
|
} |
||||
|
this.isShow = val || false |
||||
|
this.$emit("getShowSearchOverall",this.isShow) |
||||
|
}, |
||||
|
// 全面筛选组件所有按钮事件 |
||||
|
overallSearchFormClick(item,data, option) { |
||||
|
// 页面功能 |
||||
|
// 收缩筛选 |
||||
|
if(item.name == 'moreList-up'){ |
||||
|
this.changeMoreListShow(false) |
||||
|
} |
||||
|
// 高级筛选内-重置 || 普通格式-重置 |
||||
|
else if(item.name == "moreList-reset" || item.name == "reset"){ |
||||
|
this.resetOverallSearchData() |
||||
|
} |
||||
|
// 抛出函数传参 |
||||
|
let _searchPrimaryRef = this.$refs.searchPrimaryRef |
||||
|
let _options = { |
||||
|
item:item, |
||||
|
data_primary:_searchPrimaryRef ? _searchPrimaryRef.getPrimarySearchData() : null, |
||||
|
data_moreList:this.moreListData, |
||||
|
option_primary:this.primarySearchOption, |
||||
|
option_moreList:this.tableColumns, |
||||
|
vm_primary:_searchPrimaryRef, |
||||
|
vm_moreList:this |
||||
|
} |
||||
|
this.$emit("overallSearchFormClick",_options) |
||||
|
}, |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
@import "./style/index.scss"; |
||||
|
</style> |
||||
@ -0,0 +1,83 @@ |
|||||
|
.searchOverallComponent{ |
||||
|
height: 0; |
||||
|
transition:all 0.5s; |
||||
|
z-index: 1; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
.border-outer{ |
||||
|
position: relative; |
||||
|
background: #f8f9fb; |
||||
|
padding: 10px 20px 0; |
||||
|
border: #eff0f2 solid 1px; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
|
||||
|
.fullPageCover{ |
||||
|
position: absolute; |
||||
|
background: rgba(255, 255, 255, 0.2); |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
// height: calc(100vh - 200px); |
||||
|
cursor: no-drop; |
||||
|
} |
||||
|
|
||||
|
.moreListOuter{ |
||||
|
margin-top: 10px; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
::v-deep .navFilter { |
||||
|
// display: flex; |
||||
|
// flex-direction: column; |
||||
|
// width: 100%; |
||||
|
// height: 100%; |
||||
|
max-height: 30vh; |
||||
|
overflow: auto; |
||||
|
|
||||
|
.el-form { |
||||
|
// flex: 1; |
||||
|
// padding-left: 100px; |
||||
|
// padding-right: 100px; |
||||
|
display: flex; |
||||
|
align-content: flex-start; |
||||
|
flex-wrap: wrap; |
||||
|
overflow: hidden; |
||||
|
overflow-y: auto; |
||||
|
|
||||
|
.el-row{ |
||||
|
margin: 0 !important; |
||||
|
margin-left: -5px !important; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.el-select{ |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.title{ |
||||
|
padding: 10px 0 15px 0; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.moreListPush-btn { |
||||
|
width: 100%; |
||||
|
padding-left: 5px; |
||||
|
color: rgb(64, 158, 255); |
||||
|
|
||||
|
span { |
||||
|
cursor: pointer; |
||||
|
|
||||
|
&:hover { |
||||
|
color: blue; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.moreListBaseBts{ |
||||
|
padding: 20px 0; |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,89 @@ |
|||||
|
.searchOverallComponent{ |
||||
|
height: 0; |
||||
|
transition:all 0.5s; |
||||
|
z-index: 1; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
.border-outer{ |
||||
|
position: relative; |
||||
|
background: #f8f9fb; |
||||
|
padding: 10px 20px 0; |
||||
|
border: #eff0f2 solid 1px; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
|
||||
|
.fullPageCover{ |
||||
|
position: absolute; |
||||
|
background: rgba(255, 255, 255, 0.2); |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
// height: calc(100vh - 200px); |
||||
|
cursor: no-drop; |
||||
|
} |
||||
|
|
||||
|
.moreListOuter{ |
||||
|
margin-top: 10px; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
::v-deep .navFilter { |
||||
|
// display: flex; |
||||
|
// flex-direction: column; |
||||
|
// width: 100%; |
||||
|
// height: 100%; |
||||
|
max-height: var(--navFilterMaxHeight); |
||||
|
overflow: auto; |
||||
|
|
||||
|
.el-form { |
||||
|
// flex: 1; |
||||
|
// padding-left: 100px; |
||||
|
// padding-right: 100px; |
||||
|
display: flex; |
||||
|
align-content: flex-start; |
||||
|
flex-wrap: wrap; |
||||
|
overflow: hidden; |
||||
|
overflow-y: auto; |
||||
|
|
||||
|
.el-row{ |
||||
|
margin: 0 !important; |
||||
|
margin-left: -5px !important; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.el-select{ |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.title{ |
||||
|
padding: 10px 0 15px 0; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.buttonsContent{ |
||||
|
justify-content: space-between; |
||||
|
display: flex; |
||||
|
padding-bottom: 20px; |
||||
|
width: 890px; |
||||
|
} |
||||
|
// .moreListPush-btn { |
||||
|
// width: 100%; |
||||
|
// padding-left: 5px; |
||||
|
// color: rgb(64, 158, 255); |
||||
|
|
||||
|
// span { |
||||
|
// cursor: pointer; |
||||
|
|
||||
|
// &:hover { |
||||
|
// color: blue; |
||||
|
// } |
||||
|
// } |
||||
|
// } |
||||
|
|
||||
|
// .moreListBaseBts{ |
||||
|
// padding: 20px 0; |
||||
|
// } |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,336 @@ |
|||||
|
<template> |
||||
|
<!-- 组件功能：搜索页面，filterSelect后面放大镜页面 --> |
||||
|
<el-dialog |
||||
|
class="searchPageComponents" |
||||
|
:title="formTitle" |
||||
|
v-if="displayDialog" |
||||
|
:visible="true" |
||||
|
:fullscreen="true" |
||||
|
:modal="false" |
||||
|
:modal-append-to-body="false" |
||||
|
:show-close="false" |
||||
|
> |
||||
|
<div class="searchDialog"> |
||||
|
<div class="searchSXButton"> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
icon="el-icon-finished" |
||||
|
size="mini" |
||||
|
@click="handleSubmit" |
||||
|
style="width:180px" |
||||
|
>筛选 |
||||
|
</el-button> |
||||
|
</div> |
||||
|
<umyTable |
||||
|
ref="searchTable" |
||||
|
:tableLoading="tableLoading" |
||||
|
:tableData="searchTableData" |
||||
|
:selectionTable="selectionTable" |
||||
|
:tableColumns="searchTableColumns | DialogTable" |
||||
|
:setUTableHeight="setUTableHeight" |
||||
|
@handleSelectionChange="prepareFormData" |
||||
|
></umyTable> |
||||
|
<pagination |
||||
|
:totalCount="searchTotalCount" |
||||
|
:pagesizeProps="supplierItemPage.MaxResultCount" |
||||
|
@SizeChange="SizeChange" |
||||
|
@CurrentChange="CurrentChange" |
||||
|
></pagination> |
||||
|
<div class="formButton"> |
||||
|
<currenButton |
||||
|
:buttonsAllIsRight="buttonsAllIsRight" |
||||
|
:Butttondata="editHandle" |
||||
|
@tableButtonClick="tableButtonClick" |
||||
|
></currenButton> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="filterPage" v-if="modal"> |
||||
|
<!-- 筛选 --> |
||||
|
<conditionFilters |
||||
|
:displayDialog="dialog" |
||||
|
:screenData="screenData" |
||||
|
:tableColumns="searchTableColumns" |
||||
|
@screenFormClick="screenFormClick" |
||||
|
@screenDelete="screenDelete" |
||||
|
@screenPush="screenPush" |
||||
|
:filterActionOptions="filterActionOptions" |
||||
|
></conditionFilters> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
props: { |
||||
|
//是否需要遮罩层 |
||||
|
// modal: { |
||||
|
// type: Boolean, |
||||
|
// default: () => { |
||||
|
// return true |
||||
|
// } |
||||
|
// }, |
||||
|
//loading |
||||
|
tableLoading: { |
||||
|
type: Boolean, |
||||
|
default: () => { |
||||
|
return false |
||||
|
} |
||||
|
}, |
||||
|
// 已app-main高度为100% 需要减掉的高度 |
||||
|
setUTableHeight: { |
||||
|
type: Number, |
||||
|
default: () => { |
||||
|
return 220; |
||||
|
} |
||||
|
}, |
||||
|
// 按钮整体靠右 |
||||
|
buttonsAllIsRight:{ |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
//名称 |
||||
|
formTitle: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
//是否弹窗 |
||||
|
displayDialog: { |
||||
|
type: Boolean, |
||||
|
default: () => { |
||||
|
return false |
||||
|
} |
||||
|
}, |
||||
|
//Table表头数据 |
||||
|
searchTableData: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
//Table表身绑定 |
||||
|
searchTableColumns: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
//Table总数 |
||||
|
searchTotalCount: { |
||||
|
type: Number, |
||||
|
default: () => { |
||||
|
return 0 |
||||
|
} |
||||
|
}, |
||||
|
//Table每页显示数量 |
||||
|
supplierItemPage: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return { |
||||
|
MaxResultCount: 20, |
||||
|
SkipCount: 0 |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
//Table选中数据 |
||||
|
selectionTable: { |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
//Table是否支持多选 |
||||
|
isMoreSelectTable: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
// 筛选条件自定义（等于/不等于/大于/小于等数据） |
||||
|
filterActionOptions:{ |
||||
|
type: Array, |
||||
|
default: null |
||||
|
}, |
||||
|
//确认筛选后续操作 |
||||
|
advancedFilter: { |
||||
|
type: Function, |
||||
|
default: () => { |
||||
|
return () => { |
||||
|
return {} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
//初始化筛选数据 |
||||
|
filterPageListParams: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
editHandle: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [ |
||||
|
{ label: "取消", name: "cancel" }, |
||||
|
{ label: "确定", type: "primary", name: "determine" }, |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
modal: false, |
||||
|
dialog: { |
||||
|
screenDialog: false |
||||
|
}, |
||||
|
//筛选 |
||||
|
screenData: { |
||||
|
filters: [{ |
||||
|
logic: "And", |
||||
|
column: "", |
||||
|
action: "==", |
||||
|
value: "" |
||||
|
}] |
||||
|
}, |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
//table选择当前行数据 |
||||
|
prepareFormData (val) { |
||||
|
this.$parent.isMoreSelectTable = this.isMoreSelectTable |
||||
|
this.$emit('handleSelectionChange', val) |
||||
|
}, |
||||
|
//改变每页最大数 |
||||
|
SizeChange (val) { |
||||
|
this.$emit('SizeChange', val) |
||||
|
}, |
||||
|
//改变当前页 |
||||
|
CurrentChange (val) { |
||||
|
this.$emit('CurrentChange', val) |
||||
|
}, |
||||
|
//table按钮点击事件 |
||||
|
tableButtonClick (val) { |
||||
|
this.$emit('tableButtonClick', val, this.$refs.searchTable) |
||||
|
}, |
||||
|
//点击筛选按钮 |
||||
|
handleSubmit () { |
||||
|
let filter = JSON.parse(JSON.stringify(this.filterPageListParams)) |
||||
|
let newFilter = this.supplierItemPage.condition.filters |
||||
|
this.dialog.screenDialog = true |
||||
|
this.screenData.filters = [] |
||||
|
if (newFilter.length != 0) { |
||||
|
filter.forEach((element, index) => { |
||||
|
newFilter[index].hide = true |
||||
|
}); |
||||
|
this.screenData.filters.push(...newFilter) |
||||
|
} else { |
||||
|
let data = [{ |
||||
|
logic: "And", |
||||
|
column: "", |
||||
|
action: "==", |
||||
|
value: "" |
||||
|
}] |
||||
|
this.screenData.filters = data |
||||
|
} |
||||
|
this.$emit('sxBtnClickHandle',this.screenData.filters) |
||||
|
this.modal = true |
||||
|
}, |
||||
|
// 设置this.screenData.filters的值 |
||||
|
setScreenDataFilters (data){ |
||||
|
this.screenData.filters = data |
||||
|
}, |
||||
|
//筛选 |
||||
|
screenFormClick (val) { |
||||
|
let filter = JSON.parse(JSON.stringify(this.filterPageListParams)) |
||||
|
if (val[0] == 0) { |
||||
|
if (filter.length != 0) { |
||||
|
this.supplierItemPage.condition.filters = filter |
||||
|
} else { |
||||
|
this.supplierItemPage.condition.filters = [] |
||||
|
} |
||||
|
this.dialog.screenDialog = false; |
||||
|
this.advancedFilter() |
||||
|
} else if (val[0] == 1) { |
||||
|
val[1].clearValidate() |
||||
|
this.dialog.screenDialog = false; |
||||
|
} else { |
||||
|
val[1].validate((valid, newFilter) => { |
||||
|
if (valid) { |
||||
|
this.supplierItemPage.condition.filters = [] |
||||
|
this.screenData.filters.forEach((element, index) => { |
||||
|
this.supplierItemPage.condition.filters.push(element) |
||||
|
}) |
||||
|
this.dialog.screenDialog = false; |
||||
|
this.advancedFilter() |
||||
|
} else { |
||||
|
this.$errorMsg('请按照提示继续操作') |
||||
|
return false; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
this.modal = false |
||||
|
}, |
||||
|
//添加筛选条件 |
||||
|
screenPush () { |
||||
|
let data = { |
||||
|
logic: "And", |
||||
|
column: "", |
||||
|
action: "==", |
||||
|
value: "" |
||||
|
} |
||||
|
// if (this.screenData.filters.length <= this.searchTableColumns.length) { |
||||
|
this.screenData.filters.push(data) |
||||
|
// } else { |
||||
|
// this.$errorMsg('筛选条件数不足！') |
||||
|
// } |
||||
|
}, |
||||
|
//删除筛选条件 |
||||
|
screenDelete (val) { |
||||
|
if (this.screenData.filters.length == 1) { |
||||
|
this.$warningMsg('必须保留一条筛选条件！') |
||||
|
} else { |
||||
|
this.$confirm('您确定删除吗, 是否继续?', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
this.screenData.filters.splice(val, 1) |
||||
|
}).catch((err) => { |
||||
|
console.log(err) |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.searchPageComponents { |
||||
|
.el-dialog__body{ |
||||
|
height: calc(100% - 55px) !important; |
||||
|
padding: 0 20px; |
||||
|
} |
||||
|
.currenButton{ |
||||
|
padding: 0; |
||||
|
} |
||||
|
.searchDialog{ |
||||
|
height: 100%; |
||||
|
} |
||||
|
.pagination{ |
||||
|
padding: 30px 10px 20px 10px; |
||||
|
} |
||||
|
.formButton{ |
||||
|
padding-top: 0 !important; |
||||
|
} |
||||
|
.el-dialog__header{ |
||||
|
padding-top: 10px; |
||||
|
} |
||||
|
.currenButton .el-button{ |
||||
|
margin: 0; |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
<style lang="scss" scoped> |
||||
|
.searchSXButton { |
||||
|
padding-bottom: 10px |
||||
|
} |
||||
|
.el-dialog__wrapper{ |
||||
|
position: absolute !important; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,242 @@ |
|||||
|
<template> |
||||
|
<!-- 普通筛选：列表点击筛选下的普通筛选 --> |
||||
|
<div class="searchPrimaryComponent" > |
||||
|
<!-- @submit.native.prevent 阻止form只有一个input输入框回车触发提交事件 --> |
||||
|
<el-form |
||||
|
class="searchPrimaryForm" |
||||
|
ref="searchPrimaryForm" |
||||
|
:size="primarySearchSize" |
||||
|
:inline="true" |
||||
|
:model="primarySearchData_inner" |
||||
|
@submit.native.prevent |
||||
|
> |
||||
|
<el-form-item |
||||
|
v-for="(item, index) in primarySearchOption" |
||||
|
:key="index" |
||||
|
:label="item.label" |
||||
|
:prop="item.showProp ? item.prop + '.' + item.showProp : item.prop" |
||||
|
v-show="!item.hide ? true : false" |
||||
|
> |
||||
|
<!-- type === 'input' 输入框 onkeyup: 正则表达式，用于前端输入校验工作--> |
||||
|
<el-input |
||||
|
v-if="item.type === 'input'" |
||||
|
v-model="primarySearchData_inner[item.prop]" |
||||
|
:maxlength="item.maxlength" |
||||
|
:onkeyup="item.onkeyup" |
||||
|
:clearable="!item.noClearable" |
||||
|
:disabled="Boolean(item.disabled)" |
||||
|
:placeholder="item.placeholder || '请输入' + item.label" |
||||
|
:prefix-icon="item.icon" |
||||
|
:show-password="item.showPassword" |
||||
|
></el-input> |
||||
|
<!-- item.type === 'select' 下拉框 --> |
||||
|
<el-select |
||||
|
v-if="item.type === 'select'" |
||||
|
v-model="primarySearchData_inner[item.prop]" |
||||
|
:clearable="!item.noClearable" |
||||
|
:multiple="item.multiple" |
||||
|
:disabled="Boolean(item.disabled)" |
||||
|
:filterable="item.filterable" |
||||
|
:allow-create="item.allowCreate" |
||||
|
:placeholder="item.placeholder || '请输入' + item.label" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="(op, index) in selectOptions(item.options) || |
||||
|
item.userOptions" |
||||
|
:label="op[item.optionsLabel] || op.label" |
||||
|
:value="op[item.optionsValue] || op.value" |
||||
|
:key="index" |
||||
|
></el-option> |
||||
|
</el-select> |
||||
|
<!-- item.type === 'date' 日期 --> |
||||
|
<el-date-picker |
||||
|
v-if="item.type === 'date'" |
||||
|
v-model="primarySearchData_inner[item.prop]" |
||||
|
:disabled="Boolean(item.disabled)" |
||||
|
:placeholder="item.placeholder || '选择日期'" |
||||
|
value-format="yyyy-MM-dd" |
||||
|
></el-date-picker> |
||||
|
<!-- item.type === 'time' 时间 --> |
||||
|
<el-time-picker |
||||
|
v-if="item.type === 'time'" |
||||
|
v-model="primarySearchData_inner[item.prop]" |
||||
|
:placeholder="item.placeholder || '选择时间'" |
||||
|
:picker-options="{ |
||||
|
selectableRange: '00:00:00 - 23:59:00', |
||||
|
}" |
||||
|
:disabled="Boolean(item.disabled)" |
||||
|
format="HH:mm" |
||||
|
value-format="HH:mm" |
||||
|
></el-time-picker> |
||||
|
<!-- item.type === 'dateTime' 日期时间 --> |
||||
|
<el-date-picker |
||||
|
v-if="item.type === 'dateTime'" |
||||
|
type="datetime" |
||||
|
v-model="primarySearchData_inner[item.prop]" |
||||
|
:placeholder="item.placeholder || '选择日期时间'" |
||||
|
format="yyyy-MM-dd HH:mm:ss" |
||||
|
value-format="yyyy-MM-ddTHH:mm:ss" |
||||
|
:disabled="Boolean(item.disabled)" |
||||
|
></el-date-picker> |
||||
|
<!-- item.type === 'dateTimelimit' 日期时间 日期有限制 选择范围：当前天及以后--> |
||||
|
<el-date-picker |
||||
|
v-if="item.type === 'dateTimelimit'" |
||||
|
type="datetime" |
||||
|
v-model="primarySearchData_inner[item.prop]" |
||||
|
:placeholder="item.placeholder || '选择日期时间'" |
||||
|
format="yyyy-MM-dd HH:mm:ss" |
||||
|
value-format="yyyy-MM-ddTHH:mm:ss" |
||||
|
:disabled="Boolean(item.disabled)" |
||||
|
:pickerOptions="endDateTimeLimitPickerOptions()" |
||||
|
></el-date-picker> |
||||
|
</el-form-item> |
||||
|
<!-- 自定义插槽 --> |
||||
|
<slot></slot> |
||||
|
<!-- 基础按钮 --> |
||||
|
<el-form-item v-if="showBaseButton" class="el-form-item__buttonbox"> |
||||
|
<el-button |
||||
|
v-for="(item,index) in baseButton" |
||||
|
:key="index" |
||||
|
:type="item.type" |
||||
|
:size="primarySearchSize" |
||||
|
@click="primarySearchBaseHandle(item)" |
||||
|
>{{item.label}}</el-button> |
||||
|
</el-form-item> |
||||
|
<!-- 自定义按钮 --> |
||||
|
<el-form-item |
||||
|
class="el-form-item__buttonbox" |
||||
|
v-for="(item,index) in primarySearchButton" |
||||
|
:key="item.name + '' + index" |
||||
|
> |
||||
|
<el-button |
||||
|
:type="item.type" |
||||
|
:size="item.size || primarySearchSize" |
||||
|
@click="primarySearchButtonClick(item)" |
||||
|
:icon="item.iconRight ? '' : item.icon" |
||||
|
> |
||||
|
{{ item.label }} |
||||
|
<!-- 自定义右侧图标 --> |
||||
|
<i |
||||
|
style="margin-left:0" |
||||
|
v-if="item.iconRight" |
||||
|
:class="['el-icon--right',item.icon]" |
||||
|
></i> |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
name: "searchPrimaryComponent", |
||||
|
props: { |
||||
|
// 查询表单配置（@utils/primarySearchOption/index.js） |
||||
|
primarySearchOption: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return []; |
||||
|
}, |
||||
|
}, |
||||
|
// 是否显示基础按钮（查询、重置） |
||||
|
showBaseButton:{ |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
// 查询表单自定义按钮（业务线页面内定义） |
||||
|
primarySearchButton: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
// 最初记录的值，（用于普通筛选自带默认值） |
||||
|
initialPrimarySearchData:null, |
||||
|
// 绑定的值 |
||||
|
primarySearchData_inner:{}, |
||||
|
// 初级筛选内容大小 |
||||
|
primarySearchSize:'medium', |
||||
|
// 默认基础按钮配置（同【高级筛选】等按钮，与初级筛选内部无关，属于自定义按钮，在primarySearchButton中配置） |
||||
|
baseButton:[ |
||||
|
{label:"搜索",name:"search",type: "primary"}, |
||||
|
{label:"重置",name:"reset"}, |
||||
|
], |
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
// 日期时间组件，选择范围：当前天及以后 |
||||
|
endDateTimeLimitPickerOptions() { |
||||
|
return function () { |
||||
|
return { |
||||
|
disabledDate(time) { |
||||
|
return ( |
||||
|
time.getTime() < Date.now() - 8.64e7 |
||||
|
); |
||||
|
}, |
||||
|
}; |
||||
|
}; |
||||
|
}, |
||||
|
// 获取statu.js中配置的options |
||||
|
selectOptions() { |
||||
|
return (val) => { |
||||
|
if (val) { |
||||
|
let options = this.$staticOptions[val]; |
||||
|
if (options) { |
||||
|
return options(); |
||||
|
} else { |
||||
|
return []; |
||||
|
} |
||||
|
} else { |
||||
|
return false; |
||||
|
} |
||||
|
}; |
||||
|
}, |
||||
|
}, |
||||
|
created(){ |
||||
|
// 默认设置值 initialPrimarySearchData + primarySearchData_inner |
||||
|
this.initialPrimarySearchData = {} |
||||
|
this.primarySearchOption.forEach(item => { |
||||
|
this.initialPrimarySearchData[item.prop] = item.value || null |
||||
|
}) |
||||
|
this.setPrimarySearchData(this.initialPrimarySearchData) |
||||
|
}, |
||||
|
methods: { |
||||
|
// 基础按钮操作 |
||||
|
primarySearchBaseHandle(item){ |
||||
|
this.$emit("primarySearchBaseHandle", item,this.primarySearchData_inner, this.primarySearchOption, this ) |
||||
|
}, |
||||
|
// 重置数据（单纯节点显示数据，不重新查询接口） |
||||
|
resetPrimarySearchData(){ |
||||
|
this.primarySearchData_inner = JSON.parse(JSON.stringify(this.initialPrimarySearchData)) |
||||
|
}, |
||||
|
// 获取普通搜索数据值 |
||||
|
getPrimarySearchData(){ |
||||
|
return this.primarySearchData_inner |
||||
|
}, |
||||
|
// 设置普通搜索数据值 |
||||
|
setPrimarySearchData(data){ |
||||
|
this.primarySearchData_inner = JSON.parse(JSON.stringify(data)) |
||||
|
}, |
||||
|
// 自定义按钮点击事件 |
||||
|
primarySearchButtonClick(item){ |
||||
|
this.$emit("primarySearchButtonClick", item,this.primarySearchData_inner, this.primarySearchOption,this) |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.searchPrimaryComponent{ |
||||
|
.el-input{ |
||||
|
width: auto !important; |
||||
|
} |
||||
|
.el-form-item{ |
||||
|
margin-bottom: 10px !important; |
||||
|
|
||||
|
&:not(.el-form-item__buttonbox){ |
||||
|
margin-right: 30px !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,284 @@ |
|||||
|
<template> |
||||
|
<!-- 组件功能：查看json及复制 --> |
||||
|
<div class="showCopyJsonPop"> |
||||
|
|
||||
|
<!-- 点开查看Json转换后table弹窗 --> |
||||
|
<el-dialog |
||||
|
top="50px" |
||||
|
:visible.sync="JsonTableShow" |
||||
|
:modal-append-to-body="true" |
||||
|
:append-to-body="true" |
||||
|
:show-close="true" |
||||
|
:close-on-click-modal="true" |
||||
|
:close-on-press-escape="true" |
||||
|
width="90%" |
||||
|
@close="closePop" |
||||
|
> |
||||
|
<template #title> |
||||
|
内容详情 |
||||
|
<el-button |
||||
|
size="mini" |
||||
|
@click="copyJsonHandle()" |
||||
|
type="primary" |
||||
|
style="margin-right: 30px;float: right;" |
||||
|
>复制JSON</el-button> |
||||
|
</template> |
||||
|
<el-table |
||||
|
height="calc(100vh - 220px)" |
||||
|
:data="JsonTableData" |
||||
|
:border="true" |
||||
|
style="width: 100%"> |
||||
|
<el-table-column |
||||
|
prop="name" |
||||
|
width="220" |
||||
|
label="属性" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
{{ scope.row.name }} |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
v-if="(scope.row.name).toUpperCase() == 'DETAILS'" |
||||
|
size="mini" |
||||
|
style="margin-left: 20px;" |
||||
|
@click="showDetailTableHandle(scope.row)" |
||||
|
>查看详情</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
label="值" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<!-- DETAILS todo:DETAILS判断条件需要优化，使用传参的方式 --> |
||||
|
<span v-if="(scope.row.name).toUpperCase() != 'DETAILS'">{{scope.row.value}}</span> |
||||
|
<el-table |
||||
|
v-else |
||||
|
:data="scope.row.value" |
||||
|
stripe |
||||
|
:border="true" |
||||
|
style="width: 100%" |
||||
|
height="300" |
||||
|
> |
||||
|
<el-table-column |
||||
|
label="序号" |
||||
|
fixed="left" |
||||
|
type="index" |
||||
|
width="50"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
v-for="(head,h_key) in detailTableHeader" |
||||
|
:key="h_key" |
||||
|
min-width="120" |
||||
|
> |
||||
|
<template #header> |
||||
|
<span :title="head">{{ head }}</span> |
||||
|
</template> |
||||
|
<template slot-scope="scope2"> |
||||
|
<div v-if="typeof scope2.row[head] == 'object'"> |
||||
|
<div v-for="(o,o_key) in scope2.row[head]"> |
||||
|
{{ o_key }}：{{ o }} |
||||
|
<div style="border-bottom: dashed 1px #ddd;"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div v-else>{{ scope2.row[head] }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<!-- json复制内容弹窗 --> |
||||
|
<el-dialog |
||||
|
top="50px" |
||||
|
:visible.sync="JsonCopyShow" |
||||
|
:modal-append-to-body="false" |
||||
|
:append-to-body="true" |
||||
|
:show-close="true" |
||||
|
:close-on-click-modal="true" |
||||
|
:close-on-press-escape="true" |
||||
|
:title="'JSON详情'" |
||||
|
> |
||||
|
<el-input |
||||
|
class="copyJsonTextarea" |
||||
|
ref="copyJsonTextarea_ref" |
||||
|
type="textarea" |
||||
|
readonly |
||||
|
autosize |
||||
|
resize="none" |
||||
|
v-model="JsonCopyData" |
||||
|
></el-input> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<!-- details的table --> |
||||
|
<el-dialog |
||||
|
top="80px" |
||||
|
width="86%" |
||||
|
v-if="detailTableRow" |
||||
|
:visible.sync="detailsTableShow" |
||||
|
:modal-append-to-body="true" |
||||
|
:append-to-body="true" |
||||
|
:show-close="true" |
||||
|
:close-on-click-modal="true" |
||||
|
:close-on-press-escape="true" |
||||
|
:title="detailTableRow.name+' 详情'" |
||||
|
> |
||||
|
<!-- row-key 默认不处理，解决id可能重复问题，此处没有选择框，可以这么处理 --> |
||||
|
<umyTable |
||||
|
:isShowIndex="true" |
||||
|
:tableBorder="true" |
||||
|
:setUTableHeight="170" |
||||
|
:row-key="null" |
||||
|
:tableData="detailTableRow.value" |
||||
|
:tableColumns="detailTableColumns" |
||||
|
:selectionTable="false" |
||||
|
></umyTable> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { LoadingMixins } from "@/mixins/LoadingMixins"; |
||||
|
import { tableMixins } from "@/mixins/TableMixins" |
||||
|
export default { |
||||
|
name:"showCopyJsonPop", |
||||
|
mixins:[ LoadingMixins,tableMixins ], |
||||
|
props: { |
||||
|
// Json数据 |
||||
|
JsonData:{ |
||||
|
type: Object, |
||||
|
default: null, |
||||
|
}, |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
JsonTableShow:true,//点开查看Json转换后table弹窗 |
||||
|
JsonTableData:null,//表格转义的json数据 |
||||
|
JsonCopyData:null,//复制的Json字符串 |
||||
|
JsonCopyShow:false,//复制json的Dialog显隐控制 |
||||
|
detailTableHeader:null,//details表格的Header |
||||
|
detailTableRow:null,//details的相关信息 |
||||
|
detailsTableShow:false,//details的详情 |
||||
|
detailTableColumns:false,//details的详情header表头 |
||||
|
} |
||||
|
}, |
||||
|
mounted(){ |
||||
|
this.initJsonData() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 关闭整个弹窗 |
||||
|
closePop() { |
||||
|
this.JsonTableShow = false |
||||
|
this.$emit("closePop") |
||||
|
}, |
||||
|
// json数据转义 |
||||
|
initJsonData(){ |
||||
|
let _arr = [] |
||||
|
let __initJson = (data) => { |
||||
|
let _init = [] |
||||
|
for(let item in data){ |
||||
|
_init.push({name:item,value:data[item]}) |
||||
|
} |
||||
|
return _init |
||||
|
} |
||||
|
let _json = this.JsonData |
||||
|
for(let item in _json){ |
||||
|
// 直接输出 |
||||
|
if(!_json[item]){ |
||||
|
_arr.push({name:item,value:_json[item]}) |
||||
|
}else{ |
||||
|
if(typeof _json[item] != 'object'){ |
||||
|
_arr.push({name:item,value:_json[item] + ""}) |
||||
|
}else{ |
||||
|
// 如果是数组 |
||||
|
if(Array.isArray(_json[item])){ |
||||
|
// 如果是 DETAILS todo:DETAILS判断条件需要优化，使用传参的方式 |
||||
|
// let _value = (item).toUpperCase() == 'DETAILS' ? __initJson(_json[item][0]) : (_json[item]).join(",") |
||||
|
this.detailTableHeader = [] |
||||
|
for(let h in _json[item][0]){ |
||||
|
this.detailTableHeader.push(h) |
||||
|
} |
||||
|
let _value = (item).toUpperCase() == 'DETAILS' ? _json[item] : (_json[item]).join(",") |
||||
|
_arr.push({name:item,value:_value}) |
||||
|
} |
||||
|
// 如果是对象 |
||||
|
else{ |
||||
|
let _obj_arr = __initJson(_json[item]) |
||||
|
// 对象有数据 |
||||
|
if(_obj_arr.length > 0){ |
||||
|
_arr = [..._obj_arr] |
||||
|
}else{ |
||||
|
// 空对象 |
||||
|
_arr.push({name:item,value:""}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
this.JsonTableData = _arr |
||||
|
this.JsonCopyData = JSON.stringify(_json, null, '\t')//复制使用 |
||||
|
}, |
||||
|
// 复制后选择框处理 |
||||
|
copyJsonInputHandle(type){ |
||||
|
if(type == 'error')this.$message.error('复制失败'); |
||||
|
if(type == 'success')this.$message.success('复制成功'); |
||||
|
if(this.$refs.copyJsonTextarea_ref){ |
||||
|
this.$refs.copyJsonTextarea_ref.focus() |
||||
|
this.$refs.copyJsonTextarea_ref.$refs.textarea.scrollTop = 0 |
||||
|
} |
||||
|
}, |
||||
|
// 复制Json按钮 |
||||
|
copyJsonHandle(){ |
||||
|
this.JsonCopyShow = true |
||||
|
if (navigator.clipboard && window.isSecureContext) { |
||||
|
navigator.clipboard.writeText(this.JsonCopyData) |
||||
|
.then(() => { |
||||
|
this.copyJsonInputHandle('success') |
||||
|
}) |
||||
|
.catch(err => { |
||||
|
this.copyJsonInputHandle('error') |
||||
|
}); |
||||
|
}else { |
||||
|
// 创建text area |
||||
|
const textArea = document.createElement('textarea') |
||||
|
textArea.value = this.JsonCopyData |
||||
|
// 使text area不在viewport，同时设置不可见 |
||||
|
document.body.appendChild(textArea) |
||||
|
textArea.focus() |
||||
|
textArea.select() |
||||
|
return new Promise((resolve, reject) => { |
||||
|
// 执行复制命令并移除文本框 |
||||
|
document.execCommand('copy') ? resolve() : reject(new Error('出错了')) |
||||
|
textArea.remove() |
||||
|
}).then(() => { |
||||
|
this.$nextTick(()=>{ |
||||
|
this.copyJsonInputHandle('success') |
||||
|
}) |
||||
|
},() => { |
||||
|
this.copyJsonInputHandle('error') |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
// detail的table详情 |
||||
|
showDetailTableHandle(row){ |
||||
|
this.detailTableRow = row |
||||
|
this.detailTableColumns = [] |
||||
|
this.detailTableHeader.forEach(item=>{ |
||||
|
this.detailTableColumns.push({ |
||||
|
prop:item, |
||||
|
label:item |
||||
|
}) |
||||
|
}) |
||||
|
this.detailsTableShow = true |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
::v-deep .copyJsonTextarea{ |
||||
|
textarea{ |
||||
|
max-height: calc(100vh - 220px) !important; |
||||
|
overflow: auto !important; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,402 @@ |
|||||
|
<template> |
||||
|
<div class="tablePagination"> |
||||
|
<!-- 头部按钮 --> |
||||
|
<div class="table-nav"> |
||||
|
<curren-Button |
||||
|
ref="tablePagination_topNav" |
||||
|
:Butttondata="currenButtonData" |
||||
|
@tableButtonClick="topbutton" |
||||
|
@quicklySearchClick="quicklySearchClick" |
||||
|
@quicklySearchClear="quicklySearchClear" |
||||
|
:quicklySearchOption="quicklySearchOption" |
||||
|
> |
||||
|
</curren-Button> |
||||
|
<slot name="tableTopSlot"></slot> |
||||
|
</div> |
||||
|
<!-- 全面搜索（普通+高级整合） --> |
||||
|
<searchOverall |
||||
|
ref="searchOverallRef" |
||||
|
:searchOverallCoverHeight="searchOverallCoverHeight" |
||||
|
:showSearchOverall="showSearchOverall" |
||||
|
@getShowSearchOverall="getShowSearchOverall" |
||||
|
:primarySearchOption="primarySearchOption" |
||||
|
:primarySearchButton="primarySearchButton" |
||||
|
:showMoreSearch="showMoreSearch" |
||||
|
:tableColumns="tableColumns" |
||||
|
@overallSearchFormClick="overallSearchFormClick" |
||||
|
:httpOverallSearchData="httpOverallSearchData" |
||||
|
> |
||||
|
<!-- 插槽预留 --> |
||||
|
<slot name="searchPrimarySlot"></slot> |
||||
|
</searchOverall> |
||||
|
<!-- 字段设置弹窗 --> |
||||
|
<rowDrop |
||||
|
@radio="rowDrop" |
||||
|
:tableColumns="tableColumns" |
||||
|
:visible="rowDropVisible" |
||||
|
@closeRowDrop="closeRowDrop" |
||||
|
:source="rowSource" |
||||
|
:innerMaxHeight="rowMaxHeight" |
||||
|
></rowDrop> |
||||
|
<!-- 列表 --> |
||||
|
<div class="uTableOuter" ref="uTableOuterRef" :style="{height:uTableOuterHeight + 'px',overflow:'hidden'}"> |
||||
|
<umyTable |
||||
|
ref="tablePaginationTableRef" |
||||
|
:isUpdate="isUpdate" |
||||
|
:tableLoading="tableLoading" |
||||
|
:tableData="tableData" |
||||
|
:tableColumns="tableColumns | isTableColumns" |
||||
|
:isShowIndex="isShowIndex" |
||||
|
:selectionTable="tableSelection" |
||||
|
:setUTableHeight="setUTableHeight || uTableTopHeight" |
||||
|
@sortChange="sortChange" |
||||
|
@handleSelectionChange="handleSelectionChange" |
||||
|
@inlineDialog="inlineDialog" |
||||
|
:buttonOperationList_left="buttonOperationList_left" |
||||
|
@buttonOperationClick_left="buttonOperationClick_left" |
||||
|
:buttonOperationList_right="buttonOperationList_right" |
||||
|
@buttonOperationClick_right="buttonOperationClick_right" |
||||
|
:tableBorder="true" |
||||
|
:firstFixed="true" |
||||
|
:cellStyle = "cellStyle" |
||||
|
:showOverflowTooltip="showOverflowTooltip" |
||||
|
> |
||||
|
<template> |
||||
|
<slot></slot> |
||||
|
</template> |
||||
|
</umyTable> |
||||
|
</div> |
||||
|
<!-- 页码 --> |
||||
|
<pagination |
||||
|
:totalCount="totalCount" |
||||
|
:pagesizeProps="MaxResultCount" |
||||
|
:currentPageProps="currentPageProps" |
||||
|
@SizeChange="alterResultCount" |
||||
|
@CurrentChange="alertoldSkipCount" |
||||
|
></pagination> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import currenButton from "@/components/currenButton" |
||||
|
import pagination from "@/components/Pagination" |
||||
|
import searchOverall from "@/components/searchOverall" |
||||
|
import rowDrop from "@/components/rowDrop/index.vue" |
||||
|
import { getParentNode } from '@/utils' |
||||
|
export default { |
||||
|
name: 'tablePagination', |
||||
|
components: { |
||||
|
pagination, |
||||
|
currenButton, |
||||
|
searchOverall, |
||||
|
rowDrop |
||||
|
}, |
||||
|
props: { |
||||
|
rowMaxHeight:{ |
||||
|
type:String, |
||||
|
default:'calc(90vh - 280px)' |
||||
|
}, |
||||
|
// 筛选高度 |
||||
|
searchOverallCoverHeight:{ |
||||
|
type: String, |
||||
|
default: 'calc(100vh - 200px)' |
||||
|
}, |
||||
|
// 已app-main高度为100% 需要减掉的高度 |
||||
|
setUTableHeight: { |
||||
|
type: Number, |
||||
|
default: null |
||||
|
}, |
||||
|
// 超出内容是否提示 |
||||
|
showOverflowTooltip:{ |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
// 显示搜索配置 |
||||
|
quicklySearchOption:{ |
||||
|
type: Object, |
||||
|
default: null |
||||
|
}, |
||||
|
// 表格上方头部按钮配置 |
||||
|
currenButtonData: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
// 操作列按钮(左侧) |
||||
|
buttonOperationList_left:{ |
||||
|
type: Array, |
||||
|
default: null, |
||||
|
}, |
||||
|
// 操作列按钮(右侧) |
||||
|
buttonOperationList_right:{ |
||||
|
type: Function, |
||||
|
default: null, |
||||
|
}, |
||||
|
// 列表数据 |
||||
|
tableData: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
// 列表列配置 + 高级筛选配置 |
||||
|
tableColumns: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
// 复选框 |
||||
|
tableSelection: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
// table页码总数 |
||||
|
totalCount: { |
||||
|
type: Number, |
||||
|
default: 0 |
||||
|
}, |
||||
|
// table组件上的loading |
||||
|
tableLoading: { |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
// 页码每页显示数 |
||||
|
MaxResultCount: { |
||||
|
type: Number, |
||||
|
default: 0 |
||||
|
}, |
||||
|
// 页码当前页配置 |
||||
|
currentPageProps: { |
||||
|
type: Number, |
||||
|
default: 1 |
||||
|
}, |
||||
|
// 是否显示序号 |
||||
|
isShowIndex: { |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
// 选择当前行数据 |
||||
|
multipleSelection: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
// 以下为全面筛选组件配置 |
||||
|
//初级筛选绑定表单配置 |
||||
|
primarySearchOption: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
//初级筛选表单自定义按钮 |
||||
|
primarySearchButton: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
// 是否显示高级筛选 |
||||
|
showMoreSearch:{ |
||||
|
type: Boolean, |
||||
|
default: true, |
||||
|
}, |
||||
|
// 当前接口中的筛选数据（用于同步全面筛选的数据） |
||||
|
httpOverallSearchData:{ |
||||
|
type: Object, |
||||
|
default: null |
||||
|
}, |
||||
|
cellStyle: { |
||||
|
type: Function, |
||||
|
default: () => { |
||||
|
return Function; |
||||
|
} |
||||
|
}, |
||||
|
// 字段设置来源（列表、列表-明细、明细页面） |
||||
|
rowSource:{ |
||||
|
type:String, |
||||
|
default:'list_api' |
||||
|
} |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
// 字段设置是否显示 |
||||
|
rowDropVisible: false, |
||||
|
// table 重新渲染所需key |
||||
|
isUpdate: false, |
||||
|
// 除去table的高度 |
||||
|
uTableTopHeight:165, |
||||
|
// table外部高度控制，用于点击筛选动画处理 |
||||
|
uTableOuterHeight:null, |
||||
|
// table外部最初始化高度，用于点击筛选动画处理 |
||||
|
uTableOuterHeight_init:null, |
||||
|
//table操作按钮 |
||||
|
Butttondata: [ |
||||
|
{ |
||||
|
type: 'danger', |
||||
|
icon: 'el-icon-delete', |
||||
|
label: '批量删除', |
||||
|
size: 'mini' |
||||
|
}, |
||||
|
{ |
||||
|
type: 'warning', |
||||
|
icon: 'el-icon-edit', |
||||
|
label: '批量修改状态', |
||||
|
size: 'mini' |
||||
|
}, |
||||
|
{ |
||||
|
type: 'success', |
||||
|
icon: 'el-icon-upload2', |
||||
|
label: '批量导出', |
||||
|
size: 'mini' |
||||
|
}, |
||||
|
{ |
||||
|
type: 'info', |
||||
|
icon: 'el-icon-printer', |
||||
|
label: '批量打印', |
||||
|
size: 'mini' |
||||
|
}, |
||||
|
], |
||||
|
// 全面筛选组件配置 |
||||
|
// 显示全面筛选组件 |
||||
|
showSearchOverall:false, |
||||
|
} |
||||
|
}, |
||||
|
mounted(){ |
||||
|
this.uTableOuterHeight = this.$refs.tablePaginationTableRef.getTableHeight() |
||||
|
this.uTableOuterHeight_init = Number(JSON.stringify(this.uTableOuterHeight)) |
||||
|
|
||||
|
// 点击外部，字段设置弹窗隐藏 |
||||
|
document.addEventListener('click',(e)=>{ |
||||
|
if(!this.rowDropVisible)return |
||||
|
let _class = "rowDropNotHideItem" |
||||
|
let _hasParent = getParentNode(e.target,_class) |
||||
|
let _current_class = e.target._prevClass || e.target.className |
||||
|
let _hasCurrent = _current_class ? String(_current_class).includes(_class) : false |
||||
|
if(!_hasParent && !_hasCurrent){ |
||||
|
this.closeRowDrop() |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
methods: { |
||||
|
rowDrop(data,type) { |
||||
|
this.$emit('rowDrop',data,type) |
||||
|
this.$nextTick(()=>{ |
||||
|
this.isUpdate = !this.isUpdate |
||||
|
}) |
||||
|
}, |
||||
|
//点击常用按钮 |
||||
|
topbutton (val,item) { |
||||
|
// 筛选按钮 + table高度变化 + 动画效果（勿动顺序） |
||||
|
if(val=="filter"){ |
||||
|
this.showSearchOverall = !this.showSearchOverall |
||||
|
// 有普通查询配置 |
||||
|
if(this.primarySearchOption && this.primarySearchOption.length > 0){ |
||||
|
this.$nextTick(()=>{ |
||||
|
let _search_height = this.$refs.searchOverallRef.getSearchPrimaryHeight() |
||||
|
if(this.showSearchOverall){ |
||||
|
let _margin = 20 |
||||
|
this.uTableOuterHeight = this.uTableOuterHeight_init - _search_height - _margin |
||||
|
setTimeout(()=>{ |
||||
|
this.uTableTopHeight += _search_height + _margin |
||||
|
},0) |
||||
|
}else{ |
||||
|
this.uTableOuterHeight = this.uTableOuterHeight_init |
||||
|
setTimeout(()=>{ |
||||
|
this.uTableTopHeight = 165 |
||||
|
},0) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
// 字段设置 |
||||
|
else if (val == 'field') { |
||||
|
this.rowDropVisible = !this.rowDropVisible |
||||
|
} |
||||
|
this.$emit("topbutton", val,item) |
||||
|
}, |
||||
|
// 快速搜索 - 搜索按钮 |
||||
|
quicklySearchClick (val,option) { |
||||
|
this.$emit("quicklySearchClick", val,option,this.$refs.searchOverallRef) |
||||
|
}, |
||||
|
// 快速搜索 - 清除搜索 |
||||
|
quicklySearchClear (val,option) { |
||||
|
// 判断是否有筛选按钮 |
||||
|
let hasSearch = false |
||||
|
this.currenButtonData.forEach(item=>{ |
||||
|
if(item.name == 'filter'){ |
||||
|
hasSearch = true |
||||
|
return |
||||
|
} |
||||
|
}) |
||||
|
this.$emit("quicklySearchClear", val,option,this.$refs.searchOverallRef,hasSearch ) |
||||
|
}, |
||||
|
//接收分页组件emit改变每页最大页数 |
||||
|
alterResultCount (val) { |
||||
|
this.$emit('alterResultCount', val) |
||||
|
}, |
||||
|
//接收分页组件emit改变当前页 |
||||
|
alertoldSkipCount (val) { |
||||
|
this.$emit('alertoldSkipCount', val) |
||||
|
}, |
||||
|
//点击name提交emit打开编辑页面 |
||||
|
inlineDialog (row) { |
||||
|
this.$emit("inlineDialog", row) |
||||
|
}, |
||||
|
//点击selection框 |
||||
|
handleSelectionChange (val) { |
||||
|
this.$emit("handleSelectionChange", val) |
||||
|
}, |
||||
|
//排序 |
||||
|
sortChange (data) { |
||||
|
this.$emit('sortChange', data) |
||||
|
}, |
||||
|
//点击table操作列(左侧)按钮 |
||||
|
buttonOperationClick_left(row, item, index) { |
||||
|
this.$emit("buttonOperationClick_left", row, item, index); |
||||
|
}, |
||||
|
//点击table操作列(右侧)按钮 |
||||
|
buttonOperationClick_right(row, item, index) { |
||||
|
this.$emit("buttonOperationClick_right", row, item, index); |
||||
|
}, |
||||
|
// 全面筛选组件配置 |
||||
|
// 全面筛选组件内部显示/隐藏更改触发，同步当前的showSearchOverall值 |
||||
|
getShowSearchOverall(val){ |
||||
|
this.showSearchOverall = val || false |
||||
|
}, |
||||
|
// 全面筛选组件所有按钮事件 |
||||
|
overallSearchFormClick(options){ |
||||
|
//增加快速搜索实体 |
||||
|
options.vm_quickly = this.$refs.tablePagination_topNav.getQuicklySearchDom() |
||||
|
this.$emit("overallSearchFormClick", options) |
||||
|
}, |
||||
|
// 关闭字段设置 |
||||
|
closeRowDrop() { |
||||
|
this.rowDropVisible = false |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.uTableOuter{ |
||||
|
transition:all 0.5s; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.tablePagination { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background-color: #fff; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.table-nav { |
||||
|
padding-bottom: 15px; |
||||
|
} |
||||
|
|
||||
|
.el-table { |
||||
|
flex: 1; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,464 @@ |
|||||
|
<template> |
||||
|
<div class="tablePagination"> |
||||
|
<!-- 头部按钮 --> |
||||
|
<div class="table-nav"> |
||||
|
<curren-Button |
||||
|
v-if="headerButttondata" |
||||
|
ref="tablePagination_topNav" |
||||
|
:Butttondata="headerButttondata" |
||||
|
@tableButtonClick="topbutton" |
||||
|
@quicklySearchClick="quicklySearchClick" |
||||
|
@quicklySearchClear="quicklySearchClear" |
||||
|
:quicklySearchOption="quicklySearchOption" |
||||
|
> |
||||
|
</curren-Button> |
||||
|
<slot name="tableTopSlot"></slot> |
||||
|
</div> |
||||
|
<!-- 全面搜索（普通+高级整合） --> |
||||
|
<searchOverall |
||||
|
ref="searchOverallRef" |
||||
|
:searchOverallCoverHeight="searchOverallCoverHeight" |
||||
|
:showSearchOverall="showSearchOverall" |
||||
|
@getShowSearchOverall="getShowSearchOverall" |
||||
|
:primarySearchOption="primarySearchOption" |
||||
|
:primarySearchButton="primarySearchButton" |
||||
|
:showMoreSearch="showMoreSearch" |
||||
|
:tableColumns="tableColumns" |
||||
|
@overallSearchFormClick="overallSearchFormClick" |
||||
|
:httpOverallSearchData="httpOverallSearchData" |
||||
|
:selectMaxHeight="selectMaxHeight" |
||||
|
> |
||||
|
<!-- 插槽预留 --> |
||||
|
<slot name="searchPrimarySlot"></slot> |
||||
|
</searchOverall> |
||||
|
<!-- 字段设置弹窗 --> |
||||
|
<rowDrop |
||||
|
@radio="rowDrop" |
||||
|
:tableColumns="tableColumns" |
||||
|
:visible="rowDropVisible" |
||||
|
@closeRowDrop="closeRowDrop" |
||||
|
:source="rowSource" |
||||
|
:innerMaxHeight="rowMaxHeight" |
||||
|
></rowDrop> |
||||
|
<!-- 列表 --> |
||||
|
<div class="uTableOuter" ref="uTableOuterRef" :style="{height:uTableOuterHeight + 'px',overflow:'hidden'}"> |
||||
|
<umyTable |
||||
|
ref="tablePaginationTableRef" |
||||
|
:isUpdate="isUpdate" |
||||
|
:tableLoading="tableLoading" |
||||
|
:tableData="tableData" |
||||
|
:tableColumns="tableColumns | isTableColumns" |
||||
|
:isShowIndex="isShowIndex" |
||||
|
:selectionTable="tableSelection" |
||||
|
:setUTableHeight="uTableTopHeight" |
||||
|
@sortChange="sortChange" |
||||
|
@handleSelectionChange="handleSelectionChange" |
||||
|
@inlineDialog="inlineDialog" |
||||
|
:buttonOperationList_left="buttonOperationList_left" |
||||
|
@buttonOperationClick_left="buttonOperationClick_left" |
||||
|
:buttonOperationList_right="buttonOperationList_right" |
||||
|
@buttonOperationClick_right="buttonOperationClick_right" |
||||
|
:tableBorder="true" |
||||
|
:firstFixed="true" |
||||
|
:cellStyle = "cellStyle" |
||||
|
:showOverflowTooltip="showOverflowTooltip" |
||||
|
> |
||||
|
<template> |
||||
|
<slot></slot> |
||||
|
</template> |
||||
|
</umyTable> |
||||
|
</div> |
||||
|
<!-- 页码 --> |
||||
|
<pagination |
||||
|
:totalCount="totalCount" |
||||
|
:pagesizeProps="MaxResultCount" |
||||
|
:currentPageProps="currentPageProps" |
||||
|
@SizeChange="alterResultCount" |
||||
|
@CurrentChange="alertoldSkipCount" |
||||
|
></pagination> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import currenButton from "@/components/currenButton" |
||||
|
import pagination from "@/components/Pagination" |
||||
|
import searchOverall from "@/components/searchOverall" |
||||
|
import rowDrop from "@/components/rowDrop/index.vue" |
||||
|
import { getParentNode } from '@/utils' |
||||
|
export default { |
||||
|
name: 'tablePagination', |
||||
|
components: { |
||||
|
pagination, |
||||
|
currenButton, |
||||
|
searchOverall, |
||||
|
rowDrop |
||||
|
}, |
||||
|
props: { |
||||
|
// 不使用权限的按钮 |
||||
|
noUsePermissionBtn:{ |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return ['refresh','field','filterForDetail','export','filter']//刷新，字段设置，明细查询，导出，筛选 |
||||
|
} |
||||
|
}, |
||||
|
rowMaxHeight:{ |
||||
|
type:String, |
||||
|
default:'calc(90vh - 280px)' |
||||
|
}, |
||||
|
// 筛选条件最大高度 |
||||
|
selectMaxHeight:{ |
||||
|
type: String, |
||||
|
default: '174px' |
||||
|
}, |
||||
|
// 筛选高度 |
||||
|
searchOverallCoverHeight:{ |
||||
|
type: String, |
||||
|
default: 'calc(100vh - 200px)' |
||||
|
}, |
||||
|
// 已app-main高度为100% 需要减掉的高度 |
||||
|
setUTableHeight: { |
||||
|
type: Number, |
||||
|
default: null |
||||
|
}, |
||||
|
// 超出内容是否提示 |
||||
|
showOverflowTooltip:{ |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
// 显示搜索配置 |
||||
|
quicklySearchOption:{ |
||||
|
type: Object, |
||||
|
default: null |
||||
|
}, |
||||
|
// 表格上方头部按钮配置 |
||||
|
currenButtonData: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
// 操作列按钮(左侧) |
||||
|
buttonOperationList_left:{ |
||||
|
type: Array, |
||||
|
default: null, |
||||
|
}, |
||||
|
// 操作列按钮(右侧) |
||||
|
buttonOperationList_right:{ |
||||
|
type: Function, |
||||
|
default: null, |
||||
|
}, |
||||
|
// 列表数据 |
||||
|
tableData: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
// 列表列配置 + 高级筛选配置 |
||||
|
tableColumns: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
// 复选框 |
||||
|
tableSelection: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
// table页码总数 |
||||
|
totalCount: { |
||||
|
type: Number, |
||||
|
default: 0 |
||||
|
}, |
||||
|
// table组件上的loading |
||||
|
tableLoading: { |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
// 页码每页显示数 |
||||
|
MaxResultCount: { |
||||
|
type: Number, |
||||
|
default: 0 |
||||
|
}, |
||||
|
// 页码当前页配置 |
||||
|
currentPageProps: { |
||||
|
type: Number, |
||||
|
default: 1 |
||||
|
}, |
||||
|
// 是否显示序号 |
||||
|
isShowIndex: { |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
// 选择当前行数据 |
||||
|
multipleSelection: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
// 以下为全面筛选组件配置 |
||||
|
//初级筛选绑定表单配置 |
||||
|
primarySearchOption: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
//初级筛选表单自定义按钮 |
||||
|
primarySearchButton: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
// 是否显示高级筛选 |
||||
|
showMoreSearch:{ |
||||
|
type: Boolean, |
||||
|
default: true, |
||||
|
}, |
||||
|
// 当前接口中的筛选数据（用于同步全面筛选的数据） |
||||
|
httpOverallSearchData:{ |
||||
|
type: Object, |
||||
|
default: null |
||||
|
}, |
||||
|
cellStyle: { |
||||
|
type: Function, |
||||
|
default: () => { |
||||
|
return Function; |
||||
|
} |
||||
|
}, |
||||
|
// 字段设置来源（列表、列表-明细、明细页面） |
||||
|
rowSource:{ |
||||
|
type:String, |
||||
|
default:'list_api' |
||||
|
} |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
headerButttondata:null, |
||||
|
// 字段设置是否显示 |
||||
|
rowDropVisible: false, |
||||
|
// table 重新渲染所需key |
||||
|
isUpdate: false, |
||||
|
appRemoveHeight:165, |
||||
|
// 除去table的高度 |
||||
|
uTableTopHeight:165, |
||||
|
// table外部高度控制，用于点击筛选动画处理 |
||||
|
uTableOuterHeight:null, |
||||
|
// table外部最初始化高度，用于点击筛选动画处理 |
||||
|
uTableOuterHeight_init:null, |
||||
|
//table操作按钮 |
||||
|
Butttondata: [ |
||||
|
{ |
||||
|
type: 'danger', |
||||
|
icon: 'el-icon-delete', |
||||
|
label: '批量删除', |
||||
|
size: 'mini' |
||||
|
}, |
||||
|
{ |
||||
|
type: 'warning', |
||||
|
icon: 'el-icon-edit', |
||||
|
label: '批量修改状态', |
||||
|
size: 'mini' |
||||
|
}, |
||||
|
{ |
||||
|
type: 'success', |
||||
|
icon: 'el-icon-upload2', |
||||
|
label: '批量导出', |
||||
|
size: 'mini' |
||||
|
}, |
||||
|
{ |
||||
|
type: 'info', |
||||
|
icon: 'el-icon-printer', |
||||
|
label: '批量打印', |
||||
|
size: 'mini' |
||||
|
}, |
||||
|
], |
||||
|
// 全面筛选组件配置 |
||||
|
// 显示全面筛选组件 |
||||
|
showSearchOverall:false, |
||||
|
} |
||||
|
}, |
||||
|
mounted(){ |
||||
|
this.appRemoveHeight = this.setUTableHeight || 165 |
||||
|
this.uTableTopHeight = this.appRemoveHeight |
||||
|
this.uTableOuterHeight = this.$refs.tablePaginationTableRef.getTableHeight() |
||||
|
this.uTableOuterHeight_init = Number(JSON.stringify(this.uTableOuterHeight)) |
||||
|
this.initButttondata() |
||||
|
|
||||
|
// 点击外部，字段设置弹窗隐藏 |
||||
|
document.addEventListener('click',(e)=>{ |
||||
|
if(!this.rowDropVisible)return |
||||
|
let _class = "rowDropNotHideItem" |
||||
|
let _hasParent = getParentNode(e.target,_class) |
||||
|
let _current_class = e.target._prevClass || e.target.className |
||||
|
let _hasCurrent = _current_class ? String(_current_class).includes(_class) : false |
||||
|
if(!_hasParent && !_hasCurrent){ |
||||
|
this.closeRowDrop() |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
methods: { |
||||
|
initButttondata(){ |
||||
|
let _list = [] |
||||
|
this.currenButtonData.forEach(item=>{ |
||||
|
if(item.permission){ |
||||
|
_list.push(item) |
||||
|
}else{ |
||||
|
if(this.noUsePermissionBtn.indexOf(item.name) < 0){ |
||||
|
let _scope = item.clientScope || localStorage.getItem('appClientScope') |
||||
|
item.permission = [_scope + '.' +this.$route.name+'.'+(item.permissionName || item.name)] |
||||
|
}else{ |
||||
|
item.permission = [] |
||||
|
} |
||||
|
_list.push(item) |
||||
|
} |
||||
|
}) |
||||
|
this.headerButttondata = _list |
||||
|
}, |
||||
|
// 重新渲染表格 |
||||
|
doFreshTableLayout(){ |
||||
|
if(this.$refs.tablePaginationTableRef && this.$refs.tablePaginationTableRef.doFreshLayout){ |
||||
|
this.$refs.tablePaginationTableRef.doFreshLayout() |
||||
|
} |
||||
|
}, |
||||
|
rowDrop(data,type) { |
||||
|
this.$emit('rowDrop',data,type) |
||||
|
this.$nextTick(()=>{ |
||||
|
this.isUpdate = !this.isUpdate |
||||
|
}) |
||||
|
}, |
||||
|
//点击常用按钮 |
||||
|
topbutton (val,item) { |
||||
|
// 筛选按钮 + table高度变化 + 动画效果（勿动顺序） |
||||
|
if(val=="filter"){ |
||||
|
this.showSearchOverall = !this.showSearchOverall |
||||
|
// 有普通查询配置 |
||||
|
if(this.primarySearchOption && this.primarySearchOption.length > 0){ |
||||
|
this.$nextTick(()=>{ |
||||
|
let _search_height = this.$refs.searchOverallRef.getSearchPrimaryHeight() |
||||
|
this.changeTableHeight(_search_height) |
||||
|
// if(this.showSearchOverall){ |
||||
|
// let _margin = 20 |
||||
|
// this.uTableOuterHeight = this.uTableOuterHeight_init - _search_height - _margin |
||||
|
// setTimeout(()=>{ |
||||
|
// this.uTableTopHeight += _search_height + _margin |
||||
|
// },0) |
||||
|
// }else{ |
||||
|
// this.uTableOuterHeight = this.uTableOuterHeight_init |
||||
|
// setTimeout(()=>{ |
||||
|
// this.uTableTopHeight = 165 |
||||
|
// },0) |
||||
|
// } |
||||
|
}) |
||||
|
} |
||||
|
this.$nextTick(()=>{ |
||||
|
let _search_height = this.$refs.searchOverallRef.getAllSearchInnerHeight() |
||||
|
this.changeTableHeight(_search_height) |
||||
|
}) |
||||
|
} |
||||
|
// 字段设置 |
||||
|
else if (val == 'field') { |
||||
|
this.rowDropVisible = !this.rowDropVisible |
||||
|
} |
||||
|
this.$emit("topbutton", val,item) |
||||
|
}, |
||||
|
// 更改筛选时候的table高度问题 |
||||
|
changeTableHeight(minusHeight=0){ |
||||
|
if(this.showSearchOverall){ |
||||
|
let _margin = 20 |
||||
|
this.uTableOuterHeight = this.uTableOuterHeight_init - minusHeight - _margin |
||||
|
setTimeout(()=>{ |
||||
|
this.uTableTopHeight = minusHeight + this.appRemoveHeight + _margin |
||||
|
},0) |
||||
|
}else{ |
||||
|
this.uTableOuterHeight = this.uTableOuterHeight_init |
||||
|
setTimeout(()=>{ |
||||
|
this.uTableTopHeight = this.appRemoveHeight |
||||
|
},0) |
||||
|
} |
||||
|
}, |
||||
|
// 快速搜索 - 搜索按钮 |
||||
|
quicklySearchClick (val,option) { |
||||
|
this.$emit("quicklySearchClick", val,option,this.$refs.searchOverallRef) |
||||
|
}, |
||||
|
// 快速搜索 - 清除搜索 |
||||
|
quicklySearchClear (val,option) { |
||||
|
// 判断是否有筛选按钮 |
||||
|
let hasSearch = false |
||||
|
this.currenButtonData.forEach(item=>{ |
||||
|
if(item.name == 'filter'){ |
||||
|
hasSearch = true |
||||
|
return |
||||
|
} |
||||
|
}) |
||||
|
this.$emit("quicklySearchClear", val,option,this.$refs.searchOverallRef,hasSearch ) |
||||
|
}, |
||||
|
//接收分页组件emit改变每页最大页数 |
||||
|
alterResultCount (val) { |
||||
|
this.$emit('alterResultCount', val) |
||||
|
}, |
||||
|
//接收分页组件emit改变当前页 |
||||
|
alertoldSkipCount (val) { |
||||
|
this.$emit('alertoldSkipCount', val) |
||||
|
}, |
||||
|
//点击name提交emit打开编辑页面 |
||||
|
inlineDialog (row) { |
||||
|
this.$emit("inlineDialog", row) |
||||
|
}, |
||||
|
//点击selection框 |
||||
|
handleSelectionChange (val) { |
||||
|
this.$emit("handleSelectionChange", val) |
||||
|
}, |
||||
|
//排序 |
||||
|
sortChange (data) { |
||||
|
this.$emit('sortChange', data) |
||||
|
}, |
||||
|
//点击table操作列(左侧)按钮 |
||||
|
buttonOperationClick_left(row, item, index) { |
||||
|
this.$emit("buttonOperationClick_left", row, item, index); |
||||
|
}, |
||||
|
//点击table操作列(右侧)按钮 |
||||
|
buttonOperationClick_right(row, item, index) { |
||||
|
this.$emit("buttonOperationClick_right", row, item, index); |
||||
|
}, |
||||
|
// 全面筛选组件配置 |
||||
|
// 全面筛选组件内部显示/隐藏更改触发，同步当前的showSearchOverall值 |
||||
|
getShowSearchOverall(val){ |
||||
|
this.showSearchOverall = val || false |
||||
|
}, |
||||
|
// 全面筛选组件所有按钮事件 |
||||
|
overallSearchFormClick(options){ |
||||
|
//增加快速搜索实体 |
||||
|
if(this.$refs.tablePagination_topNav)options.vm_quickly = this.$refs.tablePagination_topNav.getQuicklySearchDom() |
||||
|
this.$emit("overallSearchFormClick", options) |
||||
|
}, |
||||
|
// 关闭字段设置 |
||||
|
closeRowDrop() { |
||||
|
this.rowDropVisible = false |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.uTableOuter{ |
||||
|
transition:all 0.5s; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.tablePagination { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background-color: #fff; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.table-nav { |
||||
|
padding-bottom: 15px; |
||||
|
} |
||||
|
|
||||
|
.el-table { |
||||
|
flex: 1; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,542 @@ |
|||||
|
<template> |
||||
|
<div class="tableTreeComponents"> |
||||
|
<div class="table-tree-search" v-if="showQueryHeader"> |
||||
|
<div class="bttton-box"> |
||||
|
<!-- 左侧按钮 --> |
||||
|
<el-button |
||||
|
v-for="(item,index) in leftButtons" |
||||
|
v-show="queryHeaderBtn.indexOf(item.name) >= 0" |
||||
|
:key="index" |
||||
|
:type="item.type" |
||||
|
:icon="item.icon" |
||||
|
:size="item.size" |
||||
|
@click="headerButtonsHandle(item)" |
||||
|
v-permission="item.permission || []" |
||||
|
>{{item.label}}</el-button> |
||||
|
</div> |
||||
|
<div class="query-box"> |
||||
|
<!-- 搜索 --> |
||||
|
<searchNormal |
||||
|
v-if="queryHeaderBtn.indexOf('search') >= 0" |
||||
|
ref="searchNormalRef" |
||||
|
@searchNormalClick="headerButtonsHandle({name:'search'})" |
||||
|
@searchNormalClear="headerButtonsHandle({name:'reset'})" |
||||
|
></searchNormal> |
||||
|
<!-- 右侧其他按钮 --> |
||||
|
<el-button |
||||
|
v-for="(item,index) in rightButtons" |
||||
|
v-show="queryHeaderBtn.indexOf(item.name) >= 0 && item.name != 'search'" |
||||
|
:key="index" |
||||
|
:type="item.type" |
||||
|
:icon="item.icon" |
||||
|
:size="item.size" |
||||
|
@click="headerButtonsHandle(item)" |
||||
|
v-permission="item.permission || []" |
||||
|
>{{item.label}}</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<el-table |
||||
|
ref="treeTableRef" |
||||
|
:data="tableData" |
||||
|
:row-key="rowkey" |
||||
|
style="width: 100%" |
||||
|
height="calc(100%)" |
||||
|
border |
||||
|
> |
||||
|
<el-table-column |
||||
|
v-for="(item,index) in treeColumn" |
||||
|
:key="index" |
||||
|
:label="item.label" |
||||
|
:width="item.width" |
||||
|
:align="item.align || 'left'" |
||||
|
:header-align="item.headerAlign || 'left'" |
||||
|
:show-overflow-tooltip="!item.hideTooltip" |
||||
|
:fixed="item.fixed" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="!item.filters">{{scope.row[item.prop]}}</span> |
||||
|
<span v-else>{{item.filters[scope.row[item.prop]]}}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
label="操作" |
||||
|
header-align="center" |
||||
|
:align="treeAlign" |
||||
|
:width="handleBtnsWidth || Number(btnsData.length) * 55" |
||||
|
fixed="right" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button |
||||
|
v-for="(item,index) in btnsData" |
||||
|
:key="index" |
||||
|
:type="item.type" |
||||
|
:size="item.size" |
||||
|
@click="btnHandle(item,scope.row)" |
||||
|
:style="item.style" |
||||
|
v-show="typeof item.hide == 'function' ? !item.hide(scope.row) : !item.hide" |
||||
|
:icon="item.icon" |
||||
|
v-permission="item.permission || []" |
||||
|
>{{item.label}}</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<!-- 新增/编辑弹窗 --> |
||||
|
<el-dialog |
||||
|
:title="treeEditTitle" |
||||
|
:visible.sync="treeEditDialog" |
||||
|
width="600px" |
||||
|
:close-on-click-modal="false" |
||||
|
> |
||||
|
<curren-Form |
||||
|
v-if="treeEditDialog" |
||||
|
v-loading="dialogLoading" |
||||
|
size="medium" |
||||
|
ref="treeEditDialogRef" |
||||
|
:searchData="treeEditFormData" |
||||
|
:searchForm="treeEditForm" |
||||
|
:rules="treeEditRules" |
||||
|
:searchHandle="treeEditHandle" |
||||
|
@push="DataPush(arguments)" |
||||
|
@submitForm="treeEditFormClick(arguments)" |
||||
|
></curren-Form> |
||||
|
<!-- @changeInput="changeInput" |
||||
|
@radioChange="radioChange" --> |
||||
|
<!-- :searchOptions="treeEditOptions" --> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import permission from "@/utils/permission/index"; |
||||
|
import { treeDefalutButton,formatDefalutConfig,queryDefalutButtons } from "@/utils/tableTree" |
||||
|
import searchNormal from "@/components/searchNormal/index.vue" |
||||
|
export default { |
||||
|
name: 'tableTreeComponents', |
||||
|
directives: { permission }, |
||||
|
components:{ |
||||
|
searchNormal |
||||
|
}, |
||||
|
watch:{ |
||||
|
treeData(n,o){ |
||||
|
if(n){ |
||||
|
this.init() |
||||
|
} |
||||
|
}, |
||||
|
treeEditData:{ |
||||
|
handler(n,o){ |
||||
|
this.treeEditFormData = n |
||||
|
}, |
||||
|
deep:true |
||||
|
} |
||||
|
}, |
||||
|
props: { |
||||
|
// 是否显示Query头部 |
||||
|
showQueryHeader:{ |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
// 查询参数 |
||||
|
searchParam:{ |
||||
|
type: Object, |
||||
|
default: ()=>{ |
||||
|
return {name:'name',label:'菜单名称'} |
||||
|
} |
||||
|
}, |
||||
|
// Query头部显示按钮 |
||||
|
queryHeaderBtn:{ |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return ['addFirst','fresh','search'] |
||||
|
} |
||||
|
}, |
||||
|
// 搜索栏左侧按钮（默认【创建一级菜单】、【刷新】） |
||||
|
queryLeftButtons: { |
||||
|
type: Array, |
||||
|
default: null |
||||
|
}, |
||||
|
// 头部创建一级菜单按钮显示名称 |
||||
|
headerAddName:{ |
||||
|
type: String, |
||||
|
default: null |
||||
|
}, |
||||
|
// 搜索栏左侧按钮（默认【搜索框】、【搜索】、【重置】） |
||||
|
queryRightButtons: { |
||||
|
type: Array, |
||||
|
default: null |
||||
|
}, |
||||
|
// 搜索栏按钮操作 |
||||
|
queryButtonsHandle:Function, |
||||
|
|
||||
|
// 刷新table数据 |
||||
|
rowkey:{ |
||||
|
type: String, |
||||
|
default: 'id' |
||||
|
}, |
||||
|
// 操作栏宽度 |
||||
|
handleBtnsWidth:{ |
||||
|
type: String, |
||||
|
default: null |
||||
|
}, |
||||
|
// 默认展开类型 all:全部 first：第一层 |
||||
|
expandedType:{ |
||||
|
type:String, |
||||
|
default:null |
||||
|
}, |
||||
|
// tree数据 |
||||
|
treeData: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
// tree配置 |
||||
|
treeColumn: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
// 是否需要格式化数据 |
||||
|
needFormatData:{ |
||||
|
type: Boolean, |
||||
|
default:false |
||||
|
}, |
||||
|
// 格式化数据配置 |
||||
|
formatDataConfig:{ |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return formatDefalutConfig() |
||||
|
} |
||||
|
}, |
||||
|
// table操作按钮 |
||||
|
treeButtons: { |
||||
|
type: Array, |
||||
|
default: null |
||||
|
}, |
||||
|
// table操作居中 |
||||
|
treeAlign:{ |
||||
|
type: String, |
||||
|
default: 'right' |
||||
|
}, |
||||
|
// 新增/操作数据 |
||||
|
treeEditData:{ |
||||
|
type: Object, |
||||
|
default: null |
||||
|
}, |
||||
|
// 新增/编辑显示 |
||||
|
treeEditForm:{ |
||||
|
type: Array, |
||||
|
default: ()=>{ |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
// 新增/编辑Rules |
||||
|
treeEditRules:{ |
||||
|
type: Object, |
||||
|
default: ()=>{ |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
// 新增/编辑Rules |
||||
|
treeEditHandle:{ |
||||
|
type: Array, |
||||
|
default: ()=>{ |
||||
|
return [ |
||||
|
{ label: "取消", name: "cancel" }, |
||||
|
{ label: "确认", name: "sure", type:"primary" }, |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
// 点击编辑前 |
||||
|
treeEditBefore:Function, |
||||
|
// 取消提交前 |
||||
|
treeEditCancle:Function, |
||||
|
// 提交事件 |
||||
|
treeEditSubmit:Function, |
||||
|
// 删除事件 |
||||
|
treeEditDelete:Function, |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
leftButtons:[],//左侧按钮 |
||||
|
rightButtons:[],//右侧按钮 |
||||
|
|
||||
|
tableData: [],//table渲染 |
||||
|
tableDataCopy: [],//用于查询存储所有数据 |
||||
|
btnsData:[],//table中的按钮 |
||||
|
|
||||
|
treeEditDialog:false,//新增编辑弹窗显示 |
||||
|
dialogLoading:false,//编辑弹窗加载 |
||||
|
treeEditTitle:"",//新增编辑弹窗title |
||||
|
isEdit:false,//false:编辑 true:新建 |
||||
|
treeEditFormData:[],//编辑弹窗内数据 |
||||
|
} |
||||
|
}, |
||||
|
activated(){ |
||||
|
// 解决切换导航后，页面table窜行问题 |
||||
|
this.$refs.treeTableRef.doLayout(); |
||||
|
}, |
||||
|
created(){ |
||||
|
this.init() |
||||
|
}, |
||||
|
methods: { |
||||
|
init(){ |
||||
|
// 头部左侧的按钮 |
||||
|
if(this.queryLeftButtons){ |
||||
|
this.leftButtons = this.queryLeftButtons |
||||
|
}else{ |
||||
|
this.leftButtons = [ |
||||
|
...queryDefalutButtons("left",this.headerAddName) |
||||
|
] |
||||
|
} |
||||
|
// 头部右侧的按钮 |
||||
|
if(this.queryRightButtons){ |
||||
|
this.rightButtons = this.queryRightButtons |
||||
|
}else{ |
||||
|
this.rightButtons = [ |
||||
|
...queryDefalutButtons("right") |
||||
|
] |
||||
|
} |
||||
|
|
||||
|
// 数据 |
||||
|
if(this.treeData){ |
||||
|
if(!this.needFormatData){ |
||||
|
this.tableData = this.treeData |
||||
|
}else{ |
||||
|
let _tree = this.initTreeData(this.treeData).sort(this.sortData(this.formatDataConfig.sort)) |
||||
|
this.tableData = _tree |
||||
|
} |
||||
|
this.tableDataCopy = JSON.parse(JSON.stringify(this.tableData)) |
||||
|
// 展开情况 |
||||
|
this.$nextTick(()=>{ |
||||
|
this.initTreeExpanded() |
||||
|
}) |
||||
|
} |
||||
|
// table中的按钮 |
||||
|
if(this.treeButtons){ |
||||
|
this.btnsData = this.treeButtons |
||||
|
}else{ |
||||
|
this.btnsData = [ |
||||
|
...treeDefalutButton() |
||||
|
] |
||||
|
} |
||||
|
|
||||
|
// 新增/编辑数据 |
||||
|
this.treeEditFormData = this.treeEditData |
||||
|
}, |
||||
|
// 展开情况处理 |
||||
|
initTreeExpanded(type){ |
||||
|
let _type = type || this.expandedType |
||||
|
let _this = this |
||||
|
function __changHandle(exp){ |
||||
|
_this.tableData.forEach(item=>{ |
||||
|
item.children.forEach(item_c=>{ |
||||
|
_this.$refs.treeTableRef.toggleRowExpansion(item_c,Boolean(exp)); |
||||
|
}) |
||||
|
_this.$refs.treeTableRef.toggleRowExpansion(item,Boolean(exp)); |
||||
|
}) |
||||
|
} |
||||
|
if(!_type){ |
||||
|
__changHandle(false) |
||||
|
} |
||||
|
else if(_type == "all"){ |
||||
|
__changHandle(true) |
||||
|
} |
||||
|
else if(_type == "first"){ |
||||
|
this.tableData.forEach((item,key)=>{ |
||||
|
let _exp = key == 0 ? true : false |
||||
|
item.children.forEach(item_c=>{ |
||||
|
this.$refs.treeTableRef.toggleRowExpansion(item_c,_exp); |
||||
|
}) |
||||
|
this.$refs.treeTableRef.toggleRowExpansion(item,_exp); |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
// 刷新新增/查询显示配置，如何时更改disabled属性等 |
||||
|
freshTreeEditForm(item,row){ |
||||
|
this.$emit("freshTreeEditForm",item,row); |
||||
|
}, |
||||
|
// 树状图格式化数据 |
||||
|
initTreeData(list,code = ""){ |
||||
|
const children = [] |
||||
|
// 对于list,每个元素.如果他的parentCode==code,他就是当前的children |
||||
|
list.forEach(item => { |
||||
|
if (item[this.formatDataConfig.parentCode] == code) { |
||||
|
children.push(item) |
||||
|
//排序 |
||||
|
item.children=this.initTreeData(list,item[this.formatDataConfig.code]).sort(this.sortData(this.formatDataConfig.sort)) |
||||
|
} |
||||
|
}) |
||||
|
return children |
||||
|
}, |
||||
|
// table排序 |
||||
|
/** |
||||
|
* sort 按照排序字段(现在为数字) 默认sort |
||||
|
*/ |
||||
|
sortData(sort){ |
||||
|
return function(a,b){ |
||||
|
const val1 = a[sort]; |
||||
|
const val2 = b[sort]; |
||||
|
return val1 - val2; |
||||
|
} |
||||
|
}, |
||||
|
// 头部创建一级菜单 |
||||
|
createFirstTreeHandle(item) { |
||||
|
this.treeEditDialog = true |
||||
|
this.treeEditTitle = item.label |
||||
|
this.isEdit = false; |
||||
|
this.freshTreeEditForm(item) |
||||
|
}, |
||||
|
// 获取search的值 |
||||
|
getSearchValue(){ |
||||
|
return this.$refs.searchNormalRef.getSearchNormalValue() |
||||
|
}, |
||||
|
// 清除search的值 |
||||
|
clearSearchValue(){ |
||||
|
this.$refs.searchNormalRef.searchNormalClear(true) |
||||
|
}, |
||||
|
//头部刷新 |
||||
|
createView(){ |
||||
|
this.resetView() |
||||
|
this.$emit("freshTreeData",this.getSearchValue()); |
||||
|
}, |
||||
|
// 头部搜索 |
||||
|
querySearchHandle(data){ |
||||
|
this.tableData=[]; |
||||
|
let newarr = []; |
||||
|
let _data = data || this.tableDataCopy; |
||||
|
_data.forEach(element => { |
||||
|
if (String(element[this.searchParam.name]).indexOf(this.getSearchValue()) >= 0) { |
||||
|
newarr.push(element); |
||||
|
} |
||||
|
else { |
||||
|
if (element.children && element.children.length > 0) { |
||||
|
const newObj = this.querySearchHandle(element.children); |
||||
|
const obj = { |
||||
|
...element, |
||||
|
children: newObj |
||||
|
}; |
||||
|
if (newObj && newObj.length > 0) { |
||||
|
newarr.push(obj); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
this.tableData=newarr; |
||||
|
return newarr |
||||
|
}, |
||||
|
//头部重置 |
||||
|
resetView(){ |
||||
|
this.clearSearchValue() |
||||
|
this.querySearchHandle() |
||||
|
this.initTreeExpanded(null) |
||||
|
}, |
||||
|
// table中操作按钮 |
||||
|
btnHandle(item,row){ |
||||
|
// 创建子菜单 |
||||
|
if(item.name == "add"){ |
||||
|
this.treeEditDialog = true |
||||
|
this.treeEditTitle = item.label |
||||
|
this.isEdit = false; |
||||
|
this.freshTreeEditForm(item,row) |
||||
|
} |
||||
|
// 编辑 |
||||
|
if(item.name == "edit"){ |
||||
|
this.freshTreeEditForm(item,row) |
||||
|
this.treeEditDialog = true |
||||
|
this.treeEditTitle = item.label |
||||
|
this.isEdit = true; |
||||
|
if(this.treeEditBefore){ |
||||
|
this.dialogLoading = true |
||||
|
this.treeEditBefore(row) |
||||
|
.then((data)=>{ |
||||
|
this.dialogLoading = false |
||||
|
this.treeEditFormData = data; |
||||
|
row = data |
||||
|
}) |
||||
|
.catch(err=>{ |
||||
|
this.dialogLoading = false |
||||
|
}) |
||||
|
}else{ |
||||
|
this.treeEditFormData = JSON.parse(JSON.stringify(row)); |
||||
|
} |
||||
|
} |
||||
|
// 删除 |
||||
|
if(item.name == "delete"){ |
||||
|
this.$emit("treeEditDelete",row); |
||||
|
} |
||||
|
}, |
||||
|
// 头部查询按钮操作 |
||||
|
headerButtonsHandle(item){ |
||||
|
let _goon = true |
||||
|
if(this.queryButtonsHandle){ |
||||
|
_goon = this.queryButtonsHandle(item,this.getSearchValue()) |
||||
|
} |
||||
|
if(!_goon)return |
||||
|
if(item.name == "addFirst"){ |
||||
|
this.createFirstTreeHandle(item) |
||||
|
} |
||||
|
if(item.name == "fresh"){ |
||||
|
this.createView(item) |
||||
|
} |
||||
|
if(item.name == "search"){ |
||||
|
this.querySearchHandle() |
||||
|
let _exp = this.getSearchValue() && this.getSearchValue().length > 0 ? 'all' : null |
||||
|
this.initTreeExpanded(_exp) |
||||
|
} |
||||
|
if(item.name == "reset"){ |
||||
|
this.resetView(item) |
||||
|
} |
||||
|
}, |
||||
|
// 重置表单 |
||||
|
treeEditResetFields(){ |
||||
|
this.$refs.treeEditDialogRef.getDom().resetFields(); |
||||
|
this.$nextTick(()=>{ |
||||
|
this.treeEditDialog = false; |
||||
|
this.dialogLoading = false |
||||
|
}) |
||||
|
}, |
||||
|
// 新增/修改按钮事件 |
||||
|
treeEditFormClick(val,row){ |
||||
|
// 取消 |
||||
|
if(val[2].name == "cancel"){ |
||||
|
if(this.treeEditCancle){ |
||||
|
this.dialogLoading = true |
||||
|
this.treeEditCancle(this.isEdit,this.treeEditFormData,val) |
||||
|
.then(()=>{ |
||||
|
this.treeEditResetFields() |
||||
|
}) |
||||
|
.catch(err=>{ |
||||
|
this.dialogLoading = false |
||||
|
}) |
||||
|
}else{ |
||||
|
this.treeEditResetFields() |
||||
|
} |
||||
|
} |
||||
|
// 确定 |
||||
|
if(val[2].name == "sure"){ |
||||
|
this.$refs.treeEditDialogRef.getDom().validate((valid) => { |
||||
|
if(valid){ |
||||
|
if(this.treeEditSubmit){ |
||||
|
this.dialogLoading = true |
||||
|
this.treeEditSubmit(this.isEdit,this.treeEditFormData,val) |
||||
|
.then(()=>{ |
||||
|
this.clearSearchValue() |
||||
|
this.treeEditResetFields() |
||||
|
}) |
||||
|
.catch(err=>{ |
||||
|
this.dialogLoading = false |
||||
|
}) |
||||
|
}else{ |
||||
|
this.treeEditResetFields() |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
@import "./style/index.scss"; |
||||
|
</style> |
||||
@ -0,0 +1,24 @@ |
|||||
|
.tableTreeComponents{ |
||||
|
height: 100%; |
||||
|
// background-color: #f2f2f2; |
||||
|
|
||||
|
.table-tree-search { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 20px 0; |
||||
|
|
||||
|
.bttton-box { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.query-box { |
||||
|
display: flex; |
||||
|
|
||||
|
.el-input { |
||||
|
margin: 0 5px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue