<template>
<div :style="pageTableHeight" class="TablePage">
<PublicPageHeader class="TablePage_header" :page-title="dataTitle ? dataTitle : pageTitle">
<template slot="d_foot">
<SimpleQuery v-if="simpleQueryFlag" :selectOptions="advancedQueryValue" :simple-query-item="simpleQueryItem" @queryValue="queryValue" />
</template>
<template v-if="pageAuthBtnInstall">
<el-button size="small" type="primary" @click="onInstall">初始化</el-button>
</template>
<!-- <AuthButton :auth="pageAuthBtnAdd" />
<AuthButton :auth="pageAuthBtnQuery" /> -->
<!-- <AuthButton :auth="pageAuthBtnExport" /> -->
</PublicPageHeader>
<div :style="pageTableContentHeight" class="TablePage_content flex-wrap">
<template v-if="!dataFlag">
<div v-if="treeData.length" class="TablePage_content_left">
<PublicPageTree ref="pageTree" :tree-data="treeData" :dep-math="depMath" :tree-map="treeNodeMap" @treeNodeClick="treeNodeClick" />
</div>
</template>
<div :class="dataFlag ? 'tableAuto' : treeData.length ? 'tableSacle' : 'tableAuto'" class="TablePage_content_right">
<div class="check_header">
<el-scrollbar style="height: 100%" :horizontal="false">
<el-form ref="ruleFormw" :model="tableForm" :label-width="labelWidth">
<el-row :gutter="2">
<el-col v-for="(item, index) in formItemArr" :key=" index" :span="4" v-show="isShow(item.isdisplay)">
<el-form-item :rules="fromDataReq(item)" :prop="item.pagecode" :label="item.pagename">
<span slot="label">
{{ item.pagename }}
<el-tooltip :content="item.pagedescribe" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<template v-if="fromDataType(item.datatype) == 'SELECT' || fromDataType(item.datatype) == 'SELECTS'">
<el-select class="input-shadow" size="small" :multiple="fromDataType(item.datatype) == 'SELECTS'?true:false" filterable default-first-option style="width: 100%" v-model="tableForm[item.pagecode]" @change="changeSelect(item.pagecode, item)" placeholder="请选择" clearable @clear="tableForm[item.pagecode] = ''">
<el-option v-for="itemParams in tableOptions[item.pagecode]" :key="itemParams[item['dropdownlistid']]" :label="itemParams[item['dropdownlistlabel']]" :value="itemParams[item['dropdownlistid']]">
</el-option>
</el-select>
</template>
<template v-else-if="fromDataType(item.datatype) == 'DROP'">
<el-select class="input-shadow" size="small" multiple filterable default-first-option style="width: 100%" v-model="tableForm[item.pagecode]" @change="changeSelect(item.pagecode, item)" placeholder="请选择" clearable @clear="tableForm[item.pagecode] = ''">
<el-option v-for="itemParams in tableOptions[item.pagecode]" :key="itemParams['dropdownlistid']" :label="itemParams['dropdownlistlabel']" :value="itemParams['dropdownlistid']">
</el-option>
</el-select>
</template>
<template v-else-if="fromDataType(item.datatype) == 'ICON' || fromDataType(item.datatype) == 'icon'">
<el-select size="small" clearable v-model="tableForm[item.pagecode]" placeholder="请选择图标">
<el-option v-for="(item,index) in formIcons" :key="index" :label="item.name" :value="item.value">
<i style="font-size: 18px;" :class="item.name"></i>
</el-option>
</el-select>
</template>
<template v-else-if="fromDataType(item.datatype) == 'TEXT' || fromDataType(item.datatype) == 'VARCHAR'">
<el-input size="small" @change="inputChangeHandler(item.pagecode)" v-model="tableForm[item.pagecode]"></el-input>
</template>
<template v-else-if="fromDataType(item.datatype) == 'TEXTAREA'">
<el-input type="textarea" @focus="setText(item.pagecode)" v-model="tableForm[item.pagecode]"></el-input>
</template>
<template v-else-if="fromDataType(item.datatype) == 'PASSWORD'">
<el-input show-password v-model="tableForm[item.pagecode]"></el-input>
</template>
<template v-else-if="fromDataType(item.datatype) == 'UNPASSWORD'">
<el-input show-password v-model="tableForm[item.pagecode]"></el-input>
</template>
<template v-else-if="fromDataType(item.datatype) == 'UPLOAD'">
<upload-item :id="index" :base-img="tableForm[item.pagecode]" ref="upload" />
</template>
<template v-else-if="fromDataType(item.datatype) == 'SWITCH'">
<el-switch v-model="tableForm[item.pagecode]"></el-switch>
</template>
<template v-else-if="fromDataType(item.datatype) == 'CASCADER'">
<el-cascader v-model="tableForm[item.pagecode]" :options="tableOptions[item.pagecode]"></el-cascader>
</template>
<template v-else-if="fromDataType(item.datatype) == 'CHECKBOX'">
<el-checkbox-group v-model="tableForm[item.pagecode]">
<el-checkbox v-for="itemParams in tableOptions[item.pagecode]" :key="itemParams[item['dropdownlistid']]" :label="itemParams[item['dropdownlistid']]" name="type">{{ [item['dropdownlistlabel']] }}</el-checkbox>
</el-checkbox-group>
</template>
<template v-else-if="fromDataType(item.datatype) == 'RADIO'">
<el-radio-group v-model="tableForm[item.pagecode]">
<el-radio v-for="itemParams in tableOptions[item.pagecode]" :key="itemParams[item['dropdownlistid']]" :label="itemParams[item['dropdownlistid']]" name="type">{{ [item['dropdownlistlabel']] }}</el-radio>
</el-radio-group>
</template>
<template v-else-if="fromDataType(item.datatype) == 'TIME'">
<el-time-picker size="small" :picker-options="{selectableRange: '00:00:00 - 23:59:59'}" v-model="tableForm[item.pagecode]" placeholder="选择任意时间段" @change="inputChangeHandler(item.pagecode)">
</el-time-picker>
</template>
<template v-else-if="fromDataType(item.datatype) == 'DATE'">
<el-date-picker size="small" class="datetimes" value-format="yyyy-MM-dd" v-model="tableForm[item.pagecode]" type="date" placeholder="选择日期" @change="inputChangeHandler(item.pagecode)">
</el-date-picker>
</template>
<template v-else-if="fromDataType(item.datatype) == 'DATETIME'">
<el-date-picker size="small" class="datetimes" value-format="yyyy-MM-dd HH:mm:ss" v-model="tableForm[item.pagecode]" type="datetime" placeholder="选择日期时间" @change="inputChangeHandler(item.pagecode)">
</el-date-picker>
</template>
<template v-else-if="fromDataType(item.datatype) == 'INT' || fromDataType(item.datatype) == 'tinyint' || fromDataType(item.datatype) == 'NUMBER'">
<el-input size="small" v-model.number="tableForm[item.pagecode]" onkeyup="value=value.replace(/[^1-9]/g,'')" @change="inputChangeHandler(item.pagecode)"></el-input>
</template>
<template v-else>
<el-input size="small" v-model="tableForm[item.pagecode]" @change="inputChangeHandler(item.pagecode)"></el-input>
</template>
</el-form-item>
</el-col>
<!-- <el-col :span="4" style="height: 41px;display: flex;align-items: center;">
<el-checkbox v-model="checkedtre" label="显示树" @change="handleCheckedCitiesChange"></el-checkbox>
</el-col>
<el-col :span="4" style="height: 41px;display: flex;align-items: center;">
<el-checkbox v-model="checkedtable" label="显示表格" @change="handleCheckedCitiesChanges"></el-checkbox>
</el-col> -->
<el-col :span="4" style="height: 41px;display: flex;align-items: center;">
<el-button :loading="dialogLoading" type="primary" size="small" @click="submitClickHandlers()">保存</el-button>
</el-col>
</el-row>
</el-form>
</el-scrollbar>
</div>
<div class="TablePage_child flex-wrap">
<Eltable style="width: 100%;height:100%;" :routerlist="rotlist"/>
<!-- <template v-if="leftFlag">
<div v-if="treeData.length" class="TablePage_content_left">
<PublicPageTree ref="pageTree" :tree-data="treeDatalook" :dep-math="depMath" :tree-map="treeNodeMap" @treeNodeClick="treeNodeClick" />
</div>
</template>
<PublicPageTable v-if="tableFlag" ref="table" :loading="loading" :selected="selected" :table-cols="tableCols" :table-btns="authBtns" :data="tableData" :header-cell-class-name="headerCellClass" :row-class-name="rowClass" :cell-class-name="cellClass" :formatter="tableFormatter" :selectedDatas="selectedDatas" :selectedCheck="selectedDataCheck" :show-summary="summaryFlag" @mounted="tableMountedHandler" @load="load" @cell-click="cellClickHandler" @handleDetail="handleDetail" @handleEdit="handleEdit" @handleOther="handleOther" @handleRemove="handleRemove" @handleSelectionChange="handleSelectionChange" /> -->
</div>
</div>
</div>
<div class="TablePage_dialog">
<!--新增/编辑-->
<PublicPageDialog :dialog-body="authId ? true : false " :dialog-loading="dialogLoading" :dialog-title="tableTitle" dialogSize="630px" :form-auth="formAuth" :dialog-drawer="flag" @handleClose="submitClickClose('ruleForm')" @handleSubmit="submitClickHandler">
<PublicPageForm ref="ruleForm" :label-width="labelWidth" :form-pass="tableData" :form-type="tableType" :form-item="formItem" :form-data="tableForm" />
</PublicPageDialog>
<!--高级查询-->
<PublicPageDialog dialog-title="高级查询" dialogSize="600px" :dialog-drawer="advancedDrawer" @handleClose="advancedClose" @handleSubmit="advancedTable('advancedDialogForm')">
<AdvancedQuery ref="advancedDialogForm" :selectOptions="simpleQueryValue" @getAdvancedQueryData="getAdvancedQueryData" />
<template slot="d_foot">
<el-button size="small" @click="restCollect('advancedDialogForm')" type="warning">重置</el-button>
<el-button size="small" @click="queryCollect('advancedDialogForm')" type="primary">收藏</el-button>
</template>
</PublicPageDialog>
<!--初始化-->
<PublicPageDialog dialog-title="初始化" dialogSize="600px" :dialog-drawer="installFlag" @handleClose="installClose" @handleSubmit="installTable('installForm')">
<AuthInstall ref="installForm" />
</PublicPageDialog>
</div>
</div>
</template>
<script>
import PublicPageHeader from '@/components/PublicPageHeader'
import PublicPageTable from '@/components/SimpleTable'
import PublicPageTree from '@/components/publicPageTree'
import PublicPageDialog from '@/components/PublicPageDialog'
import PublicPageForm from '@/components/publicPageForm'
import AdvancedQuery from '@/components/AdvancedQuery'
import AuthButton from '@/components/AuthButton'
import AuthInstall from '@/components/AuthInstall'
import SimpleQuery from '@/components/SimpleQuery'
import Eltable from './tablelet.vue'
import allIcons from '@/utils/icons'
import { mapGetters } from 'vuex'
import { Query, newData, modifyData, moveData, start, stop, startAll, stopAll } from "@/api/webApi"
import { formatChange, listToTree } from '@/utils/validate'
import { exportToExcel } from '@/utils/table'
export default {
name: 'TablePage',
components: {Eltable, PublicPageHeader, PublicPageTable, PublicPageDialog, PublicPageTree, PublicPageForm, AdvancedQuery, AuthButton, SimpleQuery, AuthInstall },
props: {
dataTitle: {
type: String,
default: ''
},
dataFlag: {
type: Boolean,
default: false
},
msgContent: {
type: Object,
default: () => new Object()
},
authId: {
type: Number,
default: 0
},
authQuery: {
type: Object,
default: () => new Object()
},
},
data () {
return {
page: 0, //当前table页面
noMore: false, //当前table是否加载到最后开关
loading: false, //页面加载
dialogLoading: false, //新增/编辑确认按钮禁用
advancedDrawer: false, //高级查询弹框开关
defaultfilter: { 1: 1 }, //默认查询参数
pageQuery: {},
installFlag: false,
dialogFlag: false,
dialogName: '', //弹框名称
pageTitle: '', //页面名称
treeData: [], //tree数据
treeDatalook: [], //可视化tree数据
treeParameters: {}, //tree传递参数
treeNodeMap: {}, //tree传递map
tableCols: [], //表头数据
tableData: [], //表格数据
tableBtns: [], //表格按钮权限
authBtns: [], //表格里面的操作按钮
tableBtnForms: [], //表格按钮下的form表单权限
dataContent: {}, //表格查询数据
pageServiceId: null, //表格serviceid
formItem: [], //弹框表单渲染数据
flag: false, //弹框表单开关
formAuth: true, //弹框表单按钮开关
tableType: "add", //弹框表单弹框类型
tableTitle: "新增", //弹框表单标题
tableForm: {}, //弹框表单数据
rmFlag: false, //删除弹框开关
rmTitle: '', //删除弹框标题
tableObj: {}, //删除数据
tableOptions: {}, //表单数据下拉
labelWidth: '120px', //表单文字距离
fromDataReqCatch: [], //表单规则缓存
tableKey: null,//表格主键
depMath: 0,
selected: 0, //是否勾选
selectedDatas: [], //回显勾选的数据
selectedDatasCath: [],//回显数据缓存
selectedDataAlls: [], //勾选数据
selectedDataCheck: {}, //勾选树-选中
triggerserviceid: null, //勾选后查询的serviceid
summaryFlag: false, //是否显示合计行
simpleQueryFlag: false, //是否开启了简易查询
simpleQueryItem: [], //简易查询表单数据项
simpleQueryValue: [], //简易查询缓存值
advancedQueryValue: [], //高级查询缓存值
formItemArr: [],
pageSizeDatas: ['outairportpage', 'landairportpage', 'transairportpage'],
pageInstall: 'creatManagementPage',
formIcons: allIcons,
checkedtre: true,
checkedtable: true,
leftFlag: true,
tableFlag:true,
rotlist: {}
}
},
computed: {
...mapGetters(['authArrs']),
pageTableHeight () {
if (this.dataFlag) return 'height:100%'
if (this.authId) return 'height:calc(100vh - 180px);padding:0'
return ''
},
pageTableContentHeight () {
if (this.dataFlag) return 'height:calc(100% - 60px)'
if (this.authId) return 'height:calc(100% - 130px)'
return ''
},
pageAuthBtnQuery () {
return this.tableBtns.filter(item => item.servicetype == 0)[0]
},
pageAuthBtnDetail () {
return this.tableBtns.filter(item => item.servicetype == 1)[0]
},
pageAuthBtnAdd () {
return this.tableBtns.filter(item => item.servicetype == 2)[0]
},
pageAuthBtnEdit () {
return this.tableBtns.filter(item => item.servicetype == 3)[0]
},
pageAuthBtnDel () {
return this.tableBtns.filter(item => item.servicetype == 4)[0]
},
pageAuthBtnOther () {
return this.tableBtns.filter(item => item.servicetype == 5)[0]
},
pageAuthBtnExport () {
return this.tableBtns.filter(item => item.servicetype == 6)[0]
},
pageAuthBtnInstall () {
return this.pageInstall == this.$route.path.replace('/', '')
},
//设置新增修改表单类型
fromDataType () {
return function (type) {
if (type) {
return type.toLocaleUpperCase().replace(/\([^\)]*\)/g, "");
}
}
},
//设置新增修改表单必填类型
fromDataReq () {
return function (item) {
const { dropdownlist, datatype, pagename, isrequired, formatrule } = item
const itemType = datatype ? datatype.replace(/\([^\)]*\)/g, "") : datatype
const itemReq = isrequired ? true : false
const itemRule = formatrule ? true : false
if (dropdownlist || dropdownlist == 0) return [{ required: itemReq, message: `${pagename}不能为空`, trigger: 'change' }]
else if (itemType == 'date' || itemType == 'datetime') return [{ required: itemReq, type: 'date', message: `${pagename}不能为空`, trigger: 'change' }]
else
if (itemReq && itemRule) return [{ required: itemReq, message: `${pagename}不能为空`, trigger: 'blur' }, { pattern: new RegExp(formatrule), message: `请输入合法的${pagename}规则`, trigger: 'blur' }]
return [{ required: itemReq, message: `${pagename}不能为空`, trigger: 'blur' }]
}
},
},
watch: {
msgContent: {
handler (row) {
if (row && Object.keys(row).length) {
const { passparameters } = row
const filterItem = this.formatDefault(passparameters, row)
if (!Object.keys(filterItem).length) return
this.defaultfilter = filterItem
this.queryTableData(true)
}
},
deep: true,
immediate: true
},
authQuery: {
handler (row) {
if (row && Object.keys(row).length) {
this.defaultfilter = row
this.queryTableData(true)
}
},
deep: true,
}
},
mounted () {
this.authId ? this.pageInit(this.authId) : this.pageInit()
this.queryTableData(true)
},
methods: {
//页面初始化
pageInit (authId) {
//获取页面查询参数
const { query } = this.$route
// console.log(this.$route.meta)
authId ? this.pageQuery = this.authQuery : this.pageQuery = query
//获取页面配置
const { pagecode, qid, auth_id } = this.$route.meta
//获取页面权限类型组件 pagetype 1模块 2页面 3按钮 4表格 5树形 6弹窗
const pageAuths = this.authArrs
if (!pageAuths.length) return
let pageAuthArrs = null
authId ? pageAuthArrs = pageAuths.filter(item => item['superiorid'] == authId) : pageAuthArrs = pageAuths.filter(item => item['superiorid'] == auth_id)
//获取当前页面权限类型
if (!pageAuthArrs.length) return
//获取tree权限
const pageAuthtrees = pageAuthArrs.filter(item => item.pagetype == 'tree')
if (pageAuthtrees?.length) this.getPageTreeSetting(pageAuthtrees)
//获取table权限
const pageAuthtables = pageAuthArrs.filter(item => item.pagetype == 'table')
if (pageAuthtables?.length) this.getPageTableSetting(pageAuths, pageAuthtables)
//获取按钮权限
const pageAuthbtns = pageAuthArrs.filter(item => item.pagetype == 'button')
if (pageAuthbtns?.length) this.getPageBtnSetting(pageAuthbtns)
const pageAuthFforms = pageAuthArrs.filter(item => item.pagetype == 'form')
//获取form表单弹框权限
if (pageAuthFforms?.length) this.getPageBtnFormSetting(pageAuths, pageAuthFforms)
this.tableType = "add"
this.tableTitle = "新增"
this.tableForm = {}
for (let k in this.defaultfilter) {
if (k != 1) {
this.tableForm[k] = this.defaultfilter[k]
}
}
for (let k in this.formItem) {
if (this.formItem[k].defaultvalue && this.formItem[k].defaultvalue != "") {
this.$set(this.tableForm, this.formItem[k].pagecode, this.formItem[k].defaultvalue)
}
}
},
//根据页面tree设置数据
getPageTreeSetting (pageAuthtrees) {
const { defaultfilter, dropdownlistid, dropdownlistlabel } = pageAuthtrees[0]
this.treeNodeMap = { nodeKey: dropdownlistid, nodeValue: dropdownlistlabel }
this.treeParameters = defaultfilter
this.treeData = pageAuthtrees
},
//根据页面table设置数据
getPageTableSetting (pageAuths, pageAuthtables) {
const authTableObj = pageAuthtables[0]
//获取当前页面table的配置
const { pagename, pageconfigurationid, serviceid, pagecode, userpermissionsid, defaultfilter, selected, triggerserviceid } = authTableObj
//获取当前页面table的按钮权限
const currPageBtns = pageAuths.filter(item => item['superiorid'] == pageconfigurationid && item.pagetype == 'button')
if (currPageBtns?.length) this.tableBtns.push(...currPageBtns)
this.authBtns = pageAuths.filter(item => item.superiorid == pageconfigurationid && item.pagetype == 'button')
this.pageServiceId = Object.keys(this.msgContent).length ? this.msgContent.serviceid : serviceid;
this.pageTitle = pagename
this.selected = selected
this.triggerserviceid = triggerserviceid
this.defaultfilter = Object.keys(this.pageQuery).length ? this.pageQuery : defaultfilter ? this.formatDefault(defaultfilter, authTableObj) : { 1: 1 }
const tableColumnArrs = pageAuths.filter(item => item['superiorid'] == pageconfigurationid && item['pagetype'] == 'column')
this.getColumnData(tableColumnArrs)
},
//根据页面按钮设置数据
getPageBtnSetting (pageAuthbtns) {
this.tableBtns.push(...pageAuthbtns)
},
//根据页面按钮设置表单form数据
getPageBtnFormSetting (pageAuths, pageAuthForms) {
const { pageconfigurationid } = [...pageAuthForms][0]
const tableColumnArrs = pageAuths.filter(item => item['superiorid'] == pageconfigurationid && item['pagetype'] == 'column')
const formItemCopy = tableColumnArrs.filter((item) => item.isdisplay != 0)
this.formItem = _.orderBy(formItemCopy, ['displaynumber'], ['asc'])
this.getSelectData(this.formItem)
},
//获取表头数据
getColumnData (columnArrs = []) {
const returnData = [...columnArrs]
this.$store.dispatch('auth/changeAuthMsg', returnData)
const tableColsCopy = _.cloneDeep(returnData).filter((item) => item.isdisplay != 0)
const tableColsCopyOrder = _.orderBy(tableColsCopy, ['displaynumber'], ['asc'])
// const formItemCopy = _.cloneDeep(returnData).filter((item) => item.isdisplay == 2 || item.isdisplay == 3);
// this.formItem = _.orderBy(formItemCopy, ['displaynumber'], ['asc']);
const msgCounts = tableColsCopyOrder.filter(item => item.enablecount)
const simpleQueryItem = _.cloneDeep(returnData).filter((item) => item.easysearch && item.isfiltercolumn)
if (msgCounts.length) {
this.summaryFlag = true
}
this.tableCols = listToTree(tableColsCopyOrder, 'groupid', 'pagecode')
const columncode = returnData.find(
(item) => item.isprimarykey == 1
)
if (columncode && Object.keys(columncode).length) {
this.tableKey = columncode['pagecode']
}
if (simpleQueryItem?.length) {
this.simpleQueryFlag = true
this.simpleQueryItem = simpleQueryItem
}
},
//获取tree点击
treeNodeClick (data) {
const nrow = _.cloneDeep(data)
this.rotlist = {}
this.rotlist = {
auth_id: data.pageconfigurationid,
pagecode:data.pagecode,
qid: null,
show_index: data.displaynumber,
superiorcode: data.pageroute,
title: data.pagename,
up_auth_id: data.superiorid
}
this.selectedDataCheck = nrow
if (this.selected) {
this.treeCheckQuery(nrow)
} else {
const values = Object.values(data)
const filterItem = this.formatDefault(this.treeParameters, data)
if (!Object.keys(filterItem).length) return
this.defaultfilter = values.includes(-1) || values.includes('全部') ? { 1: 1 } : filterItem
this.queryTableData(true)
}
},
//存在勾选-点击树-查询
async treeCheckQuery (data) {
const values = Object.values(data)
const filterItem = this.formatDefault(this.treeParameters, data)
if (!Object.keys(filterItem).length) return
const itemFilter = values.includes(-1) || values.includes('全部') ? { 1: 1 } : filterItem
const datacontent = { filter: itemFilter }
this.loading = true
this.selectedDataAlls = []
try {
const { code, returnData } = await Query({
page: 1,
serviceid: this.triggerserviceid,
datacontent,
event: '0',
size: 9999
});
if (code == 0) {
const datas = []
this.tableData.filter(item => {
[...returnData].forEach(pt => {
if (item['serviceid'] == pt['serviceid']) {
datas.push(item)
}
})
})
this.selectedDatas = [...datas]
this.selectedDatasCath = [...returnData]
this.selectedDataAlls.push([...datas])
} else {
this.$message.error("获取表格数据失败")
}
} catch (error) {
this.$message.error("获取表格数据失败")
}
this.loading = false
},
//格式化传递参数数据
formatDefault (item, data = {}) {
if (typeof item != 'string') return {}
const filterItem = {}
const parameters = item.replace('{', '').replace('}', '')
const parametersSplit = parameters?.split(',')
parametersSplit.map(item => {
const [key, val] = item?.split(':')
filterItem[key] = data[val]
})
return filterItem
},
//根据按钮权限查询表单权限
findBtntoForm (pageroute) {
return this.tableBtnForms.filter(item => item.pagecode == pageroute)
},
//表单-查看
handleDetail (row) {
const { openmode, pageroute } = this.pageAuthBtnDetail
if (!openmode) return
if (openmode != 2) this.autoBtnClick(openmode, pageroute)
this.flag = true
this.formAuth = false
this.tableType = "detail"
this.tableTitle = "查看"
this.tableForm = _.cloneDeep(row)
},
//表单-新增
async handleAdd () {
const { openmode, pageroute, pagecode } = this.pageAuthBtnAdd
if (!openmode) return
// if (!this.findBtntoForm(pageroute).length) return
if (openmode != 2) this.autoBtnClick(openmode, pageroute)
// const { pageconfigurationid } = this.findBtntoForm(pageroute)[0]
// const pageAuths = this.authArrs
// const tableColumnArrs = pageAuths.filter(item => item['superiorid'] == pageconfigurationid && item['pagetype'] == 'column')
// this.dialogName = pageroute
if (pagecode == 'startBtnAll') {
if (!Object.keys(this.selectedDataCheck).length) {
this.$message.error('请选中容器后再操作')
return
}
const { code, message } = await startAll(this.selectedDataCheck)
if (code == 0) {
this.$message.success(message || '操作成功')
this.queryTableData(true)
} else {
this.$message.error(message || '操作失败')
}
} else {
if (this.$refs['ruleForm']) {
this.$nextTick(() => {
this.$refs['ruleForm'].restForm()
})
}
this.flag = true;
this.tableType = "add"
this.tableTitle = "新增"
this.tableForm = {}
for (let k in this.defaultfilter) {
if (k != 1) {
this.tableForm[k] = this.defaultfilter[k]
}
}
for (let k in this.formItem) {
if (this.formItem[k].defaultvalue && this.formItem[k].defaultvalue != "") {
this.$set(this.tableForm, this.formItem[k].pagecode, this.formItem[k].defaultvalue)
}
}
}
// this.formItem = tableColumnArrs.filter(item => item.isdisplay == 1)
},
formatData (returnData) {
return typeof returnData == 'string' ? this.retParse(returnData) : returnData
},
retParse (returnData) {
try {
return JSON.parse(returnData) ? JSON.parse(returnData) : returnData
} catch (error) {
return returnData
}
},
//回显下拉数据
resPassters (obj) {
const narr = []
const nitem = _.cloneDeep(obj)
const { passparameters } = nitem
if (!passparameters) return ''
const ndata = this.formatData(passparameters)
if (!Array.isArray(ndata)) return ''
ndata.map(({ pageconfigurationid }) => { narr.push(pageconfigurationid) })
return narr
},
//表格-编辑
handleEdit (row) {
const { openmode, pageroute } = this.pageAuthBtnEdit
if (!openmode) return
if (openmode != 2) this.autoBtnClick(openmode, pageroute)
this.flag = true
this.tableType = "edit"
this.tableTitle = "编辑"
const nrow = _.cloneDeep(row)
if (nrow.passparameters) {
nrow.passparameters = this.resPassters(row)
}
if (nrow.dropdownlist) {
nrow.dropdownlist = Number(nrow.dropdownlist)
}
this.tableForm = nrow
},
//表格-其他类型按钮操作
handleOther (row, auth) {
const { openmode, pageroute, passparameters } = this.pageAuthBtnOther
if (!openmode) return
if (openmode != 2) this.autoBtnClick(openmode, pageroute, passparameters, row)
const { pagecode } = auth
if (pagecode == 'stopBtn' || pagecode == 'startBtn') {
this.stateChange(row)
}
},
//启动 & 停止
async stateChange (row) {
const { runstate, serviceid, containercode } = row
const filter = { serviceid, containercode }
if (runstate == 1) {
const { code, returnData } = await stop(filter)
if (code == 0) {
this.$message.success(returnData || '操作成功')
this.queryTableData(true)
} else {
this.$message.error(returnData || '操作失败')
}
} else {
const { code, returnData } = await start(filter)
if (code == 0) {
this.$message.success(returnData || '操作成功')
this.queryTableData(true)
} else {
this.$message.error(returnData || '操作失败')
}
}
},
//表格-删除
handleRemove (row) {
const { openmode, pageroute } = this.pageAuthBtnDel
if (!openmode) return
if (openmode != 2) this.autoBtnClick(openmode, pageroute)
let name = ''
const nrow = _.cloneDeep(row)
for (const key in nrow) {
if (key.includes('name')) {
name = nrow[key] || ''
}
}
this.$confirm(`确认要删除 ${name} 这条信息吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.generalDataReception(3, row, this.tableKey)
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
//表格-勾选
handleSelectionChange (val) {
this.selectedDataAlls.push([...val])
const ndatas = _.cloneDeep(this.selectedDataAlls)
if (ndatas.length == 1) {
this.sendCheckData('add', ndatas[0])
} else {
const [nitems1, nitems2] = [ndatas.at(-1), ndatas.at(-2)]
if (nitems1.length > nitems2.length) {
const res = this.findRepetData(nitems1, nitems2)
this.sendCheckData('add', res)
} else {
const res = this.findRepetData(nitems1, nitems2)
this.sendCheckData('del', res)
}
}
},
findRepetData (nitems1, nitems2) {
const key = 'serviceid'
const res = [...nitems1, ...nitems2].filter(
(item) =>
!(
nitems1.some((p) => item[key] == p[key]) &&
nitems2.some((c) => item[key] == c[key])
)
)
return res
},
//发送新增编辑删除数据
sendCheckData (types, data, key = 'serviceid') {
const event = types == 'add' ? 1 : types == 'edit' ? 2 : 3
const querys = []
const items = _.cloneDeep(data)
const { serviceid, servicename } = items[0]
const { containerid, containercode, containername } = this.selectedDataCheck
const pitem = {
serviceid,
servicename,
containerid,
containercode,
containername
}
const params = {
serviceid: this.triggerserviceid,
datacontent: formatChange(pitem, event, key),
event,
}
if (event == 3) {
params.datacontent[0].filter.containerid = containerid
delete params.datacontent[0].value.containerid
}
event == 1 ? querys.push(newData(params)) : querys.push(moveData(params))
this.getAnscyData(querys)
},
//获取异步数据
async getAnscyData (allResult) {
if (!allResult.length) return
this.loading = true
const results = await Promise.allSettled(allResult)
results.map((item) => {
const { status, value } = item
if (status == 'fulfilled') {
const { code } = value
if (code == 0) {
this.treeCheckQuery(this.selectedDataCheck)
this.$message.success('操作成功')
} else {
this.$message.error('操作失败')
}
} else {
this.$message.error('网络错误')
}
})
// this.loading = false
},
// 新增/编辑-取消
submitClickClose (formName) {
this.formAuth = true
this.flag = false
this.$refs[formName].restForm()
},
// 新增/编辑-确认
submitClickHandler () {
const flag = this.$refs["ruleForm"].submitClickHandler()
if (flag) this.tableType == "add" ? this.generalDataReception(1, this.tableForm) : this.generalDataReception(2, this.tableForm, this.tableKey)
},
submitClickHandlers () {
this.generalDataReception(1, this.tableForm)
},
//表格-增/删/改
async generalDataReception (event, data, key) {
this.dialogLoading = true
delete data.passparameters
console.log(formatChange(data, event, key))
try {
const params = {
serviceid: this.pageServiceId,
datacontent: formatChange(data, event, key),
event: `${event}`,
};
const { code } =
event == 1
? await newData(params)
: event == 2
? await modifyData(params)
: await moveData(params);
if (code == 0) {
this.$message.success("操作成功")
this.flag = false
this.rmFlag = false
this.dialogLoading = false
this.tableObj = {}
this.tableForm = {}
this.resetTable()
this.load();
this.depMath = Math.random()
// this.$router.go(0);
} else {
this.$message.error("操作失败");
this.flag = false
this.rmFlag = false
this.dialogLoading = false
this.tableObj = {};
this.tableForm = {};
}
} catch (error) {
this.flag = false
this.rmFlag = false
this.dialogLoading = false
this.tableObj = {}
this.tableForm = {}
}
},
autoBtnClick (id, url, passparameters, row = {}) {
switch (Number(id)) {
case 1:
if (passparameters && Object.keys(row).length) {
const filterItem = this.formatDefault(passparameters, row)
this.$router.push({
path: url,
query: filterItem
})
}
break;
case 2:
this.$router.push(url)
break;
default:
break;
}
},
//高级查询-弹框打开
async handleQuery () {
const { openmode, pageroute, pagecode } = this.pageAuthBtnQuery
if (!openmode) return
if (pagecode == 'stopBtnAll') {
if (!Object.keys(this.selectedDataCheck).length) {
this.$message.error('请选中容器后再操作')
return
}
const { code, message } = await stopAll(this.selectedDataCheck)
if (code == 0) {
this.$message.success(message || '操作成功')
this.queryTableData(true)
} else {
this.$message.error(message || '操作失败')
}
} else {
if (openmode != 3) this.advancedDrawer = true // this.autoBtnClick(openmode, pageroute)
}
},
//简易查询-确定
queryValue (dataRules) {
const arr = [...dataRules]
if (arr && arr.length) {
arr.forEach(item => {
item.value = typeof item.value == 'string' ? item.value.replace(/\s*/g, "") : item.value
})
}
this.defaultfilter = arr.length ? arr : { 1: 1 }
this.simpleQueryValue = arr
this.queryTableData(true)
},
//高级查询-确定
advancedTable (refName) {
this.$refs[refName].advancedQueryHandler()
},
//高级查询-取消
advancedClose () {
this.advancedDrawer = false
// this.defaultfilter = { 1: 1 }
// this.queryTableData(true)
},
//初始化
onInstall () {
if (!Object.keys(this.selectedDataCheck).length) {
this.$message.error('请选中权限后再操作')
return
}
const { pagetype } = this.selectedDataCheck
if (pagetype != 'table') {
this.$message.error('请选择表格后再操作')
return
}
this.installFlag = true
},
//初始化-关闭
installClose () {
this.installFlag = false
},
//初始化-确定
installTable () {
this.installSubmit()
this.installFlag = false
},
async installSubmit () {
const { pageconfigurationid } = this.selectedDataCheck
const { code, returnData } = await Query({
serviceid: 134,
datacontent: {
tableName: this.$refs['installForm'].tableinfo,
datasourceid: this.$refs['installForm'].datasourceid,
pageconfigurationid
},
deletedatacontent: {
datacontent: [
{
filter: {
superiorid: pageconfigurationid
},
value: {}
}
],
event: '3'
},
event: '0'
})
if (code == 0 && returnData?.length) {
this.$message.success('数据初始化成功')
this.$refs['pageTree'].pageInit()
this.queryTableData(true)
this.$refs['installForm'].tableinfo = ''
this.$refs['installForm'].datasourceid = ''
}
},
//高级查询-确定-数据
getAdvancedQueryData (dataRules) {
const arr = [...dataRules]
if (arr && arr.length) {
arr.forEach(item => {
item.value = typeof item.value == 'string' ? item.value.replace(/\s*/g, "") : item.value
})
}
this.defaultfilter = arr
this.advancedQueryValue = arr
this.queryTableData(true)
},
//高级查询-收藏
queryCollect (refName) {
this.$refs[refName].advancedQueryCollect()
},
//高级查询-重置
restCollect (refName) {
this.defaultfilter = { 1: 1 }
this.queryTableData(true)
this.$refs[refName].advancedRestCollect()
},
// 给表头单元格加上 ascending 或 descending 使用 element 自带的排序箭头变色
headerCellClass () {
return function ({ row, column, rowIndex, columnIndex }) {
const classes = []
const rule = this.tableDataSortRules[column.property]
if (rule) {
classes.push(rule)
}
return classes.join(' ')
}
},
//添加-表格-行样式
rowClass () {
return function ({ row, rowIndex }) {
const classes = []
if (row.deleted === 'DEL') {
classes.push('bgl-deleted')
}
return classes.join(' ')
}
},
//添加-表格-单元格样式
cellClass () {
return function ({ row, column, rowIndex, columnIndex }) {
const classes = []
const { property } = column
const ndata = _.cloneDeep(this.tableCols).filter(item => item.pagecode == property)
if (ndata?.length) {
const { pageroute } = ndata[0]
if (pageroute) classes.push('cell-click')
}
return classes.join(' ')
}
},
formatPass (pass = []) {
if (typeof pass != 'string') return {}
const ndata = JSON.parse(pass)
if (!ndata) return {}
const nitem = {}
ndata.map(item => {
const ns = Object.values(item)
nitem[ns[0]] = ns[1]
})
return nitem
},
//添加-表格-单元格-点击事件
cellClickHandler (row, column, cell, event) {
const { property } = column
const ndata = _.cloneDeep(this.tableCols).filter(item => item.pagecode == property)
const params = {}
if (ndata?.length) {
const { defaultfilter, pageroute, passparameters } = ndata[0]
if (!pageroute) return
if (defaultfilter || passparameters) {
if (passparameters) {
// const nitem = this.formatPass(passparameters)
const passparametersArray = JSON.parse(passparameters)
passparametersArray.map(item => {
if (row[item.pagecode]) {
const alias = item.alias
const pagecode = item.pagecode
if (alias) {
params[alias] = row[item['pagecode']]
}
else {
params[pagecode] = row[item['pagecode']]
}
}
})
this.$router.push({
path: pageroute,
query: params
})
return
}
if (defaultfilter) {
const filterItem = this.formatDefault(defaultfilter, row)
this.$router.push({
path: pageroute,
query: filterItem
})
return
}
}
else {
this.$router.push(pageroute)
}
}
},
//导出
handleExport () {
if (!this.tableData.length) {
this.$message.info('无数据')
return
}
const table = this.$refs['table'].$el.cloneNode(true)
const fileName = this.pageTitle + '.xlsx'
exportToExcel(table, this.pageTitle, fileName)
},
tableFormatter () {
return function (row, column, cellValue) {
switch (column.property) {
case 'departureTime':
return (cellValue ?? '').replace('T', ' ')
case 'deleted':
return cellValue === 'DEL' ? cellValue : ''
case 'activated':
return Number(cellValue) === 1 ? '激活' : '未激活'
default:
return cellValue ?? ''
}
}
},
tableMountedHandler (refName, ref) {
this.$refs[refName] = ref
},
resetTable () {
this.dataContent = {}
this.page = 0;
this.noMore = false;
this.tableData = [];
},
load () {
if (this.noMore || this.loading) {
return
}
this.queryTableData()
},
async queryTableData (jumpSing = false) {
if (jumpSing) {
const initialize = _.once(this.resetTable)
initialize()
}
this.loading = true;
const datacontent = { filter: this.defaultfilter }
const parmas = {
page: ++this.page,
serviceid: this.pageServiceId,
datacontent,
event: '0'
}
if (this.selected || this.pageSizeDatas.includes(this.$route.path.replace('/', ''))) {
parmas.size = 9999
}
try {
const { code, returnData } = await Query(parmas);
if (code == 0) {
if (returnData.length === 0) {
this.page--
this.noMore = true
}
this.tableData.push(...returnData)
this.setPassters(this.tableData)
// this.formItemArr = this.tableData
} else {
this.page--
this.noMore = true
this.$message.error("获取表格数据失败")
}
} catch (error) {
this.page--
this.noMore = true
}
if (this.selected || this.pageSizeDatas.includes(this.$route.path.replace('/', ''))) {
this.noMore = true
}
this.loading = false
},
//格式化传递参数数据
formatDefaults (item) {
if (typeof item != 'string') return {}
const filterItem = {}
const parameters = item.replace('{', '').replace('}', '')
const parametersSplit = parameters?.split(',')
parametersSplit.map(item => {
const [key, val] = item?.split(':')
filterItem[key] = val
})
return filterItem
},
//去除重复请求
reduceHttp (arr = [], formItem = []) {
const datas = _.cloneDeep(arr)
const dataMap = new Map()
const [columnArrs1, columnArrs2, allResult, allResultKey] = [[], [], [], []]
if (!datas.length) return
datas.map(item => {
const { datacontent, dropdownlist } = item
const nameter = Object.entries(datacontent.filter)[0]
const namekey = dropdownlist + nameter[0] + nameter[1]
if (!dataMap.get(namekey)) {
dataMap.set(namekey, item)
columnArrs1.push(item)
} else {
columnArrs2.push(item)
}
})
columnArrs1.map(({ dropdownlist, pagecode, datacontent }) => {
allResultKey.push(pagecode)
allResult.push(Query({ serviceid: dropdownlist, datacontent, event: '0', page: 1, size: 9999 }))
})
this.getAnscyData(allResultKey, allResult, _.cloneDeep(formItem), _.cloneDeep(columnArrs1), _.cloneDeep(columnArrs2))
},
//获取表单下拉数据
getSelectData (formItem = []) {
if (!formItem.length || !Array.isArray(formItem)) return
const formItemCopy = _.cloneDeep(formItem)
const [allResult, allResultKey, allResultList] = [[], [], []]
formItemCopy.map(({ dropdownlist, pagecode, defaultparameters }) => {
if (((dropdownlist || dropdownlist == 0) && dropdownlist != "")) {
const datacontent = defaultparameters ? { filter: this.formatDefaults(defaultparameters) } : { filter: { 1: 1 } }
const params = {
dropdownlist,
pagecode,
datacontent
}
allResultList.push(params)
}
})
if (allResultList?.length) {
this.reduceHttp(allResultList, formItemCopy)
} else {
this.formItemArr = formItemCopy
}
},
//获取异步数据
async getAnscyData (allResultKey = [], allResult = [], formItem = [], columnArrs1 = [], columnArrs2 = []) {
this.loading = true
if (allResult.length && allResultKey.length) {
const results = await Promise.allSettled(allResult)
const resultDatas = []
results.map((item, index) => {
const { status, value } = item
if (status == 'fulfilled') {
const { code, returnData } = value
const nitem = {
pagecode: allResultKey[index],
dropdownlist: columnArrs1[index].dropdownlist,
returnData
}
resultDatas.push(nitem)
this.tableOptions[allResultKey[index]] = code == 0 && returnData?.length ? this.formatData(returnData) : []
}
})
if (resultDatas?.length) this.serRepets(_.cloneDeep(resultDatas), columnArrs1, columnArrs2)
this.formItemArr = formItem
} else {
this.formItemArr = formItem
}
this.setPassters(this.formPass)
this.loading = false
},
//设置重复下拉数据
serRepets (resultDatas = [], columnArrs1, columnArrs2) {
resultDatas.map(item => {
columnArrs1.map(ci => {
if (item.pagecode == ci.pagecode) {
item.datacontent = ci.datacontent
}
})
})
const result = [...resultDatas]
result.map(item => {
const { datacontent, dropdownlist, returnData } = item
const nameterItem = Object.entries(datacontent.filter)[0]
const namekeyItem = dropdownlist + nameterItem[0] + nameterItem[1]
columnArrs2.map(ci => {
const { datacontent, dropdownlist, pagecode } = ci
const nameterCi = Object.entries(datacontent.filter)[0]
const namekeyCi = dropdownlist + nameterCi[0] + nameterCi[1]
if (namekeyItem == namekeyCi) {
this.tableOptions[pagecode] = _.cloneDeep(returnData)
}
})
})
},
//设置下拉数据
setPassters (array = []) {
const passitem = this.formItemArr.filter(item => item.pagecode == 'passparameters')
if (passitem?.length) {
const ndata = _.cloneDeep(array)
const passitemkey = passitem[0]
passitemkey.datatype = 'DROP'
ndata.map(item => {
item.dropdownlistid = item.pageconfigurationid
item.dropdownlistlabel = item.pagename
})
this.tableOptions['passparameters'] = ndata
this.formPassCopy = ndata
}
},
isShow (isdisplay) {
let show = false
if (eval(isdisplay)) {
show = true
}
else {
show = false
}
return show
},
handleCheckedCitiesChange (value) {
this.leftFlag = value
},
handleCheckedCitiesChanges (value) {
this.tableFlag = value
},
//获取表单下拉数据
changeSelect (code) {
if (code == 'tasktype' && this.tableForm[code] == 1) {
this.vflag = true
}
if (code == 'passparameters') return
const datas = this.$store.state.auth.authMsg
if (!datas?.length) return
const ndata = datas.filter(item => item.labelcode && item.pagecode == code)
if (ndata?.length) {
const nitem = ndata[0]
const nval = this.tableForm[code]
const { dropdownlistlabel, labelcode, dropdownlistid } = nitem
const wdata = this.tableOptions[code].filter(item => item[dropdownlistid] == nval)
if (!wdata.length) return
const witem = wdata[0]
this.tableForm[labelcode] = witem[dropdownlistlabel]
}
},
inputChangeHandler (data) {
if (!this.tableForm[data]) this.tableForm[data] = null
},
setText (code) {
if (this.vflag && code == 'cronexpress') {
this.$refs['vcrontab'].showCron = true
}
},
},
}
</script>
<style lang="scss" scoped>
.TablePage {
height: calc(100vh - 90px);
padding: 20px;
&_content {
margin-top: 20px;
height: calc(100vh - 190px);
&_left {
width: 360px;
margin-right: 20px;
}
&_right {
height: calc(100% - 100px);
}
.tableAuto {
width: 100%;
}
.tableSacle {
width: calc(100% - 380px);
}
.check_header{
width: 100%;
height:100px;
overflow: hidden;
}
.TablePage{
&_child {
height:100%;
&_left {
width: 360px;
margin-right: 20px;
}
}
}
}
}
</style>