Commit c05f2bd7 authored by 何虹's avatar 何虹 💬

优化组件

parent 6a7a2f9e
......@@ -2,20 +2,28 @@
<div>
<hsTable
maxHeight='500px'
:elInfo="elInfo"
:allSourceData='allSourceData'
></hsTable>
</div>
</template>
<script>
import apiUc from "./apiUc";
import request from "../packages/funTools/requestConfigComponent";
export default {
mixins: [apiUc],
data() {
return {
elInfo: {
position: "tt",
el: "hsTable",
page: "A",
sAppCode: "tyCode"
},
allSourceData: {
config: {
highlightCurrentRow:false,
hover:{hoverBackground:'',leaveBackground:''},
highlightCurrentRow: false,
hover: { hoverBackground: "", leaveBackground: "" },
showIndex: false, // 是否显示 序号
hsConfig: {
default_type: 1 // mes风格
......@@ -110,18 +118,42 @@ export default {
}
]
},
sourceData: []//表格数据
sourceData: [] //表格数据
}
};
},
mounted() {
this.init();
this.getTableConfig();
},
methods: {
async getTableConfig() {
// 初始化main上面的工具栏
const data = {
control_name: this.elInfo.position,
sAppCode: this.elInfo.sAppCode,
sPage: this.elInfo.page,
return_type: 1
};
const res = await request.getPageInfo(data);
if (res.length) {
this.allSourceData.config = JSON.parse(res[0].json_config);
}
},
init() {
this.allSourceData.sourceData = [
{ customer_name: 1, style_code: 2, order_size: "0",_styleRowSetting_:{"color":"blue","background":"red"} },
{ customer_name: 1, style_code: 2, order_size: "0",_styleRowSetting_:{"color":"blue","background":"blue"} }
{
customer_name: 1,
style_code: 2,
order_size: "0",
_styleRowSetting_: { color: "blue", background: "red" }
},
{
customer_name: 1,
style_code: 2,
order_size: "0",
_styleRowSetting_: { color: "blue", background: "blue" }
}
];
}
}
......
......@@ -3,6 +3,9 @@ import App from './App.vue'
import './packages/index'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'jsoneditor/dist/jsoneditor.min.css'
import jsoneditor from 'jsoneditor'
Vue.prototype.$jsoneditor = jsoneditor
Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({
......
......@@ -51,7 +51,7 @@ function parseUrlQueryBIDyncAppcodePageName() {
}
// 解析动态菜单参数和全局参数MenuParams GlobalParams
function parseMenuGlobalParams(str, params) {
const { menuParam, globalParam, otherParam } = params
const { menuParam, globalParam, currentRowParam, mainParam, searchParam, indexParam, currentParam } = params
const empyt = [undefined]
if (typeof str !== 'string' || !str.includes('{') || !str.includes('}')) return str
const reg = /\{(.*?)\}/g // /(?<=\{).*?(?=\})/g
......@@ -74,11 +74,35 @@ function parseMenuGlobalParams(str, params) {
} else {
pt = globalParam[propStr]
}
} else if (sourceStr === 'mainParam') {
if (empyt.includes(mainParam[propStr])) {
pt = p
} else {
pt = mainParam[propStr]
}
} else if (sourceStr === 'searchParam') {
if (empyt.includes(searchParam[propStr])) {
pt = p
} else {
pt = searchParam[propStr]
}
} else if (sourceStr === 'indexParam') {
if (empyt.includes(indexParam[propStr])) {
pt = p
} else {
if (empyt.includes(otherParam[propStr])) {
pt = indexParam[propStr]
}
} else if (sourceStr === 'currentParam') {
if (empyt.includes(currentParam[propStr])) {
pt = p
} else {
pt = currentParam[propStr]
}
} else if (sourceStr === 'currentRowParam') {
if (empyt.includes(currentParam[propStr])) {
pt = p
} else {
pt = otherParam[propStr]
pt = currentRowParam[propStr]
}
}
pt = decodeURIComponent(pt)
......@@ -95,8 +119,9 @@ function recursiveDyncParam(obj, otherOBj = {}) {
const parseUrlQueryParams = parseUrlQueryString() || {}
const parseGlobalParams_ = parseGlobalParams() || {}
const parms = {
menuParam: parseUrlQueryParams, globalParam: parseGlobalParams_, otherParam: otherOBj
menuParam: parseUrlQueryParams, globalParam: parseGlobalParams_
}
Object.assign(parms, otherOBj)
const objType = typeof obj
if (Array.isArray(obj)) {
obj.forEach((item, index) => {
......@@ -270,13 +295,21 @@ function recursiveReplaceAction(obj, activeManager) {
}
}
function replaceItemAction(item, activeManager) {
const actionProps = ['isHide', 'click', 'disabled', 'changed', 'cleared']
const actionProps = ['isHide', 'click', 'clicked', 'disabled', 'changed', 'cleared']
actionProps.forEach(k => {
const type = typeof item[k]
if (type === 'string' && !item[k].startsWith('$')) {
const funName = '$' + item[k]
if (!activeManager[funName]) {
alert(`action---${funName},不存在 `)
console.error(`action---${funName},不存在 `)
item[k] = () => {
console.log(`action---${funName},不存在 `)
}
} else {
item[k] = activeManager[funName]
}
}
})
}
export default {
......
......@@ -326,9 +326,9 @@ const API = {
const control_type = (elInfo && elInfo.el) || ''
const { appCode, page, isMock, dbName: db_Name, db_code } = getPageParms()
var p = new Promise(function(resolve, reject) {
const db_name = dbName || db_Name || ''
const db_name = dbName || (elInfo && elInfo.db_name) || db_Name || ''
const sPage = sPage_ || (elInfo && elInfo.page) || page || ''
const sAppCode = sAppCode_ || appCode
const sAppCode = sAppCode_ || (elInfo && elInfo.sAppCode) || appCode
var sIsMock
if (parseInt(is_mock) === 0 || parseInt(is_mock) === 1) {
sIsMock = is_mock
......
import axios from 'axios'
import { Notification, Loading } from 'element-ui'
import commonUtility from './commonUtility'
import _ from 'lodash'
let fullLoading
function showLoading() {
fullLoading = Loading.service({
lock: true,
text: '加载中...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0)'
})
setTimeout(_ => {
fullLoading.close()
}, 10000)
}
function closeLoading() {
fullLoading && fullLoading.close()
}
let loading_request_count = 0
function show_full_screen_loading() {
if (loading_request_count === 0) {
showLoading()
}
loading_request_count++
}
function hide_full_screen_loading() {
if (loading_request_count <= 0) return
loading_request_count--
if (loading_request_count === 0) {
closeLoading()
}
}
// 增加一个response拦截器
axios.interceptors.response.use(
function(response) {
hide_full_screen_loading()
if (response.data) {
const { error_detail, error_title } = response.data
if (error_title || error_detail) {
Notification.error({
title: '错误信息!',
dangerouslyUseHTMLString: true,
duration: 100000,
message: `<div>
<textarea style="border:0;border-radius:5px;background-color:rgba(241,241,241,.98);width: 300px;height: 400px;padding: 10px;resize: none;position: relative;right: 36px;">
${error_title}
${error_detail}
</textarea>
</div>` // error_detail || error_title,
})
} else { // 此处做优化 只有不出错的时候才返回response
return response
}
} else { // 此处做优化 只有不出错的时候才返回response
return response
}
},
function(error) {
hide_full_screen_loading()
dyncInnerErrorDel(error)
return Promise.reject(error)
}
)
function dyncInnerErrorDel(error) {
if (error.message === 'Network Error') {
Notification.error({
title: '错误信息!',
message: '网络连接错误!请检查您的网络是否正常!',
type: 'warning'
})
}
if (error.response && typeof error.response.data === 'string') {
Notification.error({
title: '错误信息!',
dangerouslyUseHTMLString: true,
type: 'warning',
duration: 100000,
message: `<div>
<textarea style="border:0;border-radius:5px;background-color:rgba(241,241,241,.98);width: 300px;height: 400px;padding: 10px;resize: none;position: relative;right: 36px;">
${error.response.data}
</textarea>
</div>`
})
}
if (error.response && typeof error.response.data === 'object') {
const { error_detail, error_title } = error.response.data
Notification.error({
title: '错误信息!',
dangerouslyUseHTMLString: true,
duration: 100000,
message: `<div>
<textarea style="border:0;border-radius:5px;background-color:rgba(241,241,241,.98);width: 300px;height: 400px;padding: 10px;resize: none;position: relative;right: 36px;">
${error_title}
${error_detail}
</textarea>
</div>`
})
}
}
axios.interceptors.request.use(
config => {
if (config.url.indexOf('no_loading') !== -1) {
} else {
if (config.url.startsWith('http:') || config.url.startsWith('https:')) {
// 俺啥都不干
} else {
config.url = config.url.replace('//', '/')
}
show_full_screen_loading()
}
if (config.url.includes('?&')) {
config.url = config.url.replace('?&', '?')
}
return config
},
err => {
hide_full_screen_loading()
return Promise.reject(err)
}
)
let fi_data = {}
const tempList = [undefined, 'undefined']
// 需要在登录时将db_name、app_code、isMock参数存到session里
// 需要在代理配置mainAPI
const module_url = `mainAPI/web_query/query/`
const module_url2 = `mainAPI/web_query/query_value/`
const module_url3 = `mainAPI/web_query/`
const module_query_page = 'mainAPI/web_chart_config/query_page/'
const emptyList = [undefined, 'undefined', null, 'null', '']
function getPageParms() {
const { db_name, is_mock, db_code } = commonUtility.parseUrlQueryString()
const { appCode, pagename } = commonUtility.parseUrlQueryBIDyncAppcodePageName()
const isMock = emptyList.includes(is_mock) ? 1 : is_mock
const dbName = db_name || ''
const obj = _.cloneDeep({
dbName,
appCode,
page: pagename,
isMock,
db_code
})
return obj
}
const API = {
runSave(data) { // routerParms: page路由 position位置 other参数, sConfig 配置json sData 数据json
const { sAppCode: sAppCode_, sPage: sPage_, sControl: sControl_, sConfig, sData, sQuerySql, is_mock, dbName, elInfo } = data
const control_type = (elInfo && elInfo.el) || ''
const { appCode, page, isMock, dbName: db_Name, db_code } = getPageParms()
var p = new Promise(function(resolve, reject) {
const db_name = dbName || (elInfo && elInfo.db_name) || db_Name || ''
const sPage = sPage_ || (elInfo && elInfo.page) || page || ''
const sAppCode = sAppCode_ || (elInfo && elInfo.sAppCode) || appCode
var sIsMock
if (parseInt(is_mock) === 0 || parseInt(is_mock) === 1) {
sIsMock = is_mock
} else {
sIsMock = isMock
}
const sSQl = sQuerySql || ''
const sControl = sControl_ || elInfo.position
const globalParams = commonUtility.parseGlobalParams()
const user_id = globalParams.user_id || 1
const postData = {
exec_sql: `EXEC dbo.spappWebChartConfig_Save @sAppCode='${sAppCode}',@sPage='${sPage}',@sControl='${sControl}',@sControlType='${control_type}',@sConfig=:sConfig,@sData=:sData,@sQuerySql='${sSQl}',@bMockData='${sIsMock}',@iUserId=${user_id}`,
db_name: db_name,
db_code,
param: {
sConfig: JSON.stringify(sConfig),
sData: JSON.stringify(sData)
}
}
axios.post(module_url3, postData).then(res => {
if (!res) return
if (isMock) {
const r_d = res.data[0] ? res.data[0].json_data : ''
if (r_d !== '' && r_d !== undefined) {
fi_data = JSON.parse(r_d)
resolve(fi_data)
} else {
resolve([])
}
} else {
fi_data = JSON.parse(res.data)
resolve(fi_data)
}
})
})
return p
},
getSql(data) {
const { sAppCode: sAppCode_, sPage: sPage_, sControl: sControl_, dbName } = data
const { appCode, page, dbName: db_Name, db_code } = getPageParms()
const globalParams = commonUtility.parseGlobalParams()
const user_id = globalParams.user_id || 1
var p = new Promise(function(resolve, reject) {
const db_name = dbName || db_Name || ''
const sAppCode = sAppCode_ || appCode
const sPage = sPage_ || page || ''
const sControl = sControl_
const postData = {
exec_sql: `EXEC dbo.spappWebChartConfig_Query @sAppCode='${sAppCode}',@sPage='${sPage}',@sControl='${sControl}',@iUserId='${user_id}'`,
db_name: db_name,
db_code
}
axios.post(module_url, postData).then(res => {
resolve(res.data)
})
})
return p
},
download(name, data) {
var urlObject = window.URL || window.webkitURL || window
var downloadData = new Blob([data])
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
save_link.href = urlObject.createObjectURL(downloadData)
save_link.download = name
this.fake_click(save_link)
},
fake_click(obj) {
var ev = document.createEvent('MouseEvents')
ev.initMouseEvent(
'click', true, false, window, 0, 0, 0, 0, 0
, false, false, false, false, 0, null
)
obj.dispatchEvent(ev)
},
downSql(data) {
const { sAppCode: sAppCode_, sPage: sPage_, dbName } = data
const { appCode, page, dbName: db_Name, db_code } = getPageParms()
const db_name = dbName || db_Name || ''
const sAppCode = sAppCode_ || appCode
const sPage = sPage_ || page || ''
const postData = {
exec_sql: `EXEC dbo.spappWebChartConfig_SaveAs @sAppCode='${sAppCode}',@sPage='${sPage}'`,
db_name: db_name,
db_code
}
axios.post(module_url2, postData).then(res => {
if (!res) return
const r_d = res.data
this.download(`spappWebChartConfig_Upgrade_${sAppCode}_${sPage}.sql`, r_d)
})
},
execSql(data) {
var postData = {}
const { dbName: db_Name, db_code } = getPageParms()
if (typeof data === 'object') {
const { sQuerySql, dbName } = data
const db_name = dbName || db_Name || ''
postData = {
exec_sql: sQuerySql,
db_name,
db_code
}
} else {
postData = {
exec_sql: data,
db_Name,
db_code
}
}
var p = new Promise(function(resolve, reject) {
axios.post(module_url, postData).then(res => {
resolve(res.data)
})
})
return p
},
getPageLog(data) {
const { sAppCode: sAppCode_, sPage: sPage_, dbName, sControl } = data
const { appCode, page, dbName: db_Name, db_code } = getPageParms()
const db_name = dbName || db_Name || ''
const sAppCode = sAppCode_ || appCode
const sPage = sPage_ || page || ''
var p = new Promise(function(resolve, reject) {
const postData = {
exec_sql: `EXEC dbo.spappWebChartConfig_QueryLog @sAppCode='${sAppCode}',@sPageName='${sPage}',@sControlName='${sControl}'`,
db_name: db_name,
db_code
}
axios.post(module_url, postData).then(res => {
if (!res) {
resolve([])
return
}
if (res && !res.data) {
resolve([])
return
}
resolve(res.data)
})
})
return p
},
revertPageLog(data) {
const { sAppCode: sAppCode_, sPage: sPage_, dbName, sControl, version: version_ } = data
const { appCode, page, dbName: db_Name, db_code } = getPageParms()
const db_name = dbName || db_Name || ''
const sAppCode = sAppCode_ || appCode
const sPage = sPage_ || page || ''
const version = version_ || ''
var p = new Promise(function(resolve, reject) {
const postData = {
exec_sql: `EXEC dbo.spappWebChartConfig_Revert @sAppCode='${sAppCode}',@sPageName='${sPage}',@sControlName='${sControl}',@iVersion='${version}'`,
db_name: db_name,
db_code
}
axios.post(module_url3, postData).then(res => {
resolve(res.data)
})
})
return p
},
getPageInfo(data) {
const queryString = commonUtility.parseUrlQueryString()
const { sAppCode: sAppCode_, sPage: sPage_, dbName, control_name, param, return_type } = data
const { appCode, page, dbName: db_Name, db_code } = getPageParms()
const db_name = dbName || db_Name || ''
const sAppCode = sAppCode_ || appCode
const sPage = sPage_ || page || ''
const globalParams = commonUtility.parseGlobalParams()
const user_id = globalParams.user_id || 1
const type = typeof param
let _parm = {}
if (type === 'string') {
_parm = JSON.parse(param)
}
if (type === 'object') {
_parm = _.cloneDeep(param)
}
const param_ = _.cloneDeep(_parm || {})
param_.menuParam = queryString
param_.globalParam = globalParams || {}
const datas = {
db_name: db_name,
app_code: sAppCode,
page: sPage,
param: JSON.stringify(param_),
control_name,
return_type: return_type || 3,
db_code
}
if (user_id) {
datas.user_id = user_id
}
var p = new Promise(function(resolve, reject) {
axios.post(`${module_query_page}`, datas).then(res => {
if (!res) {
resolve([])
return
}
if (res && !res.data) {
resolve([])
return
}
resolve(res.data)
})
})
return p
},
// 上传附件
uploadFile(formData) {
const { appCode } = getPageParms()
return axios.post(`fileresourceAPI/file/${appCode}/`, formData)
}
}
export default API
......@@ -104,6 +104,7 @@
:elInfo='item.elInfo'
:readonly='disabled'
:prop='item.prop'
:uploadFileFun='item.uploadFileFun'
:containerType='type'
>
</hsFile>
......
......@@ -160,16 +160,16 @@
</template>
<script>
import ucComponent from "../ucClass/uc_component";
import jsoneditor from "../common/jsoneditor";
import commonUtility from "../funTools/commonUtility";
import _ from "lodash";
import ucComponent from '../ucClass/uc_component'
import jsoneditor from '../common/jsoneditor'
import commonUtility from '../funTools/commonUtility'
import _ from 'lodash'
export default {
mixins: [ucComponent],
components: {
jsoneditor
},
name: "hsFile",
name: 'hsFile',
props: {
uploadFileFun: {
type: Function
......@@ -177,16 +177,16 @@ export default {
allSourceData: {
type: Object,
default() {
return {};
return {}
}
},
elInfo: {
type: Object,
default() {
return {};
return {}
}
},
value: "",
value: '',
layout: {},
jsoneditorCloseAfter: {
type: Function
......@@ -198,35 +198,35 @@ export default {
watch: {
allSourceData: {
handler: function(newVal, oldVal) {
const { config } = newVal;
this.initConfig(config);
const { config } = newVal
this.initConfig(config)
},
deep: true
},
value(val) {
this.value_inner = val;
this.initData();
this.value_inner = val
this.initData()
},
value_inner(val) {
this.$emit("input", val);
this.$emit('input', val)
},
fileList: {
handler: function(newVal, oldVal) {
this.changeBtnStatus(newVal);
this.changeBtnStatus(newVal)
},
deep: true
},
newFileList: {
handler: function(newVal, oldVal) {
this.initValue(newVal);
this.initValue(newVal)
},
deep: true
}
},
data() {
return {
elId: "",
value_inner: "",
elId: '',
value_inner: '',
jsoneditorVisible: false,
sourceData: [],
visible_popover: false,
......@@ -240,93 +240,93 @@ export default {
multiple: true,
configData: {
multiple: true,
accept: "*",
appCode: "",
label: "查看附件"
accept: '*',
appCode: '',
label: '查看附件'
},
appCode: "",
appCode: '',
hideInput: false,
fileName: ""
};
fileName: ''
}
},
mounted() {
this.$nextTick(() => {
const { config } = this.allSourceData;
this.initConfig(config);
});
const { config } = this.allSourceData
this.initConfig(config)
})
},
methods: {
initValue(newVal) {
const data = _.cloneDeep(newVal);
const data = _.cloneDeep(newVal)
data.forEach(item => {
delete item.fileListImage;
delete item.file;
delete item.name;
});
this.value_inner = JSON.stringify(data);
delete item.fileListImage
delete item.file
delete item.name
})
this.value_inner = JSON.stringify(data)
},
changeBtnStatus(data) {
if (data.length >= 1) {
this.hideInput = true;
this.hideInput = true
} else {
this.hideInput = false;
this.hideInput = false
}
},
openDialog() {
this.initData();
this.initData()
},
initData() {
this.newFileList = this.value ? JSON.parse(this.value) : [];
const { config } = this.allSourceData;
this.initConfig(config);
this.newFileList = this.value ? JSON.parse(this.value) : []
const { config } = this.allSourceData
this.initConfig(config)
this.newFileList.forEach(item => {
const { NewFileName } = item;
const { NewFileName } = item
this.$set(
item,
"file",
'file',
`fileresourceAPI/file/${this.appCode}/${NewFileName}/`
);
this.$set(item, "fileListImage", [
)
this.$set(item, 'fileListImage', [
`fileresourceAPI/file/${this.appCode}/${NewFileName}/`
]);
});
])
})
},
initConfig(config = {}) {
this.configData = Object.assign(this.configData, config);
const appCode_ = this.configData.appCode;
const { appCode } = commonUtility.parseUrlQueryBIDyncAppcodePageName();
const appCode__ = appCode_ || appCode;
this.appCode = appCode__;
const { multiple } = this.configData;
this.configData = Object.assign(this.configData, config)
const appCode_ = this.configData.appCode
const { appCode } = commonUtility.parseUrlQueryBIDyncAppcodePageName()
const appCode__ = appCode_ || appCode
this.appCode = appCode__
const { multiple } = this.configData
if (!multiple && this.newFileList.length) {
this.fileName = this.newFileList[0].OldFileName;
this.fileName = this.newFileList[0].OldFileName
}
},
handleClose(done) {
this.$confirm("确认关闭?")
this.$confirm('确认关闭?')
.then(_ => {
done();
done()
})
.catch(_ => {});
.catch(_ => {})
},
imgPreview(file) {
const self = this;
const self = this
// 看支持不支持FileReader
if (!file || !window.FileReader) return;
if (!file || !window.FileReader) return
// 创建一个reader
const reader = new FileReader();
const reader = new FileReader()
// 将图片将转成 base64 格式
reader.readAsDataURL(file);
reader.readAsDataURL(file)
// 读取成功后的回调
reader.onloadend = function() {
const type = file.type;
const type = file.type
if (/^image/.test(type)) {
self.fileListImage.push(this.result);
self.fileListImage.push(this.result)
} else {
self.fileListNoImage.push({
name: file.name
});
})
}
self.fileList.push({
type: file.type,
......@@ -335,70 +335,70 @@ export default {
file: this.result,
fileBrod: file,
previewList: [this.result]
});
};
})
}
},
handleFileChange(e) {
const inputDOM = document.getElementById("avatar");
this.file = inputDOM.files[0];
this.files = Array.from(inputDOM.files);
const inputDOM = document.getElementById('avatar')
this.file = inputDOM.files[0]
this.files = Array.from(inputDOM.files)
// 在获取到文件对象进行预览就行了!
this.files.forEach(item => {
this.imgPreview(item);
});
this.imgPreview(item)
})
// 清除当前input 值
e.target.value = "";
e.target.value = ''
},
deleteCurrImage(image, index) {
this.fileList.splice(index, 1);
this.fileList.splice(index, 1)
},
preview(item, index) {
const { name } = item;
this.$set(item, "file", `fileresourceAPI/file/${this.appCode}/${name}/`);
this.$set(item, "fileListImage", [
const { name } = item
this.$set(item, 'file', `fileresourceAPI/file/${this.appCode}/${name}/`)
this.$set(item, 'fileListImage', [
`fileresourceAPI/file/${this.appCode}/${name}/`
]);
])
},
deleteFile(item, index) {
this.fileList.splice(index, 1);
this.fileList.splice(index, 1)
},
deleteExitFile(item, index) {
this.newFileList.splice(index, 1);
this.newFileList.splice(index, 1)
},
async upload() {
const formData = new FormData();
const formData = new FormData()
if (!this.fileList.length) {
this.$message.error("请选择文件!");
return;
this.$message.error('请选择文件!')
return
}
const { multiple } = this.configData;
const { multiple } = this.configData
if (!multiple) {
if (this.newFileList.length >= 1) {
this.$message.error("仅支持单文件上传,请手动删除服务器文件后再试!");
return;
this.$message.error('仅支持单文件上传,请手动删除服务器文件后再试!')
return
}
}
this.fileList.forEach(element => {
const { NewFileName, fileBrod } = element;
formData.append(NewFileName, fileBrod);
});
const newFileList = [];
const res = await this.uploadFileFun(formData);
const { NewFileName, fileBrod } = element
formData.append(NewFileName, fileBrod)
})
const newFileList = []
const res = await this.uploadFileFun(formData)
const resData = (res.data || []).filter(item => {
return item.Sucess;
});
return item.Sucess
})
const resDataError = (res.data || []).filter(item => {
return !item.Sucess;
});
let errorStr = "";
return !item.Sucess
})
let errorStr = ''
resDataError.forEach(jtem => {
const { Error, OldFileName } = jtem;
errorStr += `${OldFileName}:${Error}`;
});
const { Error, OldFileName } = jtem
errorStr += `${OldFileName}:${Error}`
})
if (errorStr) {
this.$message.error(errorStr);
this.$message.error(errorStr)
}
console.log(this.appCode);
console.log(this.appCode)
resData.forEach(item => {
newFileList.push({
......@@ -408,24 +408,24 @@ export default {
fileListImage: [
`fileresourceAPI/file/${this.appCode}/${item.NewFileName}/`
]
});
})
const targetIndex = this.fileList.findIndex(
item_ => item_.NewFileName === item.OldFileName
);
this.fileList.splice(targetIndex, 1);
});
this.newFileList.push(...newFileList);
)
this.fileList.splice(targetIndex, 1)
})
this.newFileList.push(...newFileList)
if (!multiple && this.newFileList.length) {
this.fileName = this.newFileList[0].OldFileName;
this.fileName = this.newFileList[0].OldFileName
}
const { uploaded } = this.configData;
if (typeof uploaded === "function") {
uploaded(this.newFileList);
const { uploaded } = this.configData
if (typeof uploaded === 'function') {
uploaded(this.newFileList)
}
localStorage["exitImage"] = JSON.stringify(this.newFileList);
localStorage['exitImage'] = JSON.stringify(this.newFileList)
}
}
};
}
</script>
<style scoped>
.file {
......
......@@ -79,16 +79,16 @@
</template>
<script>
import uuidv1 from "uuid/v1";
import jsoneditor from "../common/jsoneditor";
import mockData from "../common/initDbConfigDataJson";
import ucComponent from "../ucClass/uc_component";
import _ from "lodash";
import commonUtility from "../funTools/commonUtility";
import dialogIframe from "../common/dialogTemplate/dialogIframe";
import uuidv1 from 'uuid/v1'
import jsoneditor from '../common/jsoneditor'
import mockData from '../common/initDbConfigDataJson'
import ucComponent from '../ucClass/uc_component'
import _ from 'lodash'
import commonUtility from '../funTools/commonUtility'
import dialogIframe from '../common/dialogTemplate/dialogIframe'
export default {
mixins: [ucComponent],
name: "hsSelectPlus",
name: 'hsSelectPlus',
components: {
jsoneditor,
dialogIframe
......@@ -101,31 +101,31 @@ export default {
elInfo: {
type: Object,
default() {
return {};
return {}
}
},
allSourceData: {
type: Object,
default() {
return {};
return {}
}
},
jsoneditorCloseAfter: {
type: Function,
default() {
return () => {};
return () => {}
}
},
jsoneditorOpenAfter: {
type: Function,
default() {
return () => {};
return () => {}
}
},
value: "",
value: '',
writeBackObject: {
default() {
return {};
return {}
}
},
readonly: {
......@@ -135,546 +135,546 @@ export default {
data() {
return {
options: [],
value_inner: this.multiple ? [] : "",
value_inner: this.multiple ? [] : '',
filterable: false,
remote: false,
// url_static: 'commonUtilAPI/ref/items/',
// url_dynamic: 'commonUtilAPI/ref/table/',
url_static: "commonUtilAPI/",
url_dynamic: "commonUtilAPI/ref/table/",
url_ipCommonAPI: "ipCommonAPI/",
real_url: "",
elId: "",
url_static: 'commonUtilAPI/',
url_dynamic: 'commonUtilAPI/ref/table/',
url_ipCommonAPI: 'ipCommonAPI/',
real_url: '',
elId: '',
chart: null,
jsoneditorVisible: false, // 是否显示动态配置的弹框
editData: {
config: {},
sourceData: [],
sql: ""
sql: ''
},
configData: {
url: "",
url: '',
ref: {
const_id: "",
table_name: "",
columns: "",
remote_condition: "",
displayfield: "", // 默认值
const_id: '',
table_name: '',
columns: '',
remote_condition: '',
displayfield: '', // 默认值
writebackfield: []
},
multiple: false,
collapse_tags: true,
disabled: false,
size: "mini",
size: 'mini',
clearable: true,
title: "",
value: "",
label: "",
title: '',
value: '',
label: '',
parms: {},
placeholder: "请选择",
placeholder: '请选择',
is_computed: false,
remote: false,
filterable: false
},
emptyList: [undefined, "undefined", null, "null", ""],
emptyList: [undefined, 'undefined', null, 'null', ''],
number: 0,
menuGlobalParams: {},
focus: false,
writeBackObject_: {},
dialogIframeSrc: "",
dialogIframeSrc: '',
dialogIframeVisible: false,
linkBtnUiVis: false,
linkUiBtnTxt: "调整"
};
linkUiBtnTxt: '调整'
}
},
computed: {
dialogIfameVis: function() {
const linkBtnUi = !!this.configData.linkBtnUi;
return linkBtnUi;
const linkBtnUi = !!this.configData.linkBtnUi
return linkBtnUi
},
isReadOnly: function() {
return this.readonly || this.configData.disabled;
return this.readonly || this.configData.disabled
},
isReadOnly1: function() {
if (
this.containerType !== "editArea" &&
this.containerType !== 'editArea' &&
(this.readonly || this.configData.disabled)
) {
return true;
return true
}
},
isReadOnly2: function() {
// 是编辑框
if (
this.containerType === "editArea" &&
this.containerType === 'editArea' &&
(this.readonly || this.configData.disabled)
) {
return true;
return true
}
}
},
watch: {
writeBackObject: {
handler(newValue, oldValue) {
const linkProp = this.configData.linkProp;
const displayfield = this.configData.ref.displayfield;
const remote_condition = this.configData.ref.remote_condition;
const newData = newValue[linkProp];
const oldData = this.writeBackObject_[linkProp];
const linkProp = this.configData.linkProp
const displayfield = this.configData.ref.displayfield
const remote_condition = this.configData.ref.remote_condition
const newData = newValue[linkProp]
const oldData = this.writeBackObject_[linkProp]
if (linkProp && newData !== oldData) {
this.value_inner = "";
this.$emit("input", "");
this.writeBackObject[displayfield] = "";
this.value_inner = ''
this.$emit('input', '')
this.writeBackObject[displayfield] = ''
if (remote_condition) {
this.remoteMethod_();
this.remoteMethod_()
}
}
this.writeBackObject_ = _.cloneDeep(newValue);
this.writeBackObject_ = _.cloneDeep(newValue)
},
deep: true
},
value: {
handler(newValue, oldValue) {
this.initValue(newValue);
this.initValue(newValue)
},
deep: true
},
allSourceData: {
handler: function(newVal, oldVal) {
this.initData(newVal);
this.initValue(this.value);
this.number += 1;
this.initData(newVal)
this.initValue(this.value)
this.number += 1
if (this.number <= 2) {
this.clientData();
this.clientData()
}
},
deep: true
}
},
created() {
this.elId = uuidv1(); // 获取随机id
this.elId = uuidv1() // 获取随机id
},
mounted() {
this.$nextTick(() => {
this.placeholder = this.elInfo.placeholder;
this.title = this.elInfo.title;
this.initData(this.allSourceData);
this.initValue(this.value);
this.clientData();
});
this.placeholder = this.elInfo.placeholder
this.title = this.elInfo.title
this.initData(this.allSourceData)
this.initValue(this.value)
this.clientData()
})
},
methods: {
async clientData() {
const { config, sourceData } = this.allSourceData;
const { config } = this.allSourceData
if (config && Object.keys(config).length > 0) {
const isInnerRequest = config.isInnerRequest;
const isInnerRequest = config.isInnerRequest
if (isInnerRequest) {
const datas = await this.requestMethod(config);
this.options = datas || [];
const datas = await this.requestMethod(config, undefined, this.writeBackObject)
this.options = datas || []
}
}
},
closeDialog() {
this.dialogIframeVisible = false;
this.dialogIframeVisible = false
},
linkBtnUiBack(data) {
const linkBtnUi = this.configData.linkBtnUi;
if (!linkBtnUi) return;
const writeProp = linkBtnUi.writeProp || {};
const linkBtnUi = this.configData.linkBtnUi
if (!linkBtnUi) return
const writeProp = linkBtnUi.writeProp || {}
for (const key in writeProp) {
const value = writeProp[key];
this.$set(this.writeBackObject, key, data[value]);
const value = writeProp[key]
this.$set(this.writeBackObject, key, data[value])
}
this.dialogIframeVisible = false;
this.dialogIframeVisible = false
},
jumpSelect() {
const item = this.configData.linkBtnUi;
const { url, dyncQueryParms, newDefault } = item;
const newDefaultStr = JSON.stringify(newDefault);
const parms = _.cloneDeep(dyncQueryParms || {});
parms.newDefault = newDefaultStr;
const href = location.href;
const startUrl = href.split("#")[0];
let url_ = url;
const parseQuery = commonUtility.parseUrlQueryString();
const { db_name } = parseQuery;
const item = this.configData.linkBtnUi
const { url, dyncQueryParms, newDefault } = item
const newDefaultStr = JSON.stringify(newDefault)
const parms = _.cloneDeep(dyncQueryParms || {})
parms.newDefault = newDefaultStr
const href = location.href
const startUrl = href.split('#')[0]
let url_ = url
const parseQuery = commonUtility.parseUrlQueryString()
const { db_name } = parseQuery
if (db_name) {
parms.db_name = db_name;
parms.db_name = db_name
}
if (item.url.includes("?")) {
url_ = url + "&fromMenu=1";
if (item.url.includes('?')) {
url_ = url + '&fromMenu=1'
} else {
url_ = url + "?fromMenu=1";
url_ = url + '?fromMenu=1'
}
let parmsStr = "";
let parmsStr = ''
for (const key in parms) {
parmsStr += `&${key}=${parms[key]}`;
parmsStr += `&${key}=${parms[key]}`
}
let url__ = "";
if (url.startsWith("http")) {
url__ = `${url_}` + parmsStr + "&isInnerDialog=1";
let url__ = ''
if (url.startsWith('http')) {
url__ = `${url_}` + parmsStr + '&isInnerDialog=1'
} else {
url__ = `${startUrl}#${url_}` + parmsStr + "&isInnerDialog=1";
url__ = `${startUrl}#${url_}` + parmsStr + '&isInnerDialog=1'
}
this.dialogIframeSrc = url__;
this.dialogIframeVisible = true;
this.dialogIframeSrc = url__
this.dialogIframeVisible = true
},
disAbledFun() {
return this.readonly || this.configData.disabled;
return this.readonly || this.configData.disabled
},
initValue(value) {
if (!Object.keys(this.allSourceData.config || {}).length) return;
const is_computed = this.configData.is_computed;
const { multiple } = this.configData;
if (!Object.keys(this.allSourceData.config || {}).length) return
const is_computed = this.configData.is_computed
const { multiple } = this.configData
if (is_computed) {
// 计算模式
this.value_inner = this.ten_twe_tans(value);
this.value_inner = this.ten_twe_tans(value)
} else {
if (multiple) {
this.value_inner = value ? value.split(",") : [];
this.value_inner = value ? value.split(',') : []
} else {
this.value_inner = value;
this.value_inner = value
}
if (value === null || value === "null") {
this.value_inner = "";
if (value === null || value === 'null') {
this.value_inner = ''
}
this.setDefault();
this.setDefault()
}
},
getSysParams() {
const { db_name, is_mock, db_code } = commonUtility.parseUrlQueryString();
const { db_name, is_mock, db_code } = commonUtility.parseUrlQueryString()
const {
appCode,
pagename
} = commonUtility.parseUrlQueryBIDyncAppcodePageName();
const isMock = this.emptyList.includes(is_mock) ? 1 : is_mock;
const dbName = db_name || "";
} = commonUtility.parseUrlQueryBIDyncAppcodePageName()
const isMock = this.emptyList.includes(is_mock) ? 1 : is_mock
const dbName = db_name || ''
const obj = _.cloneDeep({
dbName,
appCode,
page: pagename,
isMock,
db_code
});
return obj;
})
return obj
},
mergeCinfig(config1, config2) {
Object.assign(config1, config2);
Object.assign(config1, config2)
},
initConfig(config) {
this.mergeCinfig(this.configData, _.cloneDeep(config));
this.mergeCinfig(this.configData, _.cloneDeep(config))
if (this.configData.ref) {
this.configData.remote = !!this.configData.ref.remote_condition;
this.configData.filterable = !!this.configData.ref.remote_condition;
this.configData.remote = !!this.configData.ref.remote_condition
this.configData.filterable = !!this.configData.ref.remote_condition
}
const linkBtnUi = this.configData.linkBtnUi;
this.linkBtnUiVis = !!linkBtnUi;
const linkBtnUi = this.configData.linkBtnUi
this.linkBtnUiVis = !!linkBtnUi
if (this.linkBtnUiVis) {
this.linkUiBtnTxt = this.configData.linkBtnUi.label;
this.linkUiBtnTxt = this.configData.linkBtnUi.label
}
},
async initData(allSourceData) {
const { config, sourceData, is_mock } = _.cloneDeep(allSourceData);
this.is_mock = is_mock;
const { config, sourceData, is_mock } = _.cloneDeep(allSourceData)
this.is_mock = is_mock
if (!sourceData) {
this.initMockData();
this.initMockData()
} else {
this.initConfig(config);
this.dealWithData(sourceData);
this.initConfig(config)
this.dealWithData(sourceData)
}
},
autoAddNullValue(data) {
const sourceData = _.cloneDeep(data);
const sourceData = _.cloneDeep(data)
if (Array.isArray(sourceData)) {
const list = sourceData.map(item => {
if (item.value !== "") {
return Number(item.value);
if (item.value !== '') {
return Number(item.value)
}
});
const hasNaN = list.find(item => isNaN(item));
const zeroTarget = list.find(item => item === 0 || item === "0");
let hasZero = false;
if (zeroTarget === 0 || hasZero === "0") {
hasZero = true;
})
const hasNaN = list.find(item => isNaN(item))
const zeroTarget = list.find(item => item === 0 || item === '0')
let hasZero = false
if (zeroTarget === 0 || hasZero === '0') {
hasZero = true
}
if (!hasZero && !hasNaN) {
sourceData.unshift({
value: "0",
label: " "
});
value: '0',
label: ' '
})
}
}
return sourceData;
return sourceData
},
dealWithData(data) {
const sourceData = this.autoAddNullValue(data);
const sourceData_ = _.cloneDeep(sourceData);
const sourceData = this.autoAddNullValue(data)
const sourceData_ = _.cloneDeep(sourceData)
this.options = Array.isArray(sourceData_)
? this.tansLate(sourceData_)
: this.translate_json(sourceData_);
: this.translate_json(sourceData_)
},
setDefault() {
const { value, multiple, ref } = this.configData;
const displayfield = ref && ref.displayfield;
const writebackfield = ref.writebackfield || [];
const { value, multiple, ref } = this.configData
const displayfield = ref && ref.displayfield
const writebackfield = ref.writebackfield || []
// 查找一下默认值,如果不存在就设置display_field
const t = this.options.find(xs => {
if (xs[value] === this.value && this.value !== undefined) {
return xs[value] === this.value;
return xs[value] === this.value
}
});
let displayfield_value = "";
displayfield_value = this.writeBackObject[displayfield];
if (!t && displayfield_value && displayfield_value !== "null") {
})
let displayfield_value = ''
displayfield_value = this.writeBackObject[displayfield]
if (!t && displayfield_value && displayfield_value !== 'null') {
// 不存在就设置默认值
this.value_inner = multiple
? displayfield_value.split(",")
: displayfield_value;
? displayfield_value.split(',')
: displayfield_value
}
const targetItem = this.options.find(
item => item.value === this.value_inner
);
)
if (targetItem) {
for (const item of writebackfield) {
const [key, value] = item.split("=");
const result = value ? targetItem[value] : targetItem[key];
const [key, value] = item.split('=')
const result = value ? targetItem[value] : targetItem[key]
if (result !== undefined) {
this.$set(this.writeBackObject, key, result);
this.$set(this.writeBackObject, key, result)
}
}
}
},
initMockData() {
this.initMockSelectData(this.elInfo.el);
this.initMockSelectData(this.elInfo.el)
},
// 折线图的模拟数据
initMockSelectData(type) {
const mockData_ = mockData[type];
if (!mockData_) return;
this.editData.config = mockData_.config;
this.editData.sourceData = mockData_.sourceData;
this.options = mockData_.sourceData;
const mockData_ = mockData[type]
if (!mockData_) return
this.editData.config = mockData_.config
this.editData.sourceData = mockData_.sourceData
this.options = mockData_.sourceData
},
checkUndefinedOrNullOrStr(val) {
const result = [undefined, null, ""];
return result.includes(val);
const result = [undefined, null, '']
return result.includes(val)
},
// 复合值转换成2进制
ten_twe_tans(val) {
const list = parseInt(val)
.toString(2)
.split("")
.reverse();
const result = [];
.split('')
.reverse()
const result = []
list.forEach((x, index) => {
if (typeof this.value === "number") {
x.toString() === "1" ? result.push(2 ** index) : "";
if (typeof this.value === 'number') {
x.toString() === '1' ? result.push(2 ** index) : ''
} else {
x.toString() === "1" ? result.push((2 ** index).toString()) : "";
x.toString() === '1' ? result.push((2 ** index).toString()) : ''
}
});
return result;
})
return result
},
// 节流
remoteMethodsDebounce: _.debounce(async function(query) {
if (this.is_mock) return;
const data = await this.requestMethod(this.configData, query || "");
this.options = this.tansLate(data || []);
if (this.is_mock) return
const data = await this.requestMethod(this.configData, query || '', this.writeBackObject)
this.options = this.tansLate(data || [])
}, 1000),
async remoteMethod_(query) {
await this.remoteMethodsDebounce(query, this.configData);
await this.remoteMethodsDebounce(query, this.configData)
},
clear_select() {
const { ref, linkBtnUi, cleared, changed } = this.configData;
const { writebackfield } = ref;
const { ref, linkBtnUi, cleared, changed } = this.configData
const { writebackfield } = ref
if (Array.isArray(writebackfield)) {
for (const item of writebackfield) {
const [key] = item.split("=");
this.$set(this.writeBackObject, key, "");
const [key] = item.split('=')
this.$set(this.writeBackObject, key, '')
}
}
if (linkBtnUi) {
const writeProp = linkBtnUi.writeProp || {};
const writeProp = linkBtnUi.writeProp || {}
for (const key in writeProp) {
this.$set(this.writeBackObject, key, "");
this.$set(this.writeBackObject, key, '')
}
}
this.$emit("input", "");
this.$emit("clear_callback", "");
this.$emit('input', '')
this.$emit('clear_callback', '')
this.$nextTick(() => {
this.exectAction(cleared);
this.exectAction(changed);
});
this.exectAction(cleared)
this.exectAction(changed)
})
},
select_focus(event) {
const { remote_condition } = this.configData.ref;
const { remote_condition } = this.configData.ref
if (remote_condition && !this.is_mock) {
this.remoteMethod_();
this.remoteMethod_()
}
},
exectAction(action) {
const type = typeof action;
if (type === "function") {
action(this.value, this.writeBackObject);
const type = typeof action
if (type === 'function') {
action(this.value, this.writeBackObject)
}
},
change(val) {
const is_computed = this.configData.is_computed;
const is_computed = this.configData.is_computed
if (is_computed) {
// 计算模式
const s = val.reduce((prve, next) => {
return Number(prve) + Number(next);
}, 0);
this.$emit("input", typeof this.value === "number" ? s : s.toString());
return Number(prve) + Number(next)
}, 0)
this.$emit('input', typeof this.value === 'number' ? s : s.toString())
} else {
const { multiple, ref } = this.configData;
const { writebackfield } = ref;
const { multiple, ref } = this.configData
const { writebackfield } = ref
if (multiple) {
const f_list = this.options.filter(xs => val.includes(xs.value));
const f_list = this.options.filter(xs => val.includes(xs.value))
if (writebackfield) {
if (Array.isArray(writebackfield)) {
for (const item of writebackfield) {
const [key, value] = item.split("=");
const [key, value] = item.split('=')
const r = f_list.map(xs => {
return value ? xs[value] : xs[key];
});
this.$set(this.writeBackObject, key, r.join());
return value ? xs[value] : xs[key]
})
this.$set(this.writeBackObject, key, r.join())
}
} else {
const f_label = f_list.map(xs => {
return xs.label;
});
this.$set(this.writeBackObject, writebackfield, f_label.join());
return xs.label
})
this.$set(this.writeBackObject, writebackfield, f_label.join())
}
}
this.$emit("input", val.join());
this.$emit('input', val.join())
const return_obj = {
val,
data: this.writeBackObject ? this.writeBackObject : {}
};
this.$emit("change_callback", return_obj);
}
this.$emit('change_callback', return_obj)
} else {
// 单选模式
const target = this.options.find(xs => val === xs.value);
const target = this.options.find(xs => val === xs.value)
if (val === "0" || (target && target.label === " ")) {
this.$emit("input", "");
this.value_inner = "";
if (val === '0' || (target && target.label === ' ')) {
this.$emit('input', '')
this.value_inner = ''
}
if (val && this.configData.allowCreate) {
this.$emit("input", val);
this.value_inner = val;
this.$emit('input', val)
this.value_inner = val
}
if (writebackfield && target) {
if (Array.isArray(writebackfield)) {
for (const item of writebackfield) {
const [key, value] = item.split("=");
if (value && !value.startsWith("$")) {
const result = value ? target[value] : target[key];
if (!value.startsWith("$")) {
const [key, value] = item.split('=')
if (value && !value.startsWith('$')) {
const result = value ? target[value] : target[key]
if (!value.startsWith('$')) {
// 取下拉里面的值
if (result !== undefined) {
this.$set(this.writeBackObject, key, result);
this.$set(this.writeBackObject, key, result)
}
} else {
// 直接设置值
const str = val.substr(1, length);
this.$set(this.writeBackObject, key, str);
const str = val.substr(1, length)
this.$set(this.writeBackObject, key, str)
}
}
}
} else {
this.$set(this.writeBackObject, writebackfield, target.label);
this.$set(this.writeBackObject, writebackfield, target.label)
}
}
const return_obj = {
val,
data: this.writeBackObject ? this.writeBackObject : {}
};
if (target.label !== " ") {
this.$emit("input", val);
this.$emit("change_callback", return_obj);
}
if (target.label !== ' ') {
this.$emit('input', val)
this.$emit('change_callback', return_obj)
}
}
}
const changed = this.configData.changed;
const changed = this.configData.changed
this.$nextTick(() => {
this.exectAction(changed);
});
this.exectAction(changed)
})
// setTimeout(() => {
// this.exectAction(changed)
// }, 1)
},
tansLate(data) {
const arr = data;
const list = [];
const { value, label } = this.configData;
const arr = data
const list = []
const { value, label } = this.configData
arr.forEach(element => {
const parm = {};
const parm = {}
for (const pro in element) {
if (pro === value && value === label) {
parm.value = element[pro];
parm.label = element[pro];
parm.value = element[pro]
parm.label = element[pro]
} else if (pro === value) {
parm.value = element[pro];
parm.value = element[pro]
} else if (pro === label) {
parm.label = element[label];
parm.label = element[label]
}
parm[pro] = element[pro];
parm[pro] = element[pro]
}
list.push(parm);
});
list.push(parm)
})
return list;
return list
},
tansLateParm(obj) {
const { url } = this.configData;
let str;
if (url.includes("/?")) {
str = "&";
const { url } = this.configData
let str
if (url.includes('/?')) {
str = '&'
} else {
str = "?";
str = '?'
}
for (const prop in obj) {
if (obj[prop]) {
str += `${prop}=${obj[prop]}&`;
str += `${prop}=${obj[prop]}&`
}
}
return str === "?" ? "" : str;
return str === '?' ? '' : str
},
translate_json(data = {}) {
const list = [];
const list = []
for (const prop in data) {
const parm = {};
parm.value = data[prop];
parm.label = prop;
list.push(parm);
const parm = {}
parm.value = data[prop]
parm.label = prop
list.push(parm)
}
return list;
return list
},
initRealUrl() {
const { url, ref } = this.configData;
const { const_id, table_name, columns, remote_condition } = ref;
const { url, ref } = this.configData
const { const_id, table_name, columns, remote_condition } = ref
if (remote_condition) {
if (table_name) {
return `${this.url_dynamic}${table_name}/${columns}/`;
return `${this.url_dynamic}${table_name}/${columns}/`
} else {
return `${this.url_ipCommonAPI}${url}`;
return `${this.url_ipCommonAPI}${url}`
}
} else {
if (const_id) {
return const_id;
return const_id
} else if (table_name) {
return `${table_name}/${columns}`;
return `${table_name}/${columns}`
} else {
return url;
return url
}
}
}
}
};
}
</script>
<style scoped>
......
......@@ -309,18 +309,18 @@
</div>
</template>
<script>
import commonUtility from "../funTools/commonUtility";
import uuidv1 from "uuid/v1";
import mes_style from "./mes_style";
import screen_style from "./screen_style";
import _ from "lodash";
import request from "../funTools/request";
import tableDeatil from "./tableDetail";
import jsoneditor from "../common/jsoneditor";
import childItem from "./ItemComponentChild";
import tbaleColumsSet from "../common/tbaleColumsSet";
import dialogUpload from "../common/dialogTemplate/dialogUpload";
import dialogIframe from "../common/dialogTemplate/dialogIframe";
import commonUtility from '../funTools/commonUtility'
import uuidv1 from 'uuid/v1'
import mes_style from './mes_style'
import screen_style from './screen_style'
import _ from 'lodash'
import request from '../funTools/request'
import tableDeatil from './tableDetail'
import jsoneditor from '../common/jsoneditor'
import childItem from './ItemComponentChild'
import tbaleColumsSet from '../common/tbaleColumsSet'
import dialogUpload from '../common/dialogTemplate/dialogUpload'
import dialogIframe from '../common/dialogTemplate/dialogIframe'
// const tableDeatil = r => require.ensure([], () => r(require('./tableDetail')), 'tableDeatil_')
// const childItem = r => require.ensure([], () => r(require('./ItemComponentChild')), 'ItemComponentChild_')
// const jsoneditor = r => require.ensure([], () => r(require('../common/jsoneditor')), 'jsoneditor_')
......@@ -337,13 +337,13 @@ export default {
dialogUpload,
dialogIframe
},
name: "hsTable",
name: 'hsTable',
props: {
importInfo: {
// 导入信息
type: Array,
default() {
return [];
return []
}
},
isEditColumns: {}, // 是否可编辑列
......@@ -353,7 +353,7 @@ export default {
// 组件信息
type: Object,
default() {
return {};
return {}
}
},
allSourceData: {
......@@ -363,24 +363,24 @@ export default {
return {
config: {},
sourceData: [],
picture_url: ""
};
picture_url: ''
}
}
},
isCarousel: {
type: Boolean,
default() {
return true;
return true
}
},
params: {
type: Object,
default() {
return {
el: "hsTable",
page: "page1",
position: "table1"
};
el: 'hsTable',
page: 'page1',
position: 'table1'
}
}
},
layout: {},
......@@ -405,34 +405,34 @@ export default {
// 外部传入的操作列
type: Array,
default() {
return [];
return []
}
},
dtl_list: {
// 外部传入的操作列
type: Array,
default() {
return [];
return []
}
},
fromWhere: {
// 来自哪里的表格 列表 or 详情
default: "list"
default: 'list'
},
entityManger: {} // 实体manger
},
data() {
return {
imgUrl: "",
elId: "",
imgUrl: '',
elId: '',
tableData: [],
configData: {
toolItems: [],
handleColumns: []
},
jsoneditorVisible: false,
tableStyle: "",
imgStyle: "",
tableStyle: '',
imgStyle: '',
pageArr: {},
page: 0,
currentPage: 0,
......@@ -440,7 +440,7 @@ export default {
tableObj: {},
time: 0,
timer: null,
fit: "fill",
fit: 'fill',
paging: null,
paginationPage: 1,
paginationPageSize: 50,
......@@ -449,8 +449,8 @@ export default {
tableDataDetail: [],
tableHeader: [],
outBoxDom: null,
maxHeight_: "none",
isPicture: "",
maxHeight_: 'none',
isPicture: '',
columnsProp: [],
visible2: false,
cellDetailStyle: {},
......@@ -461,16 +461,16 @@ export default {
pageSizes: [10, 20, 50, 100, 200, 1000],
subjoinStyle: {
hyperlink: {
"text-decoration": "underline",
cursor: "pointer"
'text-decoration': 'underline',
cursor: 'pointer'
},
asyncQueryDetail: {
"text-decoration": "underline",
cursor: "pointer"
'text-decoration': 'underline',
cursor: 'pointer'
}
},
dialogVisiblePage: false,
pageSrc: "",
pageSrc: '',
handleWidth: 200,
allColumsConfig: {},
dataChangeNumber: 0,
......@@ -478,61 +478,61 @@ export default {
dialogVisibleTbaleColums: false,
dialogUploadVisible: false,
currentImportItem: null,
dialogIframeSrc: "",
dialogIframeSrc: '',
dialogIframeVisible: false,
tableDataFirst: null, // table[0]第一行数据
hsDyncProp: false, // 是否含有动态列
targetRowInner: {}, // 当前行
dtlDialogFormDisAbled: false,
highlightCurrentRow:true
};
highlightCurrentRow: true
}
},
watch: {
targetRowInner: {
handler: function(newVal, oldVal) {
this.$emit("setCurrentRow", newVal);
this.$emit('setCurrentRow', newVal)
},
deep: true
},
toggleRow: {
handler: function(newVal, oldVal) {
this.setRowSelect(newVal);
this.setRowSelect(newVal)
},
deep: true
},
paging: {
handler: function(newVal, oldVal) {
if (!newVal) return;
if (!newVal) return
const per_page = Array.isArray(newVal)
? parseInt(newVal[0].per_page)
: parseInt(newVal.per_page);
const list = [10, 20, 50, 100, 200, 1000];
: parseInt(newVal.per_page)
const list = [10, 20, 50, 100, 200, 1000]
if (!list.includes(per_page)) {
list.unshift(per_page);
list.unshift(per_page)
}
this.pageSizes = list;
this.pageSizes = list
},
deep: true
},
"allSourceData.sourceData": {
'allSourceData.sourceData': {
handler: function(newVal, oldVal) {
this.initTabelData(newVal);
this.initTabelData(newVal)
},
deep: true
},
"allSourceData.config": {
'allSourceData.config': {
handler: function(newVal, oldVal) {
this.initTabelconfig(newVal);
this.initTabelconfig(newVal)
},
deep: true
},
isCarousel: {
handler: function(newVal, oldVal) {
if (newVal && this.timer !== null) {
this.timer = setInterval(this.changeTableDataFun, newVal);
this.timer = setInterval(this.changeTableDataFun, newVal)
} else {
clearInterval(this.timer); // 清除定时器
this.timer = null;
clearInterval(this.timer) // 清除定时器
this.timer = null
}
},
deep: true
......@@ -540,7 +540,7 @@ export default {
time: {
handler: function(newVal, oldVal) {
if (newVal > 0 && this.isCarousel) {
this.timer = setInterval(this.changeTableDataFun, newVal);
this.timer = setInterval(this.changeTableDataFun, newVal)
}
},
deep: true
......@@ -548,322 +548,323 @@ export default {
},
computed: {
handleColumns_: function() {
const list1 = _.cloneDeep(this.handleColumns || []);
const list2 = _.cloneDeep(this.configData.handleColumns || []);
this.mergeData(list1, list2);
const list1 = _.cloneDeep(this.handleColumns || [])
const list2 = _.cloneDeep(this.configData.handleColumns || [])
this.mergeData(list1, list2)
list2.forEach(item => {
const { click, isHide } = item;
const isHideType = typeof isHide === "boolean";
if (!isHideType) return;
const { click, isHide } = item
const isHideType = typeof isHide === 'boolean'
if (!isHideType) return
switch (click) {
case "$addRow":
case "$deleteRow":
if (this.fromWhere === "hdrDtl") {
case '$addRow':
case '$deleteRow':
if (this.fromWhere === 'hdrDtl') {
if (this.readonly) {
this.$set(item, "disabled", true);
this.$set(item, 'disabled', true)
} else {
this.$set(item, "disabled", false);
this.$set(item, 'disabled', false)
}
}
if (this.readonly && this.fromWhere !== "hdrDtl") {
this.$set(item, "disabled", true);
if (this.readonly && this.fromWhere !== 'hdrDtl') {
this.$set(item, 'disabled', true)
}
break;
break
}
});
return list2;
})
return list2
},
tool_list: function() {
const newList = [];
const newVal_ = _.cloneDeep(this.importInfo);
const toolItems = _.cloneDeep(this.configData.toolItems || []);
newList.push(...newVal_, ...toolItems);
const newList = []
const newVal_ = _.cloneDeep(this.importInfo)
const toolItems = _.cloneDeep(this.configData.toolItems || [])
newList.push(...newVal_, ...toolItems)
newList.forEach(item => {
const { click, isHide } = item;
const isHideType = typeof isHide === "boolean";
const { click, isHide } = item
const isHideType = typeof isHide === 'boolean'
switch (click) {
case "$addRow":
case "$deleteRow":
if (this.fromWhere === "hdrDtl") {
case '$addRow':
case '$deleteRow':
if (this.fromWhere === 'hdrDtl') {
if (this.readonly) {
this.$set(item, "disabled", true);
this.$set(item, 'disabled', true)
} else if (isHide === undefined || isHideType) {
this.$set(item, "disabled", false);
this.$set(item, 'disabled', false)
}
}
if (this.readonly && this.fromWhere !== "hdrDtl") {
this.$set(item, "disabled", true);
if (this.readonly && this.fromWhere !== 'hdrDtl') {
this.$set(item, 'disabled', true)
}
break;
case "$excelImportItem":
case "$dataImportItem":
if (this.fromWhere === "hdrDtl") {
break
case '$excelImportItem':
case '$dataImportItem':
if (this.fromWhere === 'hdrDtl') {
if (this.readonly) {
this.$set(item, "disabled", true);
this.$set(item, 'disabled', true)
} else if (isHide === undefined || isHideType) {
this.$set(item, "disabled", false);
this.$set(item, 'disabled', false)
}
}
break;
break
}
});
return newList || [];
})
return newList || []
},
showSummary: function() {
const tkeys = Object.keys(this.total);
const tkeys = Object.keys(this.total)
const sumKey = this.columnsConfig.reduce((prve, curr) => {
if (curr.summarizing) {
prve.push(curr.prop);
prve.push(curr.prop)
}
return prve;
}, []);
return !!tkeys.length || !!sumKey.length;
return prve
}, [])
return !!tkeys.length || !!sumKey.length
}
},
created() {
this.elId = uuidv1(); // 获取随机id
this.elId = uuidv1() // 获取随机id
},
mounted() {
this.initTable(this.allSourceData);
this.initTable(this.allSourceData)
this.$nextTick(() => {
setTimeout(() => {
this.showEditJsonDialog();
}, 1000);
});
this.showEditJsonDialog()
}, 1000)
})
},
destroyed() {
if (this.outBoxDom) {
this.outBoxDom.removeEventListener("mousedown", this.boxEventMouse);
this.outBoxDom.removeEventListener('mousedown', this.boxEventMouse)
}
this.chart = null;
this.chart = null
},
beforeDestroy() {
clearInterval(this.timer); // 清除定时器
clearInterval(this.timer) // 清除定时器
if (this.chart) {
this.chart.clear();
this.chart.clear()
}
this.grouptableData = null;
this.chart = null;
this.timer = null;
this.time = 0;
this.grouptableData = null
this.chart = null
this.timer = null
this.time = 0
},
methods: {
disabledItem(item, row) {
const { disabled } = item;
const type = typeof disabled;
const { disabled } = item
const type = typeof disabled
const data = {
row,
item
};
if (type === "boolean") {
return disabled;
} else if (type === "function") {
return disabled(data);
}
if (type === 'boolean') {
return disabled
} else if (type === 'function') {
return disabled(data)
} else {
return false;
return false
}
},
showItem(item, row) {
const { isHide } = item;
const type = typeof isHide;
const { isHide } = item
const type = typeof isHide
const data = {
row,
item
};
if (type === "boolean") {
return !isHide;
} else if (type === "function") {
}
if (type === 'boolean') {
return !isHide
} else if (type === 'function') {
try {
return !isHide(data);
return !isHide(data)
} catch (error) {
console.log(error);
const funName = "$" + isHide;
this.$message.error(`${funName} 有误`);
console.log(error)
const funName = '$' + isHide
this.$message.error(`${funName} 有误`)
}
} else {
return true;
return true
}
},
cumputedisabled(item) {
return !!item.disabled;
return !!item.disabled
},
linkDtl(item, row) {
this.$emit("RowClick", {
this.$emit('RowClick', {
row: row
});
const that = this;
})
const that = this
setTimeout(() => {
const tartItem = that.dtl_list.find(item__ => item__.url === item.url);
this.$emit("linkDtl", tartItem, row);
}, 100);
},
mergeData(data1, data2, prop = "click") {
if (!Array.isArray(data1)) return;
if (!Array.isArray(data2)) return;
const list = [];
const tartItem = that.dtl_list.find(item__ => item__.url === item.url)
this.$emit('linkDtl', tartItem, row)
}, 100)
},
mergeData(data1, data2, prop = 'click') {
// data2 覆盖data1
if (!Array.isArray(data1)) return
if (!Array.isArray(data2)) return
const list = []
data1.forEach(item => {
let target = data2.find(_item => _item[prop] === item[prop]);
let target = data2.find(_item => _item[prop] === item[prop])
if (target) {
target = Object.assign(target, item);
target = Object.assign(item, target)
} else {
list.push(item);
list.push(item)
}
});
data2.push(...list);
})
data2.push(...list)
},
itemClickActionHandle(item, index, row) {
const { click } = item;
const type = typeof click;
if (type === "string" && click.startsWith("$")) {
const item_ = Object.assign({}, item);
item_.click = item_.click.substr(1);
this.itemClick(item_, index);
} else if (type === "function") {
click(row);
const { click } = item
const type = typeof click
if (type === 'string' && click.startsWith('$')) {
const item_ = Object.assign({}, item)
item_.click = item_.click.substr(1)
this.itemClick(item_, index)
} else if (type === 'function') {
click(row)
}
},
itemClickAction(item, index) {
const { click } = item;
const type = typeof click;
if (type === "string" && click.startsWith("$")) {
const item_ = Object.assign({}, item);
item_.click = item_.click.substr(1);
this.itemClick(item_);
} else if (type === "function") {
click(item);
const { click } = item
const type = typeof click
if (type === 'string' && click.startsWith('$')) {
const item_ = Object.assign({}, item)
item_.click = item_.click.substr(1)
this.itemClick(item_)
} else if (type === 'function') {
click(item)
}
},
itemClick(item, index) {
const { click } = item;
const { click } = item
switch (click) {
case "exportCurrPageData":
this.exportExcel(1);
break;
case "exportAllPageData":
this.exportExcel(2);
break;
case "tableColumnSet":
this.tableColumnSet();
break;
case "dataImportItem":
case "excelImportItem":
this.importItem(item);
break;
case "addRow":
this.addRow(index);
break;
case "deleteRow":
this.deleteRow(index);
break;
case "editRow":
this.editRow(index);
break;
case 'exportCurrPageData':
this.exportExcel(1)
break
case 'exportAllPageData':
this.exportExcel(2)
break
case 'tableColumnSet':
this.tableColumnSet()
break
case 'dataImportItem':
case 'excelImportItem':
this.importItem(item)
break
case 'addRow':
this.addRow(index)
break
case 'deleteRow':
this.deleteRow(index)
break
case 'editRow':
this.editRow(index)
break
}
},
editRow(index) {
const data = {
row: this.tableData[index],
index: index
};
this.$emit("editRow", data);
}
this.$emit('editRow', data)
},
addRow(index) {
this.$emit("addRow", index);
this.$emit('addRow', index)
},
deleteRow(index) {
if (typeof index === "number") {
this.tableData.splice(index, 1);
if (typeof index === 'number') {
this.tableData.splice(index, 1)
} else {
// 逆向循环删除数组某些项
var arr = this.tableData;
var arr = this.tableData
for (let i = arr.length - 1; i >= 0; i--) {
if (arr[i].isSelected) {
arr.splice(i, 1);
arr.splice(i, 1)
}
}
}
},
initTable(data) {
const { config, sourceData } = data;
this.initTabelData(sourceData);
this.initTabelconfig(config);
const { config, sourceData } = data
this.initTabelData(sourceData)
this.initTabelconfig(config)
},
getSessionInfo() {
const { db_name, db_code } = commonUtility.parseUrlQueryString();
const { db_name, db_code } = commonUtility.parseUrlQueryString()
const {
appCode,
pagename
} = commonUtility.parseUrlQueryBIDyncAppcodePageName();
const dbName = db_name || "";
} = commonUtility.parseUrlQueryBIDyncAppcodePageName()
const dbName = db_name || ''
const obj = _.cloneDeep({
dbName,
appCode,
page: pagename,
db_code
});
return obj;
})
return obj
},
importSuccess(data) {
this.$emit("importSuccess", data);
this.dialogIframeVisible = false;
this.$emit('importSuccess', data)
this.dialogIframeVisible = false
},
submitUpload(fileList) {
const file = fileList[0];
this.$emit("importItem", file.raw, this.currentImportItem);
const file = fileList[0]
this.$emit('importItem', file.raw, this.currentImportItem)
},
importItem(item) {
this.currentImportItem = item;
this.$emit("setCurrentImportItem", item);
const parms = item.parms;
this.currentImportItem = item
this.$emit('setCurrentImportItem', item)
const parms = item.parms
if (!item.url) {
// excel 导入
this.dialogUploadVisible = true;
this.dialogUploadVisible = true
} else {
if (!item.import_name) {
this.$message.error("请配置-import_name");
return;
this.$message.error('请配置-import_name')
return
}
// 数据导入
const href = location.href;
const startUrl = href.split("#")[0];
let url = item.url;
if (item.url.includes("?")) {
url = item.url + "&fromMenu=1";
const href = location.href
const startUrl = href.split('#')[0]
let url = item.url
if (item.url.includes('?')) {
url = item.url + '&fromMenu=1'
} else {
url = item.url + "?fromMenu=1";
url = item.url + '?fromMenu=1'
}
let parmsStr = "";
let parmsStr = ''
for (const key in parms) {
parmsStr += `&${key}=${parms[key]}`;
parmsStr += `&${key}=${parms[key]}`
}
const appInfo = this.getSessionInfo();
const appInfo = this.getSessionInfo()
const url_ =
`${startUrl}#${url}` + `&db_name=${appInfo.dbName}` + parmsStr;
this.dialogIframeSrc = url_;
this.dialogIframeVisible = true;
`${startUrl}#${url}` + `&db_name=${appInfo.dbName}` + parmsStr
this.dialogIframeSrc = url_
this.dialogIframeVisible = true
}
},
getPageInfo(info = this.elInfo) {
const data = {
sControl: info.position
};
return request.getSql(data);
}
return request.getSql(data)
},
async submitTableColums(data, flage) {
const res = await this.getPageInfo();
let paramsData = {};
const res = await this.getPageInfo()
let paramsData = {}
if (!res || (res && Array.isArray(res) && !res.length)) {
const { config, sourceData } = this.allSourceData;
paramsData.json_config = JSON.stringify(config);
paramsData.json_data = JSON.stringify(sourceData);
paramsData.is_mock = 1;
paramsData.query_sql = "";
const { config, sourceData } = this.allSourceData
paramsData.json_config = JSON.stringify(config)
paramsData.json_data = JSON.stringify(sourceData)
paramsData.is_mock = 1
paramsData.query_sql = ''
} else {
paramsData = res[0];
paramsData = res[0]
}
const { query_sql, json_config, json_data, is_mock } = paramsData;
const json_config_ = JSON.parse(json_config);
json_config_.columnsConfig = data;
const { query_sql, json_config, json_data, is_mock } = paramsData
const json_config_ = JSON.parse(json_config)
json_config_.columnsConfig = data
const dataw = {
sControl: this.elInfo.position,
sConfig: json_config_,
......@@ -871,194 +872,194 @@ export default {
sQuerySql: query_sql,
elInfo: this.elInfo,
is_mock: is_mock ? 1 : 0
};
}
request.runSave(dataw).then(res => {
if (flage !== "columnStyleSet") {
this.dialogVisibleTbaleColums = false;
if (flage !== 'columnStyleSet') {
this.dialogVisibleTbaleColums = false
}
this.configData.columnsConfig = data;
});
this.configData.columnsConfig = data
})
},
tableColumnSet() {
const config = _.cloneDeep(this.configData);
const config = _.cloneDeep(this.configData)
if (config && config.columnsConfig && config.columnsConfig.length) {
this.tableDataColums = [...config.columnsConfig];
this.tableDataColums = [...config.columnsConfig]
} else {
this.tableDataColums = [{}];
this.tableDataColums = [{}]
}
this.tableDataColums.forEach((item, index) => {
if (item.childs) {
this.tableDataColums.splice(index, 1, ...item.childs);
this.tableDataColums.splice(index, 1, ...item.childs)
}
});
this.dialogVisibleTbaleColums = true;
})
this.dialogVisibleTbaleColums = true
},
selectionChange(data) {
data.forEach(item => {
this.$set(item, "isSelected", true);
});
this.$emit("selectionChange", data);
this.$set(item, 'isSelected', true)
})
this.$emit('selectionChange', data)
},
jumpItem(prop) {
const target = this.columnsConfig.find(
item => item.prop === prop && !item.isHide
);
)
const target1 = this.columnsProp.find(
item => item.prop === prop && !item.isHide
);
return target || target1;
)
return target || target1
},
set_row_style(row) {
if (
row.bill_status === "5" ||
row.bill_status === '5' ||
row.usable === false ||
row.bUsable === false
) {
return {
"text-decoration": "line-through",
color: "#afafaf"
};
'text-decoration': 'line-through',
color: '#afafaf'
}
}
},
tableRowDblclick(row, column, event) {
const disaledDblClick = this.configData.disaledDblClick;
const disaledDblClick = this.configData.disaledDblClick
if (!disaledDblClick) {
this.$emit("tableRowDblclick", row);
this.$emit('tableRowDblclick', row)
}
},
selectAll(selection) {
this.tableData.forEach(item => {
this.$set(item, "isSelected", !!selection.length);
});
this.$set(item, 'isSelected', !!selection.length)
})
if (!selection.length) {
// 清空时 去掉当前行
this.$refs.hsTable.setCurrentRow();
this.$refs.hsTable.setCurrentRow()
}
},
selectCheckBox(selection, row) {
this.$set(row, "isSelected", !row.isSelected);
this.$set(row, 'isSelected', !row.isSelected)
// 设置当前行是否高亮
if (!row.isSelected) {
this.$refs.hsTable.setCurrentRow();
this.targetRowInner = {};
this.$refs.hsTable.setCurrentRow()
this.targetRowInner = {}
} else {
this.$refs.hsTable.setCurrentRow(row);
this.targetRowInner = row;
this.$refs.hsTable.setCurrentRow(row)
this.targetRowInner = row
}
},
async exportExcel(flage) {
const data = this.tableData;
const columnsProp_ = [];
const data = this.tableData
const columnsProp_ = []
this.columnsProp.forEach(item => {
if (item.childs) {
columnsProp_.push(...item.childs);
columnsProp_.push(...item.childs)
} else {
columnsProp_.push(item);
columnsProp_.push(item)
}
});
const tHeader = [];
})
const tHeader = []
columnsProp_.forEach(item => {
const str = `${item.label}=${item.prop}`;
tHeader.push(str);
});
const exportExcelName = this.configData.exportExcelName || "表";
const str = `${item.label}=${item.prop}`
tHeader.push(str)
})
const exportExcelName = this.configData.exportExcelName || '表'
if (flage === 2) {
const result = await this.getSourceData({
param: { per_page: -1 },
elInfo: this.elInfo
});
})
if (Array.isArray(result) && result.length) {
let exportExcelData = [];
let exportExcelData = []
if (result[0].json_data) {
const json_data =
typeof result[0].json_data === "string"
typeof result[0].json_data === 'string'
? JSON.parse(result[0].json_data)
: result[0].json_data;
: result[0].json_data
exportExcelData = Array.isArray(json_data)
? json_data
: json_data.table;
: json_data.table
} else {
exportExcelData = result;
exportExcelData = result
}
this.$utilsExcel.exportToExcel(
tHeader,
exportExcelData,
exportExcelName
);
)
} else {
this.$message.warning("暂无数据~");
this.$message.warning('暂无数据~')
}
} else {
this.$utilsExcel.exportToExcel(tHeader, data, exportExcelName);
this.$utilsExcel.exportToExcel(tHeader, data, exportExcelName)
}
},
handleClose() {
this.dialogVisiblePage = false;
this.dialogVisiblePage = false
},
headerClick(column, event) {
const target = event.target;
const className = target.className;
const target = event.target
const className = target.className
const data = {
prop: column.property,
order: ""
};
if (className && className.includes("sort-caret")) {
order: ''
}
if (className && className.includes('sort-caret')) {
if (
className.includes("ascending") &&
!target.className.includes("activeBottomSort")
className.includes('ascending') &&
!target.className.includes('activeBottomSort')
) {
data.order = "1";
target.className = target.className + " activeBottomSort";
data.order = '1'
target.className = target.className + ' activeBottomSort'
target.nextSibling.className = target.nextSibling.className.replace(
"activeTopSort",
""
);
'activeTopSort',
''
)
} else if (
className.includes("ascending") &&
target.className.includes("activeBottomSort")
className.includes('ascending') &&
target.className.includes('activeBottomSort')
) {
data.order = "";
target.className = target.className.replace("activeBottomSort", "");
data.order = ''
target.className = target.className.replace('activeBottomSort', '')
} else if (
className.includes("descending") &&
!target.className.includes("activeTopSort")
className.includes('descending') &&
!target.className.includes('activeTopSort')
) {
data.order = "0";
target.className = target.className + " activeTopSort";
data.order = '0'
target.className = target.className + ' activeTopSort'
target.previousSibling.className = target.previousSibling.className.replace(
"activeBottomSort",
""
);
'activeBottomSort',
''
)
} else if (
className.includes("descending") &&
target.className.includes("activeTopSort")
className.includes('descending') &&
target.className.includes('activeTopSort')
) {
data.order = "";
target.className = target.className.replace("activeTopSort", "");
data.order = ''
target.className = target.className.replace('activeTopSort', '')
}
this.$emit("sortChange", data);
this.$emit('sortChange', data)
}
},
ascendingClick() {},
renderHeader(h, { column, $index }) {
const { property, label } = column;
const { property, label } = column
const target = this.columnsProp.find(item => {
return item.prop === property && !item.isHide;
});
return item.prop === property && !item.isHide
})
if (!target) {
return label;
return label
}
let innerHtml = column.label;
let innerHtml = column.label
if (target && target.isRequired) {
innerHtml = '<i style="color:red;">*</i>' + innerHtml;
innerHtml = '<i style="color:red;">*</i>' + innerHtml
}
if (target && target.isSort) {
innerHtml +=
'<span class="caret-wrapper"><i class="sort-caret ascending"></i><i class="sort-caret descending"></i></span>';
'<span class="caret-wrapper"><i class="sort-caret ascending"></i><i class="sort-caret descending"></i></span>'
}
return h(
"span",
'span',
{
domProps: {
innerHTML: innerHtml
......@@ -1067,15 +1068,15 @@ export default {
click: this.ascendingClick
}
},
[h("span")]
);
[h('span')]
)
},
sortChange(column) {
const data = {
prop: column.prop,
order: column.order
};
this.$emit("sortChange", data);
}
this.$emit('sortChange', data)
},
cellClickItem(value, action) {},
cellDblclick(row, column, cell, event) {
......@@ -1083,709 +1084,708 @@ export default {
},
rowCellBoolean(value) {
if (Number(value)) {
return "el-icon-check";
return 'el-icon-check'
} else {
return "el-icon-close";
return 'el-icon-close'
}
},
getSummaries(param) {
const { columns } = param;
const sums = [];
const { columns } = param
const sums = []
const sumKey = this.columnsConfig.reduce((prve, curr) => {
if (curr.summarizing) {
prve.push(curr.prop);
prve.push(curr.prop)
}
return prve;
}, []);
const sumObj = {};
return prve
}, [])
const sumObj = {}
sumKey.forEach(key => {
sumObj[key] = 0;
sumObj[key] = 0
this.tableData.forEach(item => {
if (item[key]) {
sumObj[key] += Number(item[key]);
sumObj[key] += Number(item[key])
}
});
});
const total_ = Object.assign(_.cloneDeep(this.total));
const tkeys = Object.keys(total_);
})
})
const total_ = Object.assign(_.cloneDeep(this.total))
const tkeys = Object.keys(total_)
columns.forEach((column, index) => {
const { property } = column;
const { property } = column
if (index === 0) {
sums[index] = "合计";
sums[index] = '合计'
} else if (tkeys.length) {
if (tkeys.includes(property)) {
sums[index] = total_[property];
sums[index] = total_[property]
} else {
sums[index] = "";
sums[index] = ''
}
} else if (sumKey.length) {
if (sumKey.includes(property)) {
sums[index] = sumObj[property];
sums[index] = sumObj[property]
} else {
sums[index] = "";
sums[index] = ''
}
}
});
return sums;
})
return sums
},
jumpDisable(row, key) {
if (row[`_data_${key}`]) {
return false;
return false
} else {
return true;
return true
}
},
showpopover(row, key, cell) {
if (row[`_data_${key}`]) {
const _data_value = row[`_data_${key}`];
this.tableDataDetail = _data_value;
if (!this.tableDataDetail.length) return;
this.tableHeader = Object.keys(this.tableDataDetail[0]);
const _data_value = row[`_data_${key}`]
this.tableDataDetail = _data_value
if (!this.tableDataDetail.length) return
this.tableHeader = Object.keys(this.tableDataDetail[0])
} else {
// this.tableDataDetail = []
}
},
minWidthChildFun(label) {
const l = label.length;
const f = 12;
const minWidth = f * l; // 加上一个文字长度
return minWidth;
const l = label.length
const f = 12
const minWidth = f * l // 加上一个文字长度
return minWidth
},
minWidthFun(column, flage) {
// 表示要自适应
const { width, label, prop: property } = column;
if (width) return width;
if (this.configData.isAdaptive) return;
if (!label) return;
const l = flage === 1 ? label.length : label.split("__")[1].length;
const f = 12;
const { width, label, prop: property } = column
if (width) return width
if (this.configData.isAdaptive) return
if (!label) return
const l = flage === 1 ? label.length : label.split('__')[1].length
const f = 12
const sortList = this.columnsConfig.find(
item => item.isSort && item.prop === property
);
let minWidth = f * (l + 2);
)
let minWidth = f * (l + 2)
if (sortList) {
minWidth = f * (l + 4);
minWidth = f * (l + 4)
}
return minWidth;
return minWidth
},
initTabelData(sourceData) {
if (
sourceData &&
sourceData.picture_url &&
sourceData.picture_url !== ""
sourceData.picture_url !== ''
) {
this.imgUrl =
"/uploadAPI/file/" +
sessionStorage.getItem("app_code") +
"/" +
this.allSourceData.picture_url;
this.isPicture = "1";
'/uploadAPI/file/' +
sessionStorage.getItem('app_code') +
'/' +
this.allSourceData.picture_url
this.isPicture = '1'
} else {
this.isPicture = "0";
this.isPicture = '0'
}
if (sourceData) {
if (Array.isArray(sourceData)) {
this.tableData = sourceData;
this.paging = null;
this.total = {};
this.tableData = sourceData
this.paging = null
this.total = {}
} else {
const total = sourceData.total || sourceData.set3;
const total = sourceData.total || sourceData.set3
if (total) {
if (Array.isArray(total)) {
this.total = total[0];
this.total = total[0]
} else {
this.total = total;
this.total = total
}
}
this.tableData = sourceData.table || sourceData.set1 || [];
this.paging = sourceData.paging || sourceData.set2; // 分页信息
this.tableData = sourceData.table || sourceData.set1 || []
this.paging = sourceData.paging || sourceData.set2 // 分页信息
if (this.paging) {
if (Array.isArray(this.paging)) {
this.paginationPage = parseInt(this.paging[0].page); // 当前页
this.paginationPageSize = parseInt(this.paging[0].per_page); // 分页条数
this.paginationTotal = parseInt(this.paging[0].total);
this.paginationPage = parseInt(this.paging[0].page) // 当前页
this.paginationPageSize = parseInt(this.paging[0].per_page) // 分页条数
this.paginationTotal = parseInt(this.paging[0].total)
} else {
this.paginationPage = parseInt(this.paging.page); // 当前页
this.paginationPageSize = parseInt(this.paging.per_page); // 分页条数
this.paginationTotal = parseInt(this.paging.total);
this.paginationPage = parseInt(this.paging.page) // 当前页
this.paginationPageSize = parseInt(this.paging.per_page) // 分页条数
this.paginationTotal = parseInt(this.paging.total)
}
}
}
}
if (this.tableData.length) {
const data0 = this.tableData[0];
this.tableDataFirst = _.cloneDeep(data0);
const data0 = this.tableData[0]
this.tableDataFirst = _.cloneDeep(data0)
if (data0._id) {
// 此时有动态列 且 此时数据为空
this.tableData.splice(0, 1);
this.tableData.splice(0, 1)
}
}
this.tableData.forEach(item => {
for (const p in item) {
if (p.includes("_data_")) {
if (typeof item[p] === "string") {
item[p] = JSON.parse(item[p]);
if (p.includes('_data_')) {
if (typeof item[p] === 'string') {
item[p] = JSON.parse(item[p])
}
}
}
});
})
},
initTabelconfig(config_) {
const config = _.cloneDeep(config_);
this.configData = this.getDefaultConfig(config);
const config = _.cloneDeep(config_)
this.configData = this.getDefaultConfig(config)
if (config && config.maxHeight) {
this.maxHeight_ = config.maxHeight;
this.maxHeight_ = config.maxHeight
}
const { columnsConfig, cellDetailStyle } = this.configData;
this.columnsConfig = columnsConfig || [];
const { columnsConfig, cellDetailStyle } = this.configData
this.columnsConfig = columnsConfig || []
if (columnsConfig && columnsConfig.length) {
this.columnsProp = [...columnsConfig]; // 筛选出可显示的
const dyncProp = this.columnsProp.find(item => item.prop === "*");
this.columnsProp = [...columnsConfig] // 筛选出可显示的
const dyncProp = this.columnsProp.find(item => item.prop === '*')
if (dyncProp) {
this.hsDyncProp = true;
this.setHeaderAnynsProp(this.columnsProp);
this.hsDyncProp = true
this.setHeaderAnynsProp(this.columnsProp)
} else {
this.hsDyncProp = false;
this.hsDyncProp = false
}
} else {
this.columnsProp = [...this.getAsyncProp(this.tableDataFirst)];
this.columnsProp = [...this.getAsyncProp(this.tableDataFirst)]
}
this.getHeaderCellStyle(this.tableData);
this.getHeaderCellStyle(this.tableData)
this.columnsProp.forEach(item => {
if (!item.showType || item.showType === "text") {
item.showOverflowTooltip = true;
if (!item.showType || item.showType === 'text') {
item.showOverflowTooltip = true
} else {
item.showOverflowTooltip = false;
item.showOverflowTooltip = false
}
});
this.columnsProp = this.groupByProp(this.columnsProp);
console.log(this.columnsConfig, " this.columnsConfig");
})
this.columnsProp = this.groupByProp(this.columnsProp)
console.log(this.columnsConfig, ' this.columnsConfig')
// 避免数据变更 再次发出请求
if (this.dataChangeNumber < 4) {
this.dataChangeNumber++;
this.dataChangeNumber++
// this.initTableColumnsControl()
}
if (this.hsDyncProp) {
// 有动态列的时候 每次数据变得都得重新请求一次下拉数据
// this.initTableColumnsControl()
}
this.setCellDetailStyle(cellDetailStyle);
this.dtlDialogFormDisAbled = this.disabledItem(this.configData);
this.setCellDetailStyle(cellDetailStyle)
this.dtlDialogFormDisAbled = this.disabledItem(this.configData)
},
getHeaderCellStyle(datas) {
if (!datas.length) return;
if (!datas.length) return
if (datas[0]._headerCellStyleSetting_) {
const _headerCellStyleSetting_ = datas[0]._headerCellStyleSetting_;
this.headerCellStyleSetting_ = _headerCellStyleSetting_;
const _headerCellStyleSetting_ = datas[0]._headerCellStyleSetting_
this.headerCellStyleSetting_ = _headerCellStyleSetting_
}
},
setHeaderAnynsProp(data) {
data.forEach((item, index) => {
if (item.prop === "*") {
if (item.prop === '*') {
// 获取所有的动态列
const anyncProp = this.getAsyncProp(this.tableDataFirst, data);
const anyncProp = this.getAsyncProp(this.tableDataFirst, data)
anyncProp.forEach(item_ => {
// item.showType = 'input'
this.$set(item_, "showType", item.showType);
});
this.$set(item_, 'showType', item.showType)
})
// 删除那一带*的行 替换成动态列
data.splice(index, 1, ...anyncProp);
data.splice(index, 1, ...anyncProp)
}
});
})
},
getAsyncProp(tableDataFirst, columnsProp = []) {
if (!tableDataFirst) return [];
const props = Object.keys(tableDataFirst);
if (!tableDataFirst) return []
const props = Object.keys(tableDataFirst)
// 已经手动设置存在的表表头
const constProps = [];
const constProps = []
if (columnsProp.length) {
columnsProp.forEach(item => {
if (item.prop !== "*") {
constProps.push(item.prop);
if (item.prop !== '*') {
constProps.push(item.prop)
}
});
})
}
// 动态设置1维表头
const constProps_ = [];
const constProps_ = []
props.forEach(prop => {
if (
!prop.includes("__") &&
!prop.startsWith("_") &&
!prop.includes("_data_") &&
prop !== "isSelected"
!prop.includes('__') &&
!prop.startsWith('_') &&
!prop.includes('_data_') &&
prop !== 'isSelected'
) {
constProps_.push({
prop: prop,
label: prop,
showOverflowTooltip: true
});
} else if (prop.includes("__")) {
const one_title = prop.split("__")[0];
})
} else if (prop.includes('__')) {
const one_title = prop.split('__')[0]
const target = columnsProp.find(
p => p.prop.split("__")[0] === one_title
);
if (target) return;
p => p.prop.split('__')[0] === one_title
)
if (target) return
const one_title_list = props.filter(
item => item.split("__")[0] === one_title
);
const one_title_list_prop = [];
item => item.split('__')[0] === one_title
)
const one_title_list_prop = []
one_title_list.forEach(item => {
one_title_list_prop.push({
prop: item,
label: item,
showOverflowTooltip: true
});
});
const t = constProps_.find(item => item.prop === one_title);
})
})
const t = constProps_.find(item => item.prop === one_title)
if (!t) {
constProps_.push({
prop: one_title,
label: one_title,
childs: one_title_list_prop
});
})
}
}
});
})
const result = constProps_.filter(
item => !constProps.includes(item.prop)
);
return result || [];
)
return result || []
},
groupByProp(list) {
const parms = [];
const parms = []
list.forEach(item => {
// const itemProp = item.prop
// if (!itemProp) {
// item.prop = item.label
// }
if (!item.prop) {
item.prop = "";
item.prop = ''
}
const prop = item.prop.split("__")[0];
if (item.prop.includes("__")) {
const prop = item.prop.split('__')[0]
if (item.prop.includes('__')) {
// const prop = item.prop.split('__')[0]
const t = parms.find(jtem => jtem.prop === prop);
const t = parms.find(jtem => jtem.prop === prop)
if (t) {
t.childs.push(item);
t.childs.push(item)
} else {
const obj = {
prop: "",
label: "",
prop: '',
label: '',
childs: []
};
obj.prop = prop;
obj.label = prop;
obj.childs.push(item);
parms.push(obj);
}
obj.prop = prop
obj.label = prop
obj.childs.push(item)
parms.push(obj)
}
} else {
parms.push(item);
parms.push(item)
}
});
return parms;
})
return parms
},
tansFormAsyncProps(list) {
const rasyncProps = _(list)
.groupBy(item => item.split("__")[0])
.value();
const Keys = Object.keys(rasyncProps);
const result = [];
.groupBy(item => item.split('__')[0])
.value()
const Keys = Object.keys(rasyncProps)
const result = []
Keys.forEach(k => {
const obj = {
prop: "",
label: "",
prop: '',
label: '',
showOverflowTooltip: true,
childs: []
};
obj.prop = k;
obj.label = k;
}
obj.prop = k
obj.label = k
rasyncProps[k].forEach(i => {
obj.childs.push({
prop: i,
label: i,
showOverflowTooltip: true
});
});
result.push(obj);
});
return result;
})
})
result.push(obj)
})
return result
},
getTableHeader(data = this.tableData) {
if (!data.length) return [];
const props = Object.keys(data[0]);
let __list = [];
const list = [];
if (!data.length) return []
const props = Object.keys(data[0])
let __list = []
const list = []
props.forEach((prop, index) => {
if (prop.includes("__") && !prop.includes("_data_")) {
__list.push(prop);
delete props[index];
if (prop.includes('__') && !prop.includes('_data_')) {
__list.push(prop)
delete props[index]
} else if (
!prop.startsWith("_") &&
!prop.includes("_data_") &&
prop !== "isSelected"
!prop.startsWith('_') &&
!prop.includes('_data_') &&
prop !== 'isSelected'
) {
list.push(prop);
list.push(prop)
}
});
})
if (__list.length) {
__list = _(__list)
.groupBy(item => item.split("__")[0])
.value();
.groupBy(item => item.split('__')[0])
.value()
}
list.push(__list);
return list;
list.push(__list)
return list
},
getDefaultConfig(config = {}) {
let _config = {};
let _config = {}
if (
config.hsConfig !== undefined &&
config.hsConfig.default_type + "" === "1"
config.hsConfig.default_type + '' === '1'
) {
// mes样式
_config = this.config_merge(mes_style, config);
_config = this.config_merge(mes_style, config)
} else {
// 大屏样式
_config = this.config_merge(screen_style, config);
_config = this.config_merge(screen_style, config)
}
if (_config.queryBiTheme) {
sessionStorage["queryBiTheme_"] = JSON.stringify(_config.queryBiTheme);
sessionStorage['queryBiTheme_'] = JSON.stringify(_config.queryBiTheme)
}
return _config;
return _config
},
config_merge(defaultConfig, config) {
if (!Object.keys(config).length) {
return defaultConfig;
return defaultConfig
}
const _defaultConfig = _.cloneDeep(defaultConfig);
const _defaultConfig = _.cloneDeep(defaultConfig)
for (const key1 in _defaultConfig) {
if (typeof _defaultConfig[key1] === "object") {
if (typeof _defaultConfig[key1] === 'object') {
for (const key2 in _defaultConfig[key1]) {
if (
config[key1] !== undefined &&
config[key1][key2] !== undefined
) {
_defaultConfig[key1][key2] = config[key1][key2];
_defaultConfig[key1][key2] = config[key1][key2]
}
}
} else if (Array.isArray(_defaultConfig[key1])) {
_defaultConfig[key1] = config[key1];
_defaultConfig[key1] = config[key1]
} else {
if (config[key1] !== undefined) {
_defaultConfig[key1] = config[key1];
_defaultConfig[key1] = config[key1]
}
}
}
Object.keys(config).forEach(item => {
if (!(item in _defaultConfig)) {
_defaultConfig[item] = config[item];
_defaultConfig[item] = config[item]
}
});
return _defaultConfig;
})
return _defaultConfig
},
setRowSelect(row, f) {
this.tableData.forEach(item => {
if (item.isSelected) {
this.$set(item, "isSelected", false);
this.$set(item, 'isSelected', false)
}
});
row.isSelected = true;
this.$refs.hsTable.clearSelection();
this.$refs.hsTable.setCurrentRow(row);
this.$refs.hsTable.toggleRowSelection(row);
this.targetRowInner = row;
})
row.isSelected = true
this.$refs.hsTable.clearSelection()
this.$refs.hsTable.setCurrentRow(row)
this.$refs.hsTable.toggleRowSelection(row)
this.targetRowInner = row
},
tableRowClick(row, column, event) {
this.$emit("RowClick", {
this.$emit('RowClick', {
row: row,
column: column,
event: event
});
})
},
// 单击某个单元格的时候 弹出明细
tableCellClick(row, column, cell, event) {
this.setRowSelect(row);
const key = column.label;
const { property } = column;
const target = this.columnsConfig.find(item => item.prop === property);
this.setRowSelect(row)
const key = column.label
const { property } = column
const target = this.columnsConfig.find(item => item.prop === property)
if (
target &&
(target.type === "hyperlink" || target.type === "asyncQueryDetail")
(target.type === 'hyperlink' || target.type === 'asyncQueryDetail')
) {
let value_ = row[property];
const otherConfig = target.otherConfig;
let value_ = row[property]
const otherConfig = target.otherConfig
if (
otherConfig &&
!otherConfig.startsWith("/") &&
!otherConfig.startsWith("http")
!otherConfig.startsWith('/') &&
!otherConfig.startsWith('http')
) {
value_ = row[target.otherConfig];
value_ = row[target.otherConfig]
} else if (otherConfig) {
value_ = otherConfig;
value_ = otherConfig
}
const reg = /\{(.*?)\}/g; // /(?<=\{).*?(?=\})/g
const queryList = value_.match(reg) || []; // value_.match(/(?<=\{).*?(?=\})/g) || [] // value_.match(reg) || [] //
const reg = /\{(.*?)\}/g // /(?<=\{).*?(?=\})/g
const queryList = value_.match(reg) || [] // value_.match(/(?<=\{).*?(?=\})/g) || [] // value_.match(reg) || [] //
queryList.forEach(p => {
const p_ = p.replace("{", "").replace("}", "");
const pt = row[p_];
value_ = value_.replace(`{${p_}}`, pt);
});
const origin = location.origin;
let url = value_;
if (value_.startsWith("http")) {
url = value_;
} else if (value_.startsWith("/")) {
url = origin + "/#" + value_;
}
if (target.type === "hyperlink") {
window.open(url, "_blank");
} else if (target.type === "asyncQueryDetail") {
const property = column.property;
const p_ = p.replace('{', '').replace('}', '')
const pt = row[p_]
value_ = value_.replace(`{${p_}}`, pt)
})
const origin = location.origin
let url = value_
if (value_.startsWith('http')) {
url = value_
} else if (value_.startsWith('/')) {
url = origin + '/#' + value_
}
if (target.type === 'hyperlink') {
window.open(url, '_blank')
} else if (target.type === 'asyncQueryDetail') {
const property = column.property
if (row[property]) {
this.pageSrc = url;
this.dialogVisiblePage = true;
this.pageSrc = url
this.dialogVisiblePage = true
}
}
}
if (row[`_data_${key}`]) {
this.detailVisible = true;
const _data_value = row[`_data_${key}`];
this.tableDataDetail = _data_value;
this.detailVisible = true
const _data_value = row[`_data_${key}`]
this.tableDataDetail = _data_value
} else {
this.$emit("CellClick", {
this.$emit('CellClick', {
row: row,
column: column,
cell: cell,
event: event
});
})
}
},
// 鼠标移入事件
tableCellmouse(row, column, cell, event) {
return
if (this.configData.hover) {
const { hoverBackground } = this.configData.hover;
const { hoverBackground } = this.configData.hover
if (hoverBackground) {
cell.parentNode.style.background = hoverBackground;
cell.parentNode.style.background = hoverBackground
}
}
},
// 鼠标离开事件
tableCelleave(row, column, cell, event) {
const { property } = column;
const { _styleCellSetting_, _styleRowSetting_ } = row;
const _styleRowSetting__ = _styleRowSetting_ || {};
const cellStyel = {};
const { property } = column
const { _styleCellSetting_, _styleRowSetting_ } = row
const _styleRowSetting__ = _styleRowSetting_ || {}
const cellStyel = {}
if (_styleCellSetting_) {
const keys = Object.keys(_styleCellSetting_);
const targetKey = keys.find(k => k === property);
const keys = Object.keys(_styleCellSetting_)
const targetKey = keys.find(k => k === property)
if (targetKey) {
Object.assign(cellStyel, _styleCellSetting_[property]);
Object.assign(cellStyel, _styleCellSetting_[property])
}
}
// this.detailVisible2 = false
if (this.configData.hover) {
const { leaveBackground } = this.configData.hover;
const { leaveBackground } = this.configData.hover
if (leaveBackground) {
if (_styleRowSetting__.background) {
cell.parentNode.style.background = _styleRowSetting__.background;
cell.parentNode.style.background = _styleRowSetting__.background
} else {
cell.parentNode.style.background = leaveBackground;
cell.parentNode.style.background = leaveBackground
}
}
}
},
handleSizeChange(pageSize) {
this.paginationPageSize = parseInt(pageSize);
this.paginationPageSize = parseInt(pageSize)
if (this.paginationPage !== 1) {
this.paginationPage = 1;
this.paginationPage = 1
}
this.$emit("paginationFun", {
this.$emit('paginationFun', {
elInfo: this.elInfo, // 此处把组件信息返回出去 方便queryBi统一处理
pageSize: this.paginationPageSize,
page: this.paginationPage
});
})
},
// 当前页 change cb
handleCurrentChange(currentPage) {
this.paginationPage = parseInt(currentPage);
this.$emit("paginationFun", {
this.paginationPage = parseInt(currentPage)
this.$emit('paginationFun', {
elInfo: this.elInfo,
pageSize: this.paginationPageSize,
page: this.paginationPage
});
})
},
// 轮播table数据
changeTableDataFun() {
if (this.currentPage === this.page) {
this.currentPage = 0;
this.currentPage = 0
}
this.grouptableData = this.pageArr[this.currentPage];
this.currentPage = this.currentPage + 1;
this.grouptableData = this.pageArr[this.currentPage]
this.currentPage = this.currentPage + 1
},
boxEventMouse(event) {
const that = this;
event.stopPropagation();
const that = this
event.stopPropagation()
if (event.shiftKey && event.altKey && !event.ctrlKey) {
that.jsoneditorVisible = true;
that.jsoneditorVisible = true
}
},
// 弹出可编辑的弹框
showEditJsonDialog() {
this.outBoxDom = document.getElementById(this.elId);
this.outBoxDom = document.getElementById(this.elId)
if (this.outBoxDom) {
this.maxHeight_ = this.outBoxDom.offsetHeight;
this.outBoxDom.addEventListener("mousedown", this.boxEventMouse);
this.maxHeight_ = this.outBoxDom.offsetHeight
this.outBoxDom.addEventListener('mousedown', this.boxEventMouse)
}
},
// 修改表头行的样式
setHeaderRowStyle(rowData) {
const headerRowStyle = this.configData.headerRowStyle || {};
return typeof headerRowStyle === "string"
const headerRowStyle = this.configData.headerRowStyle || {}
return typeof headerRowStyle === 'string'
? JSON.parse(headerRowStyle)
: headerRowStyle;
: headerRowStyle
},
// 修改表头单元格样式 会合并行的样式
setHeaderCellStyle(rowData) {
const { column } = rowData;
const headerCellStyle = this.configData.headerCellStyle || {};
const { property } = column;
const { column } = rowData
const headerCellStyle = this.configData.headerCellStyle || {}
const { property } = column
// 这是后台设置的表头单元格子数据
const commonStyle_ = this.headerCellStyleSetting_.commonStyle || {};
const data_ = this.headerCellStyleSetting_.data || [];
const target = data_.find(item => item.property === property);
let targetStyle_ = {};
const commonStyle_ = this.headerCellStyleSetting_.commonStyle || {}
const data_ = this.headerCellStyleSetting_.data || []
const target = data_.find(item => item.property === property)
let targetStyle_ = {}
if (target && target.style) {
targetStyle_ = target.style;
targetStyle_ = target.style
}
const commonStyle = headerCellStyle.commonStyle || {};
const data = headerCellStyle.data || [];
const targetProp = data.find(item => item.property === property);
let targetPropStyle = {};
const commonStyle = headerCellStyle.commonStyle || {}
const data = headerCellStyle.data || []
const targetProp = data.find(item => item.property === property)
let targetPropStyle = {}
if (targetProp && targetProp.style) {
targetPropStyle = targetProp.style;
targetPropStyle = targetProp.style
}
const result = Object.assign(
_.cloneDeep(commonStyle),
_.cloneDeep(targetPropStyle),
_.cloneDeep(commonStyle_),
targetStyle_
);
return result;
)
return result
},
setRowStyle(rowData) {
const { rowStyle, onlyDataStyleRow } = this.configData;
const { rowIndex, row } = rowData;
const data_style = _.cloneDeep(this.set_row_style(row) || {}); // 数据样式
const _styleRowSetting_ = row._styleRowSetting_ || {};
const { rowStyle, onlyDataStyleRow } = this.configData
const { rowIndex, row } = rowData
const data_style = _.cloneDeep(this.set_row_style(row) || {}) // 数据样式
const _styleRowSetting_ = row._styleRowSetting_ || {}
const _styleRowSetting_P =
typeof _styleRowSetting_ === "string"
typeof _styleRowSetting_ === 'string'
? JSON.parse(_styleRowSetting_)
: _styleRowSetting_;
: _styleRowSetting_
// 如果设置了这个参数 仅仅数据样式生效
if (onlyDataStyleRow) {
return Object.assign(
_.cloneDeep(_styleRowSetting_P),
_.cloneDeep(data_style)
);
)
}
if (rowStyle) {
// 合并本地默认样式+手动设置样式+后台返回样式
const { commonStyle, data } = rowStyle;
const data_ = data || [];
let targetRowIndexStyle = {};
const { commonStyle, data } = rowStyle
const data_ = data || []
let targetRowIndexStyle = {}
const targetRow = data_.find(
item => parseInt(item.rowIndex) === rowIndex
);
)
if (targetRow) {
targetRowIndexStyle = targetRow.style;
targetRowIndexStyle = targetRow.style
}
const result = Object.assign(
_.cloneDeep(commonStyle),
_.cloneDeep(targetRowIndexStyle),
_.cloneDeep(_styleRowSetting_),
_.cloneDeep(data_style)
);
return result;
)
return result
} else {
// 只有后台样式或者没有任何样式
const result = Object.assign(
_.cloneDeep(_styleRowSetting_P),
_.cloneDeep(data_style)
);
return result;
)
return result
}
},
setCellStyle(cellData) {
const { column, columnIndex, row, rowIndex } = cellData;
const { property } = column; // 对应的列名
const { column, columnIndex, row, rowIndex } = cellData
const { property } = column // 对应的列名
// 后端返回的样式
const _styleCellSetting_ = row._styleCellSetting_ || {}; // 对应行 所有列的样式汇总
const _styleCellSetting_ = row._styleCellSetting_ || {} // 对应行 所有列的样式汇总
// 前端config中设置的样式
const { onlyDataStyleCell, cellStyle, columnStyle } = this.configData;
let cellDataStyle = {}; // 数据中的样式
let config_columnStyle = {}; // config中的columnStyle的样式
let config_cellStyle = {}; // config中的cellStyle的样式
let columnsConfig_columnStyle = {}; // columnsConfig数据列配置中的columnStyle
let columnsConfig_otherStyle = {}; // 其他样式
const { onlyDataStyleCell, cellStyle, columnStyle } = this.configData
let cellDataStyle = {} // 数据中的样式
let config_columnStyle = {} // config中的columnStyle的样式
let config_cellStyle = {} // config中的cellStyle的样式
let columnsConfig_columnStyle = {} // columnsConfig数据列配置中的columnStyle
let columnsConfig_otherStyle = {} // 其他样式
const _styleCellSetting_P =
typeof _styleCellSetting_ === "string"
typeof _styleCellSetting_ === 'string'
? JSON.parse(_styleCellSetting_)
: _styleCellSetting_;
const keys = Object.keys(_styleCellSetting_P);
const targetKey = keys.find(k => k === property);
: _styleCellSetting_
const keys = Object.keys(_styleCellSetting_P)
const targetKey = keys.find(k => k === property)
// 附加样式 如超链接 配置中columnsConfig
const otherStyle = this.columnsConfig.find(
item => item.prop === property
);
)
if (
otherStyle &&
(otherStyle.type === "hyperlink" ||
otherStyle.type === "asyncQueryDetail")
(otherStyle.type === 'hyperlink' ||
otherStyle.type === 'asyncQueryDetail')
) {
columnsConfig_otherStyle = this.subjoinStyle[otherStyle.type] || {};
columnsConfig_otherStyle = this.subjoinStyle[otherStyle.type] || {}
}
if (otherStyle && otherStyle.columnStyle) {
columnsConfig_columnStyle = otherStyle.columnStyle || {};
columnsConfig_columnStyle = otherStyle.columnStyle || {}
}
if (targetKey) {
cellDataStyle = _styleCellSetting_P[property];
cellDataStyle = _styleCellSetting_P[property]
}
if (onlyDataStyleCell) {
// 仅仅 数据样式生效本地样式不生效
return cellDataStyle;
return cellDataStyle
}
if (columnStyle) {
// config中的columnStyle的样式的时候
const { data, commonStyle: commonColumnStyle } = columnStyle;
const data_ = data;
const commonColumnStyle_ = _.cloneDeep(commonColumnStyle || {});
const targetColumn = data_.find(item => item.property === property);
let targetColumnStyle = {};
const { data, commonStyle: commonColumnStyle } = columnStyle
const data_ = data
const commonColumnStyle_ = _.cloneDeep(commonColumnStyle || {})
const targetColumn = data_.find(item => item.property === property)
let targetColumnStyle = {}
if (targetColumn && targetColumn.style) {
targetColumnStyle = targetColumn.style;
targetColumnStyle = targetColumn.style
}
config_columnStyle = Object.assign(
commonColumnStyle_,
targetColumnStyle
);
)
}
if (cellStyle) {
const { commonStyle: commonCellStyle, data } = cellStyle;
const data_ = data || [];
const commonCellStyle_ = _.cloneDeep(commonCellStyle || {});
let targetCellIndexStyle = {};
const { commonStyle: commonCellStyle, data } = cellStyle
const data_ = data || []
const commonCellStyle_ = _.cloneDeep(commonCellStyle || {})
let targetCellIndexStyle = {}
const targetCell = data_.find(
item =>
parseInt(item.rowIndex) === rowIndex &&
(item.property === property ||
parseInt(item.columnIndex) === columnIndex)
);
if (targetCell)
targetCellIndexStyle = _.cloneDeep(targetCell.style || {});
)
if (targetCell) { targetCellIndexStyle = _.cloneDeep(targetCell.style || {}) }
config_cellStyle = Object.assign(
commonCellStyle_,
targetCellIndexStyle
);
)
}
return Object.assign(
config_columnStyle,
......@@ -1793,50 +1793,50 @@ export default {
cellDataStyle,
columnsConfig_otherStyle,
columnsConfig_columnStyle
);
)
},
alterConfigAction() {
if (this.configData.tableStyle) {
this.tableStyle = JSON.stringify(this.configData.tableStyle)
.replace(new RegExp('"', "g"), "")
.replace(new RegExp("{", "g"), "")
.replace(new RegExp(",", "g"), ";")
.replace(new RegExp("}", "g"), ";");
.replace(new RegExp('"', 'g'), '')
.replace(new RegExp('{', 'g'), '')
.replace(new RegExp(',', 'g'), ';')
.replace(new RegExp('}', 'g'), ';')
}
if (this.configData.imgStyle) {
this.imgStyle = JSON.stringify(this.configData.imgStyle)
.replace(new RegExp('"', "g"), "")
.replace(new RegExp("{", "g"), "")
.replace(new RegExp(",", "g"), ";")
.replace(new RegExp("}", "g"), ";");
.replace(new RegExp('"', 'g'), '')
.replace(new RegExp('{', 'g'), '')
.replace(new RegExp(',', 'g'), ';')
.replace(new RegExp('}', 'g'), ';')
}
if (this.configData.gutter) {
var tableId = document.getElementById(this.elId);
if (!tableId) return;
var gutterArr = tableId.getElementsByClassName("gutter");
if ((gutterArr && !gutterArr.length) || !gutterArr) return;
gutterArr[0].style.background = this.configData.gutter.background;
gutterArr[0].style.border = this.configData.gutter.border;
gutterArr[0].style.borderTop = this.configData.gutter.borderTop;
gutterArr[0].style.borderBottom = this.configData.gutter.borderBottom;
gutterArr[0].style.borderLeft = this.configData.gutter.borderLeft;
gutterArr[0].style.borderRight = this.configData.gutter.borderRight;
var tableId = document.getElementById(this.elId)
if (!tableId) return
var gutterArr = tableId.getElementsByClassName('gutter')
if ((gutterArr && !gutterArr.length) || !gutterArr) return
gutterArr[0].style.background = this.configData.gutter.background
gutterArr[0].style.border = this.configData.gutter.border
gutterArr[0].style.borderTop = this.configData.gutter.borderTop
gutterArr[0].style.borderBottom = this.configData.gutter.borderBottom
gutterArr[0].style.borderLeft = this.configData.gutter.borderLeft
gutterArr[0].style.borderRight = this.configData.gutter.borderRight
}
},
setCellDetailStyle(data = {}) {
// const { headerRowStyle, rowStyle } = data
this.cellDetailStyle = data;
this.cellDetailStyle = data
},
setCellHeaderRowStyle() {
const { headerRowStyle } = this.cellDetailStyle;
return headerRowStyle || {};
const { headerRowStyle } = this.cellDetailStyle
return headerRowStyle || {}
},
setCellRowStyle() {
const { rowStyle } = this.cellDetailStyle;
return rowStyle || {};
const { rowStyle } = this.cellDetailStyle
return rowStyle || {}
}
}
};
}
</script>
<style>
.activeBottomSort {
......
......@@ -61,18 +61,53 @@ module.exports = {
hotOnly: false,
// http 代理配置
proxy: {
'/api': {
target: 'http://127.0.0.1:3000/api',
'/fileresourceAPI': {
target: fileresourceAPI,
changeOrigin: true,
pathRewrite: {
'^/api': ''
'^/fileresourceAPI': ''
}
},
'/fileresourceAPI': {
target: fileresourceAPI,
'/GQLAPI': {
target: GQLAPI,
changeOrigin: true,
pathRewrite: {
'^/fileresourceAPI': ''
'^/GQLAPI': ''
}
},
'/mainAPI': {
target: mainAPI,
changeOrigin: true,
pathRewrite: {
'^/mainAPI': ''
}
},
'/menuAPI': {
target: menuAPI,
changeOrigin: true,
pathRewrite: {
'^/menuAPI': ''
}
},
'/mockAPI': {
target: mockAPI,
changeOrigin: true,
pathRewrite: {
'^/mockAPI': ''
}
},
'/authAPI': {
target: authAPI,
changeOrigin: true,
pathRewrite: {
'^/authAPI': ''
}
},
'/toolAPI': {
target: toolAPI,
changeOrigin: true,
pathRewrite: {
'^/toolAPI': ''
}
},
'/commonUtilAPI': {
......@@ -81,6 +116,13 @@ module.exports = {
pathRewrite: {
'^/commonUtilAPI': ''
}
},
'/ipCommonAPI': {
target: ipCommonAPI,
changeOrigin: true,
pathRewrite: {
'^/ipCommonAPI': ''
}
}
},
before: (app) => {}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment