Merge branch 'huyt' of http://ufidahz.com.cn:9015/root/middleground_code_v2 into huyt
This commit is contained in:
username
commit
1f5d588c75
|
|
@ -115,6 +115,26 @@ export default {
|
|||
show: true,
|
||||
},
|
||||
],
|
||||
permissionsMenu: [
|
||||
{
|
||||
title: "主数据中心",
|
||||
path: "/MasterDataCenter",
|
||||
icon: "el-icon-coin",
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
title: "应用管理",
|
||||
path: "/ApplicationCenter",
|
||||
icon: "el-icon-menu",
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
title: "集成任务",
|
||||
path: "/IntegrationTaskCenter",
|
||||
icon: "el-icon-data-line",
|
||||
show: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
|
@ -157,10 +177,18 @@ export default {
|
|||
}
|
||||
return type;
|
||||
},
|
||||
// 判断当前有没有菜单权限 知识库 在线文档 报表中心 系统管理 系统维护 代码生成器
|
||||
// 判断当前有没有菜单权限 主数据中心 应用管理
|
||||
DetermineMenuPermission() {
|
||||
this.menuData = [];
|
||||
this.menuData = [...this.fixedMenu];
|
||||
let routeList = localStorage.getItem("routeList")
|
||||
? localStorage.getItem("routeList")
|
||||
: null;
|
||||
this.permissionsMenu.forEach((aItem) => {
|
||||
if (routeList != null && routeList.includes(aItem.title)) {
|
||||
aItem.show = true;
|
||||
}
|
||||
});
|
||||
this.menuData = [...this.fixedMenu, ...this.permissionsMenu];
|
||||
},
|
||||
// 路由跳转
|
||||
jumpRoute(item) {
|
||||
|
|
@ -406,7 +434,6 @@ export default {
|
|||
background: #1478f6;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -109,7 +109,8 @@ export const constantRoutes = [{
|
|||
icon: 'dashboard'
|
||||
// affix: true,
|
||||
}
|
||||
},{
|
||||
},
|
||||
{
|
||||
path: "Workbench",
|
||||
component: () => import("@/views/newVersionView/Workbench/index"),
|
||||
name: "Workbench",
|
||||
|
|
@ -118,6 +119,33 @@ export const constantRoutes = [{
|
|||
icon: "dashboard",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "MasterDataCenter",
|
||||
component: () => import("@/views/newVersionView/MasterDataCenter/index"),
|
||||
name: "MasterDataCenter",
|
||||
meta: {
|
||||
title: "主数据中心",
|
||||
icon: "dashboard",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "ApplicationCenter",
|
||||
component: () => import("@/views/newVersionView/ApplicationCenter/index"),
|
||||
name: "ApplicationCenter",
|
||||
meta: {
|
||||
title: "应用管理",
|
||||
icon: "dashboard",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "IntegrationTaskCenter",
|
||||
component: () => import("@/views/newVersionView/IntegrationTaskCenter/index"),
|
||||
name: "IntegrationTaskCenter",
|
||||
meta: {
|
||||
title: "集成任务",
|
||||
icon: "dashboard",
|
||||
},
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
|
|
@ -0,0 +1,384 @@
|
|||
<template>
|
||||
<div class="wrap">
|
||||
<div class="main" v-loading="mainLoading">
|
||||
<baseTable :tableData="tableData" :tabLoading="tabLoading"
|
||||
|
||||
:tableColumn="tableColumn" :border="false"
|
||||
>
|
||||
<!-- 来源类型-->
|
||||
<template #sourceType="{row}">
|
||||
{{ row.sourceType == 1 ? '插件' : 'api' }}
|
||||
</template>
|
||||
<!-- 触发类型-->
|
||||
<template #triggerType="{row}">
|
||||
{{ row.triggerType == 0 ? '手动' : '自动' }}
|
||||
</template>
|
||||
<!-- 启用/停用-->
|
||||
<template #enabledState="{row}">
|
||||
<el-switch
|
||||
:disabled="true"
|
||||
v-model="row.enabledState"
|
||||
active-value="1"
|
||||
inactive-value="0"
|
||||
>
|
||||
</el-switch>
|
||||
</template>
|
||||
<!-- 操作-->
|
||||
<template #operation="{row}">
|
||||
<div class="btnList">
|
||||
<div class="settingBtn" @click="sonTableEditHandle(row)">
|
||||
<img src="./images/设置.png" alt="">
|
||||
</div>
|
||||
<div class="deleBtn" @click="activedOnFunc(row)">
|
||||
<img src="./images/删除.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</baseTable>
|
||||
<div class="receiptsAddRow">
|
||||
<el-link
|
||||
type="primary"
|
||||
@click="addRowHandle"
|
||||
:underline="false"
|
||||
>+ 添加
|
||||
</el-link
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<baseRightDialog ref="settingForm"
|
||||
:footerShow="true"
|
||||
:dialogVisible.sync="settingFormShow"
|
||||
title="数据来源"
|
||||
@handleClose="settingFormShow=false"
|
||||
:submitShow="true"
|
||||
:size="'50%'"
|
||||
@handleConfirmClick="sonTableSaveHandle"
|
||||
|
||||
>
|
||||
<settingForm ref="settingForm" v-if="settingFormShow" @saveSuccessHandle="saveSuccessHandle"></settingForm>
|
||||
</baseRightDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import settingForm from './settingForm.vue'
|
||||
import baseRightDialog from '@/components/base/baseRightDialog/index.vue'
|
||||
import baseNewSelect from '@/views/applicationList/com/baseNewSelect.vue'
|
||||
import baseDialog from '@/views/integrationOption/compoments/baseDialog'
|
||||
import BaseTable from '@/views/intergrationTask/compoments/baseTable.vue'
|
||||
import baseNewForm from '@/views/intergrationTask/compoments/baseNewForm'
|
||||
import { getApiModuleApi } from '@/api/apiChunks'
|
||||
import { deepClone } from '@/utils/index.js'
|
||||
import { getUserModuleApi } from '@/api/integrationOption/integrationOption'
|
||||
import basePage from '@/views/intergrationTask/compoments/basePage.vue'
|
||||
import { authApi } from '@/api/apis/auth'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
mainLoading: false,
|
||||
saveLoading: false,
|
||||
options: [],
|
||||
// 角色字典
|
||||
roleDist: {},
|
||||
addSwitch: false,
|
||||
tabLoading: false,
|
||||
tableColumn: [
|
||||
{
|
||||
title: '来源类型',
|
||||
id: 'sourceType',
|
||||
width:150,
|
||||
},
|
||||
{
|
||||
title: '来源应用',
|
||||
id: 'appName',
|
||||
width:150,
|
||||
},
|
||||
{
|
||||
title: '触发类型',
|
||||
id: 'triggerType',
|
||||
width:120,
|
||||
},
|
||||
{
|
||||
title: '来源编码',
|
||||
id: 'sourceCodeName',
|
||||
tooltip: true
|
||||
},
|
||||
{
|
||||
title: '新增接口',
|
||||
id: 'addName'
|
||||
},
|
||||
{
|
||||
title: '修改接口',
|
||||
id: 'updateName'
|
||||
},
|
||||
{
|
||||
title: '删除接口',
|
||||
id: 'deleteName'
|
||||
},
|
||||
{
|
||||
title: '启用/停用',
|
||||
id: 'enabledState',
|
||||
width:120,
|
||||
},
|
||||
{ title: '操作', id: 'operation',width:120, }
|
||||
],
|
||||
tableData: [],
|
||||
pageModel: {
|
||||
pageIndex: 1,
|
||||
total: 10,
|
||||
limit: 10
|
||||
},
|
||||
addRole: '',
|
||||
settingFormShow: false,
|
||||
serviceOptions: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//保存/编辑成功
|
||||
saveSuccessHandle() {
|
||||
this.settingFormShow = false
|
||||
this.getTableData()
|
||||
},
|
||||
//这里需要拿到应用下啦为后续找中文环节做准备
|
||||
async initSelect() {
|
||||
const res = await authApi('sysApplicationService', '', 'queryEntity', '', {})
|
||||
console.log(res)
|
||||
this.serviceOptions.options = []
|
||||
res.attribute.forEach(item => {
|
||||
this.serviceOptions.push({
|
||||
id: item.id,
|
||||
label: item.name
|
||||
})
|
||||
})
|
||||
return true
|
||||
},
|
||||
//获取tableData
|
||||
async getTableData() {
|
||||
const res = await authApi('mdmModuleService', '', 'queryMdmSource', '', {
|
||||
mdmId: this.$route.query.id
|
||||
})
|
||||
this.tableData = res.attribute
|
||||
console.log(this.tableData, 'table')
|
||||
//这边需要开始处理应用列表、新增修改删除接口找中文环节
|
||||
this.tableData.forEach(async(item) => {
|
||||
console.log('???', this.serviceOptions)
|
||||
let obj = this.serviceOptions.find(ele => {
|
||||
return ele.id === item.sourceName
|
||||
})
|
||||
this.$set(item, 'appName', obj.label)
|
||||
let labelDist = {}
|
||||
let plugInDist = {}
|
||||
const res2 = await authApi('sysApplicationApiService', '', 'queryEntity', '', {
|
||||
appId: item.appId
|
||||
})
|
||||
res2.attribute.forEach((item) => {
|
||||
labelDist[item.id] = item.apiName
|
||||
})
|
||||
if (item.deleteApi) {
|
||||
this.$set(item, 'deleteName', labelDist[item.deleteApi])
|
||||
}
|
||||
if (item.updateApi) {
|
||||
this.$set(item, 'updateName', labelDist[item.updateApi])
|
||||
}
|
||||
if (item.addApi) {
|
||||
this.$set(item, 'addName', labelDist[item.addApi])
|
||||
}
|
||||
if (item.sourceType == 2 && item.sourceCode) {
|
||||
this.$set(item, 'sourceCodeName', labelDist[item.sourceCode])
|
||||
}
|
||||
//走插件开始找
|
||||
if (item.sourceType == 1 && item.sourceCode) {
|
||||
const res = await authApi('sysApplicationPluginService', '', 'queryEntity', '', {
|
||||
appId: item.sourceName
|
||||
})
|
||||
res.attribute.forEach((item) => {
|
||||
plugInDist[item.id] = item.pluginName
|
||||
})
|
||||
this.$set(item, 'sourceCodeName', plugInDist[item.sourceCode])
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
//保存
|
||||
sonTableSaveHandle() {
|
||||
this.$refs.settingForm.$refs.typeOptionForm.submitForm()
|
||||
},
|
||||
//设置
|
||||
sonTableEditHandle(row) {
|
||||
this.settingFormShow = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.settingForm.getrowDetails(row.id)
|
||||
})
|
||||
},
|
||||
//删除
|
||||
activedOnFunc(row) {
|
||||
this.$confirm('确定删除？')
|
||||
.then(async(_) => {
|
||||
this.openLoading('submit')
|
||||
const res = await authApi('mdmModuleService', '', 'deleteMdmSource', '', {
|
||||
id: row.id
|
||||
})
|
||||
this.$vmNews('删除成功', 'success')
|
||||
this.getTableData()
|
||||
})
|
||||
.catch((_) => {
|
||||
})
|
||||
},
|
||||
//添加
|
||||
addRowHandle() {
|
||||
this.settingFormShow = true
|
||||
},
|
||||
async init() {
|
||||
this.mainLoading = true
|
||||
const res = await getApiModuleApi({
|
||||
tl: 'mdmService',
|
||||
as: 'mdmService',
|
||||
dj: 'queryMdmModuleRule'
|
||||
}, { id: this.$route.query.id })
|
||||
res.attribute.forEach(item => {
|
||||
item.mdmModuleRoleButtonEntities.forEach(ele => {
|
||||
item[ele.buttonType] = true
|
||||
})
|
||||
})
|
||||
this.mainLoading = false
|
||||
this.tableData = res.attribute
|
||||
},
|
||||
//close
|
||||
dialogCloseHandle() {
|
||||
this.addRole = ''
|
||||
},
|
||||
//add
|
||||
addHandle() {
|
||||
this.addSwitch = true
|
||||
},
|
||||
// 页码
|
||||
currentChangeHandle(pageModel) {
|
||||
this.pageModel = pageModel
|
||||
this.$nextTick(() => {
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
components: {
|
||||
baseNewForm,
|
||||
BaseTable,
|
||||
baseDialog,
|
||||
baseNewSelect,
|
||||
basePage,
|
||||
baseRightDialog,
|
||||
settingForm
|
||||
},
|
||||
created() {
|
||||
this.initSelect().then(() => {
|
||||
this.getTableData()
|
||||
})
|
||||
|
||||
this.$emit('flashActive', 3)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.receiptsAddRow {
|
||||
margin-top: 15px;
|
||||
border: 1px dotted #ccc;
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
::v-deep .el-button {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.checkChunk {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
background-color: #fbfbfb;
|
||||
width: 99.5%;
|
||||
overflow: auto;
|
||||
margin-left: 5px;
|
||||
|
||||
> .btn {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
> .chunk {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
> .main {
|
||||
margin-top: 10px;
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.addBox {
|
||||
> .chunk {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.btnList {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.settingBtn {
|
||||
cursor: pointer;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: #EBEBED;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> img {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.deleBtn {
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: #EBEBED;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> img {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,365 @@
|
|||
<template>
|
||||
<div class="settingForm">
|
||||
<baseNewForm
|
||||
ref="typeOptionForm"
|
||||
:spanNumber="18"
|
||||
:isFunBtn="false"
|
||||
:formRow="formRow"
|
||||
:ruleForm="ruleForm"
|
||||
:labelPosition="'top'"
|
||||
@onSelect="typeSelectChangeHanlde"
|
||||
@onSubmit="typeOptionOnSubmit"
|
||||
>
|
||||
</baseNewForm>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import baseNewForm from '../compoments/baseNewForm'
|
||||
import BaseTable from '@/views/intergrationTask/compoments/baseTable.vue'
|
||||
import { authApi } from '@/api/apis/auth'
|
||||
import { getApiModuleApi } from '@/api/apiChunks'
|
||||
import { retrieveRawAttr } from 'echarts/lib/data/helper/dataProvider'
|
||||
|
||||
export default {
|
||||
name: 'settingForm',
|
||||
data() {
|
||||
return {
|
||||
formRow: [
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: 'select',
|
||||
title: '来源类型',
|
||||
id: 'sourceType',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
options: [
|
||||
{
|
||||
label: '插件',
|
||||
id: '1'
|
||||
},
|
||||
{
|
||||
label: 'api',
|
||||
id: '2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: 'select',
|
||||
title: '来源应用',
|
||||
id: 'sourceName',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
options: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: 'select',
|
||||
title: '来源编码',
|
||||
id: 'sourceCode',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
options: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: 'select',
|
||||
title: '触发类型',
|
||||
id: 'triggerType',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
options: [
|
||||
{
|
||||
label: '手动',
|
||||
id: '0'
|
||||
},
|
||||
{
|
||||
label: '自动',
|
||||
id: '1'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: 'select',
|
||||
title: '新增接口',
|
||||
id: 'addApi',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
options: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: 'select',
|
||||
title: '修改接口',
|
||||
id: 'updateApi',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
options: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: 'select',
|
||||
title: '删除接口',
|
||||
id: 'deleteApi',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
options: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: 'switch',
|
||||
title: '启用/停用',
|
||||
id: 'enabledState',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
activeValue: '1',
|
||||
inactiveValue: '0'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
ruleForm: {},
|
||||
tableId: '',//数据源主表名称
|
||||
mainLoading: false,
|
||||
tabLoading: false,
|
||||
serviceOptions: [],//主表
|
||||
labelOptions: [],//字段名称下啦
|
||||
labelDist: {}//字段名称字典
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//字段名称修改事件 需要存filedName
|
||||
filedIdChangHandle(val, row) {
|
||||
row.filedName = this.labelDist[val]
|
||||
},
|
||||
//表字段字段类型下啦初始化
|
||||
async initSelect() {
|
||||
//服务名下拉
|
||||
this.serviceOptions = []
|
||||
const service = await getApiModuleApi({
|
||||
tl: 'mdmModuleService',
|
||||
as: '',
|
||||
dj: 'queryMdmService'
|
||||
}, { remark: '' })
|
||||
service.attribute.forEach(item => {
|
||||
console.log(item.dbName, 'item')
|
||||
this.serviceOptions.push({
|
||||
id: item.id,
|
||||
label: item.remark,
|
||||
dbId: item.id,
|
||||
mdmId: item.mdmId
|
||||
})
|
||||
})
|
||||
console.log(this.serviceOptions, 'this.serviceOptions')
|
||||
},
|
||||
async typeSelectChangeHanlde(val, index, indexRow, row, flag = true) {
|
||||
if (flag && (row.id === 'sourceName' || row.id === 'sourceType')) {
|
||||
if (row.id === 'sourceType') {
|
||||
this.formRow[2].elCol[0].options = []
|
||||
this.$set(this.ruleForm, 'sourceCode', '')
|
||||
} else {
|
||||
this.formRow[2].elCol[0].options = []
|
||||
this.formRow[4].elCol[0].options = []
|
||||
this.formRow[5].elCol[0].options = []
|
||||
this.formRow[6].elCol[0].options = []
|
||||
this.$set(this.ruleForm, 'addApi', '')
|
||||
this.$set(this.ruleForm, 'updateApi', '')
|
||||
this.$set(this.ruleForm, 'deleteApi', '')
|
||||
this.$set(this.ruleForm, 'sourceCode', '')
|
||||
}
|
||||
|
||||
}
|
||||
//当下啦是appid时条用接口查询该app下的所有接口用在新增、修改、删除上
|
||||
if ((row.id === 'sourceName' || row.id === 'sourceType') && this.ruleForm.sourceName) {
|
||||
const res = await authApi('sysApplicationApiService', '', 'queryEntity', '', {
|
||||
appId: this.ruleForm.sourceName
|
||||
})
|
||||
res.attribute.forEach((item) => {
|
||||
this.formRow[4].elCol[0].options.push({
|
||||
id: item.id,
|
||||
label: item.apiName
|
||||
})
|
||||
this.formRow[5].elCol[0].options.push({
|
||||
id: item.id,
|
||||
label: item.apiName
|
||||
})
|
||||
this.formRow[6].elCol[0].options.push({
|
||||
id: item.id,
|
||||
label: item.apiName
|
||||
})
|
||||
if (this.ruleForm.sourceType == 2) {
|
||||
this.formRow[2].elCol[0].options.push({
|
||||
id: item.id,
|
||||
label: item.apiName
|
||||
})
|
||||
}
|
||||
})
|
||||
//如果是插件则来源编号要走插件接口
|
||||
if (this.ruleForm.sourceType == 1) {
|
||||
const res = await authApi('sysApplicationPluginService', '', 'queryEntity', '', {
|
||||
appId: this.ruleForm.sourceName
|
||||
})
|
||||
res.attribute.forEach((item) => {
|
||||
this.formRow[2].elCol[0].options.push({
|
||||
id: item.id,
|
||||
label: item.pluginName
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
//测试通过
|
||||
async typeOptionOnSubmit() {
|
||||
let params = {
|
||||
...this.ruleForm,
|
||||
dbId: this.tableId,
|
||||
mdmId: this.$route.query.id
|
||||
}
|
||||
if (params.id) {
|
||||
this.openLoading('submit')
|
||||
const res = await authApi('mdmModuleService', '', 'updateMdmSource', '', params)
|
||||
this.$vmNews('保存成功', 'success')
|
||||
this.$emit('saveSuccessHandle')
|
||||
} else {
|
||||
this.openLoading('submit')
|
||||
const res = await authApi('mdmModuleService', '', 'saveMdmSource', '', params)
|
||||
this.$vmNews('保存成功', 'success')
|
||||
this.$emit('saveSuccessHandle')
|
||||
}
|
||||
},
|
||||
//获取应用下啦
|
||||
async getAppList() {
|
||||
const res = await authApi('sysApplicationService', '', 'queryEntity', '', {})
|
||||
this.formRow[1].elCol[0].options = []
|
||||
res.attribute.forEach(item => {
|
||||
this.formRow[1].elCol[0].options.push({
|
||||
id: item.id,
|
||||
label: item.name
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
//编辑获取数据
|
||||
async getrowDetails(id) {
|
||||
const res = await authApi('mdmModuleService', '', 'getMdmSource', '', {
|
||||
id
|
||||
})
|
||||
this.ruleForm = res.attribute
|
||||
this.typeSelectChangeHanlde(this.ruleForm.appId, 0, 0, { id: 'sourceName' }, false)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getAppList()
|
||||
this.initSelect()
|
||||
},
|
||||
components: {
|
||||
BaseTable,
|
||||
baseNewForm
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
.bigTitle {
|
||||
border-top: 1px solid #EBEBEB;
|
||||
padding-top: 20px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
line-height: 22px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.tableName {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 30px 0;
|
||||
|
||||
.title {
|
||||
margin-right: 20px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.receiptsAddRow {
|
||||
margin-top: 30px;
|
||||
border: 1px dotted #ccc;
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.btnList {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.deleBtn {
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: #EBEBED;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> img {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,290 @@
|
|||
<template>
|
||||
<div>
|
||||
<template v-if="!lookflag">
|
||||
<el-select
|
||||
v-loading="selLoading"
|
||||
class="w-100"
|
||||
v-model="selectValue"
|
||||
:placeholder="placeholder"
|
||||
:clearable="false"
|
||||
style="width: 240px"
|
||||
size="mini"
|
||||
ref="mySelect"
|
||||
:reserve-keyword="true"
|
||||
:disabled="disabled"
|
||||
filterable
|
||||
popper-class="sele"
|
||||
:filter-method="filter"
|
||||
@change="fun"
|
||||
@focus="funx"
|
||||
@blur="funb"
|
||||
@visible-change="hidden"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in options"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
remote
|
||||
:value="item.id"
|
||||
placeholder="请输入"
|
||||
>
|
||||
</el-option>
|
||||
|
||||
<div style="bottom: -10px">
|
||||
<el-pagination
|
||||
v-if="pageModel.total > pageModel.limit"
|
||||
small
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="pageModel.pageIndex"
|
||||
:page-size="pageModel.limit"
|
||||
layout="prev, pager,next,total"
|
||||
:total="pageModel.total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-select>
|
||||
</template>
|
||||
<template v-else
|
||||
>
|
||||
<div v-loading="selLoading">{{ showValue }}</div>
|
||||
</template
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep .el-select-dropdown__wrap {
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.w-100 {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.drop > > > .el-input__inner {
|
||||
background: #5183ff !important;
|
||||
color: white;
|
||||
border: none;
|
||||
height: 26px;
|
||||
padding: 10px 22px 10px 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.drop {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.drop > > > .el-select .el-input .el-select__caret {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
import debounce from "lodash/debounce";
|
||||
import {getUserModuleApi} from "@/api/integrationOption/integrationOption.js";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
searchKey: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
ruleForm: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
// 是否禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
placeholder: String,
|
||||
value: {
|
||||
type: [String, Number],
|
||||
},
|
||||
itemObj: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
lookflag: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
idKey: {
|
||||
type: [Number, String],
|
||||
default: 0,
|
||||
},
|
||||
journalingType: {
|
||||
type: [String, Number],
|
||||
default: "subject",
|
||||
},
|
||||
apiInfo: {
|
||||
type: Object,
|
||||
},
|
||||
searchApiInfo: {
|
||||
type: Object,
|
||||
},
|
||||
prop: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
label: "names",
|
||||
id: "codes",
|
||||
};
|
||||
},
|
||||
},
|
||||
foucus: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
apiBody: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pageModel: {
|
||||
total: 0,
|
||||
pageIndex: 1,
|
||||
limit: 10,
|
||||
},
|
||||
selLoading: false,
|
||||
showValue: "",
|
||||
lookLoading: false,
|
||||
options: [],
|
||||
tempObj: {},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
selectValue: {
|
||||
get() {
|
||||
return this.value;
|
||||
},
|
||||
set(val) {
|
||||
this.$emit("input", val);
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (this.value) {
|
||||
this.searchKeyHandle()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
async searchKeyHandle() {
|
||||
const res = await getUserModuleApi({
|
||||
tl: "sysApplicationService",
|
||||
as: "application",
|
||||
dj: "getApp"
|
||||
}, {id: this.value})
|
||||
if (res.attribute) {
|
||||
this.options.push({...res.attribute})
|
||||
}
|
||||
|
||||
},
|
||||
// 页码改变事件
|
||||
handleCurrentChange(val) {
|
||||
this.pageModel.pageIndex = val;
|
||||
this.getUserModuleHandle();
|
||||
},
|
||||
// select选中更改事件
|
||||
fun(val) {
|
||||
let tempObj = this.options.find(item => {
|
||||
if (val === item.id) {
|
||||
return item
|
||||
}
|
||||
})
|
||||
this.$emit(`onSelect`, val, tempObj);
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$emit("blur");
|
||||
});
|
||||
},
|
||||
searchShowValue(val) {
|
||||
this.options.forEach((item) => {
|
||||
if (item.codes == val) {
|
||||
this.showValue = item.names;
|
||||
this.$nextTick(() => {
|
||||
this.$emit("showValue", this.showValue, this.itemObj, this.idKey);
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 获得焦点
|
||||
funx() {
|
||||
if (this.foucus) {
|
||||
this.getUserModuleHandle();
|
||||
}
|
||||
},
|
||||
clearOptions() {
|
||||
if (this.options.length) {
|
||||
this.pageModel.pageIndex = 1;
|
||||
this.options = [];
|
||||
this.tempObj = null;
|
||||
}
|
||||
},
|
||||
// 失去焦点
|
||||
funb() {
|
||||
// this.$nextTick(() => {
|
||||
// this.$emit("blur");
|
||||
// });
|
||||
},
|
||||
hidden(val) {
|
||||
if (!val) {
|
||||
this.$nextTick(() => {
|
||||
this.$emit("blur");
|
||||
});
|
||||
}
|
||||
},
|
||||
//搜索方法,将符合的数据存入options中，并分页展示
|
||||
filter: debounce(function (val) {
|
||||
this.pageModel.pageIndex = 1;
|
||||
this.getUserModuleHandle(val);
|
||||
}, 300),
|
||||
focus() {
|
||||
this.$refs.mySelect.focus();
|
||||
},
|
||||
async getUserModuleHandle(val = null, obj = null) {
|
||||
const res = await getUserModuleApi({
|
||||
tl: "sysApplicationService",
|
||||
as: "application",
|
||||
dj: "queryApp"
|
||||
}, {
|
||||
pageNum: this.pageModel.pageIndex,
|
||||
pageSize: this.pageModel.limit,
|
||||
name: val,
|
||||
})
|
||||
console.log(res, 'newselect')
|
||||
this.pageModel.total = res.attribute.total;
|
||||
this.options = res.attribute.list
|
||||
},
|
||||
async searchCodes(codes) {
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
},
|
||||
//监听来自父组件的数据，当数据更新时，重置展示
|
||||
watch: {
|
||||
// value(newv, oldv) {
|
||||
// if (this.lookflag) {
|
||||
// this.searchCodes(this.value);
|
||||
// }
|
||||
// if (!oldv && newv) {
|
||||
// this.searchCodes(this.value);
|
||||
// }
|
||||
// },
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,212 @@
|
|||
<!--
|
||||
* @name: 自定义级联选择器
|
||||
* @author: zhangpengcheng
|
||||
* @date: 2022-08-19
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<template v-if="!lookflag">
|
||||
<el-cascader
|
||||
v-loading="selLoading"
|
||||
style="width: 100%"
|
||||
v-model="selectValue"
|
||||
ref="elCascader"
|
||||
:clearable="clearable"
|
||||
:show-all-levels="showAllLevels"
|
||||
:options="options"
|
||||
@change="change"
|
||||
@focus="focus"
|
||||
:props="selectprops"
|
||||
:disabled="disabled"
|
||||
></el-cascader>
|
||||
</template>
|
||||
<template v-else="!lookflag">
|
||||
<div>
|
||||
{{ showValue }}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getUserModuleApi } from "@/api/integrationOption/integrationOption.js";
|
||||
// import { areaGroupby } from "@/api/apis/auth.js";
|
||||
export default {
|
||||
name: "customCascader",
|
||||
components: {},
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
},
|
||||
// 字段
|
||||
field: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
// 类型 1 组织或网格 2 场所类型
|
||||
type: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
// 输入框中是否显示选中值的完整路径
|
||||
showAllLevels: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 是否支持清空选项
|
||||
clearable: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
// 是否禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 清除状态
|
||||
clearState: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
// 清除状态
|
||||
modelData: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
itemObj: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
ruleForm: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
lookflag: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectprops: {
|
||||
label: this.itemObj.label,
|
||||
value: this.itemObj.value,
|
||||
expandTrigger: "hover",
|
||||
checkStrictly: true,
|
||||
},
|
||||
options: [],
|
||||
showValue: "",
|
||||
selLoading: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
if (Object.keys(this.ruleForm).length && this.ruleForm[this.itemObj.id]) {
|
||||
this.getSelectdata(this.ruleForm[this.itemObj.id]);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.areaGroupby();
|
||||
},
|
||||
watch: {
|
||||
// 监听数字变动，就重置
|
||||
// clearState() {
|
||||
// this.model = [];
|
||||
// },
|
||||
},
|
||||
computed: {
|
||||
selectValue: {
|
||||
get() {
|
||||
return [this.value];
|
||||
},
|
||||
set(val) {
|
||||
this.$emit("input", val[val.length - 1]);
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// id找值
|
||||
filterid(id, arr) {
|
||||
let result = arr.find((item) => {
|
||||
if (item.id === id) {
|
||||
return item;
|
||||
} else if (item.children) {
|
||||
return this.filterid(id, item.children);
|
||||
}
|
||||
});
|
||||
if (result) {
|
||||
this.options.push(result);
|
||||
this.showValue = result[this.itemObj.label];
|
||||
}
|
||||
},
|
||||
// 根据id找值
|
||||
async getSelectdata(id) {
|
||||
this.selLoading = true;
|
||||
const res = await getUserModuleApi(
|
||||
{
|
||||
tl: "optionService",
|
||||
as: "sys_template",
|
||||
dj: "queryTemplateTreeData",
|
||||
},
|
||||
{
|
||||
service: this.itemObj.service,
|
||||
upId: this.itemObj.upId,
|
||||
id: id,
|
||||
label: this.itemObj.label,
|
||||
value: this.itemObj.value,
|
||||
}
|
||||
);
|
||||
if (res.status == 200) {
|
||||
this.filterid(id, res.attribute);
|
||||
// this.options = res.attribute;
|
||||
// this.showValue = res.attribute[0][this.itemObj.label];
|
||||
this.selLoading = false;
|
||||
}
|
||||
},
|
||||
// 查询表
|
||||
async getTreeSelect(obj = {}) {
|
||||
const res = await getUserModuleApi(
|
||||
{
|
||||
tl: "optionService",
|
||||
as: "sys_template",
|
||||
dj: "queryTemplateTreeData",
|
||||
},
|
||||
{
|
||||
service: this.itemObj.service,
|
||||
value: this.itemObj.value,
|
||||
label: this.itemObj.label,
|
||||
upId: this.itemObj.upId,
|
||||
...obj,
|
||||
}
|
||||
);
|
||||
this.options = res.attribute;
|
||||
},
|
||||
// 回显数据
|
||||
setEchoData(model) {
|
||||
this.model = model;
|
||||
},
|
||||
// 级联选择器更改值
|
||||
change() {},
|
||||
// 查询函数
|
||||
areaGroupby() {
|
||||
// areaGroupby().then(res=>{
|
||||
// let {code ,data} = res;
|
||||
// if(code === 10000){
|
||||
// let newData = [data]
|
||||
// this.options = newData
|
||||
// }
|
||||
// })
|
||||
},
|
||||
focus() {
|
||||
this.getTreeSelect();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang='scss'>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,149 @@
|
|||
<template>
|
||||
<el-date-picker
|
||||
v-model="dateData"
|
||||
:type="datePickerType"
|
||||
align="left"
|
||||
unlink-panels
|
||||
range-separator="至"
|
||||
start-placeholder="开始月份"
|
||||
end-placeholder="结束月份"
|
||||
value-format="yyyy-MM-dd"
|
||||
:disabled="disabled"
|
||||
:picker-options="
|
||||
datePickerType === 'date' ? DatePickerOptions : datedateRangePickerOptions
|
||||
"
|
||||
>
|
||||
</el-date-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
datePickerType: {
|
||||
type: String,
|
||||
default: "date",
|
||||
},
|
||||
itemObj: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
value: {},
|
||||
row: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
test: "2023-07-23",
|
||||
};
|
||||
},
|
||||
},
|
||||
low: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
up: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
datedateRangePickerOptions: {
|
||||
shortcuts: [
|
||||
{
|
||||
text: "最近一周",
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit("pick", [start, end]);
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "最近一个月",
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
picker.$emit("pick", [start, end]);
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "最近三个月",
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
picker.$emit("pick", [start, end]);
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
dateData: {
|
||||
get() {
|
||||
return this.value;
|
||||
},
|
||||
set(val) {
|
||||
this.$emit("input", val);
|
||||
},
|
||||
},
|
||||
DatePickerOptions() {
|
||||
return {
|
||||
disabledDate: (time) => {
|
||||
if (this.low && this.row[this.low]) {
|
||||
// 入职时间选择后，禁用入职时间前的时间
|
||||
if (this.row[this.low].includes("T")) {
|
||||
return time.getTime() < new Date(this.row[this.low]);
|
||||
} else {
|
||||
return (
|
||||
time.getTime() < new Date(this.row[this.low] + "T00:00:00")
|
||||
);
|
||||
}
|
||||
}
|
||||
if (this.up && this.row[this.up]) {
|
||||
// 离职时间选择后，禁用离职时间后的时间
|
||||
if (this.row[this.up].includes("T")) {
|
||||
return time.getTime() > new Date(this.row[this.up]);
|
||||
} else {
|
||||
return time.getTime() > new Date(this.row[this.up] + "T00:00:00");
|
||||
}
|
||||
}
|
||||
},
|
||||
shortcuts: [
|
||||
{
|
||||
text: "今天",
|
||||
onClick(picker) {
|
||||
picker.$emit("pick", new Date());
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "昨天",
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||
picker.$emit("pick", date);
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "一周前",
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit("pick", date);
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
},
|
||||
watch: {},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<template>
|
||||
<div class="block">
|
||||
<el-date-picker
|
||||
v-model="value"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
align="right"
|
||||
:picker-options="pickerOptions"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions: {
|
||||
shortcuts: [
|
||||
{
|
||||
text: "今天",
|
||||
onClick(picker) {
|
||||
picker.$emit("pick", new Date());
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "昨天",
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||
picker.$emit("pick", date);
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "一周前",
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit("pick", date);
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
value: "",
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
class="base-dialog"
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
:width="width"
|
||||
:fullscreen="false"
|
||||
append-to-body
|
||||
top="5vh"
|
||||
:close-on-click-modal="false"
|
||||
@open="$emit('open')"
|
||||
@close="$emit('close')"
|
||||
>
|
||||
<slot></slot>
|
||||
<span slot="footer" class="dialog-footer" v-if="footerShow">
|
||||
<el-button @click="closeHandle">取 消</el-button>
|
||||
<el-button v-if="resetting">重 置</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
v-if="!lookFlag"
|
||||
:loading="loading"
|
||||
@click="handleConfirmClick"
|
||||
>提 交</el-button
|
||||
>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
fullscreen: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
value: Boolean,
|
||||
title: String,
|
||||
lookFlag: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
resetting: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
footerShow: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: "80%",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
dialogVisible: {
|
||||
get() {
|
||||
return this.value;
|
||||
},
|
||||
set(val) {
|
||||
this.$emit("input", val);
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
closeHandle() {
|
||||
this.dialogVisible = false;
|
||||
return
|
||||
this.$confirm("是否关闭表单?", "提示", {
|
||||
confirmButtonText: "关闭",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
this.dialogVisible = false;
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
handleConfirmClick() {
|
||||
this.$emit("confirm");
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
console.log(11);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.base-dialog >>> .el-dialog__body {
|
||||
max-height: 80vh;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
// 表格
|
||||
<template>
|
||||
<el-form ref="form" :model="form" :inline="true">
|
||||
<el-row
|
||||
:gutter="0"
|
||||
v-for="(row, index) in list"
|
||||
:key="index"
|
||||
style="margin-bottom: 0px"
|
||||
label-width="100px"
|
||||
label-position="top"
|
||||
>
|
||||
<el-col
|
||||
v-for="(item, indexRow) in row.elCol"
|
||||
:span="item.span ? item.span : 6"
|
||||
:key="indexRow"
|
||||
>
|
||||
<base-form-item :key="item.id">
|
||||
<!-- 输入框 输入数据绑定item.value -->
|
||||
<span>{{ item.title }}</span>
|
||||
<template v-if="item.type === 'input'">
|
||||
<el-input
|
||||
:rows="2"
|
||||
clearable
|
||||
v-model="item.value"
|
||||
:placeholder="item.placeholder"
|
||||
:maxlength="item.maxlength ? item.maxlength * 1 : ''"
|
||||
></el-input>
|
||||
</template>
|
||||
<!-- 下拉框 输入数据绑定item.value-->
|
||||
<template v-else-if="item.type === 'select'">
|
||||
<BaseSelect :itemObj="item"></BaseSelect>
|
||||
</template>
|
||||
<!-- 单选框 输入数据绑定item.value -->
|
||||
<template v-else-if="item.type === 'radio'">
|
||||
<BaseRabio :itemObj="item"></BaseRabio>
|
||||
</template>
|
||||
<!-- 日期选择 -->
|
||||
<template v-else-if="item.type === 'datepick'">
|
||||
<BaseDatePick :itemObj="item"></BaseDatePick>
|
||||
</template>
|
||||
<!-- treeselect -->
|
||||
<template v-else-if="item.type === 'treeselect'">
|
||||
<treeselect
|
||||
v-model="item.value"
|
||||
:normalizer="item.normalizer"
|
||||
:options="delTreeChildren(item.options)"
|
||||
:multiple="item.multiple ? row.multiple : false"
|
||||
:disabled="item.disabled && !newFlag ? item.disabled : false"
|
||||
@clear="treeSelectClear"
|
||||
ref="selectTree"
|
||||
:placeholder="!item.placeholder ? '请选择' : item.placeholder"
|
||||
@select="selectTree"
|
||||
/>
|
||||
</template>
|
||||
</base-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseDatePick from "./baseDatePicker.vue";
|
||||
import BaseRabio from "./baseRadio.vue";
|
||||
import BaseFormItem from "./baseFormItem.vue";
|
||||
import BaseSelect from "./baseSelect";
|
||||
export default {
|
||||
props: {
|
||||
// 列表
|
||||
list: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
selectTree(node, instanceId) {
|
||||
this.$emit("selectTree", node);
|
||||
},
|
||||
treeSelectClear() {
|
||||
this.$refs.selectTree.clear();
|
||||
},
|
||||
},
|
||||
created() {
|
||||
console.log(this.list);
|
||||
},
|
||||
components: {
|
||||
BaseFormItem,
|
||||
BaseSelect,
|
||||
BaseRabio,
|
||||
BaseDatePick,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang='scss'>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<el-form-item :label="label" class="formitem" :style="`display: flex;`">
|
||||
<slot></slot>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.formitem {
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,554 @@
|
|||
<template>
|
||||
<div class="link" ref="link">
|
||||
<div class="left">
|
||||
<div class="title">
|
||||
<h1>执行动作入参数</h1>
|
||||
</div>
|
||||
<template v-for="(item, index) in leftData">
|
||||
<div class="treebox">
|
||||
<div class="tree" :key="index">
|
||||
<span>{{ item.label }}</span>
|
||||
<span style="font-size: 12px; color: gray; padding-left: 10px">{{
|
||||
item.type
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<el-checkbox-button
|
||||
v-model="item.value"
|
||||
@change="(val, $event) => leftCheckBoxHandle(val, item, $event)"
|
||||
>+</el-checkbox-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="item.children">
|
||||
<template v-for="(item01, index01) in item.children">
|
||||
<div class="treebox">
|
||||
<div class="tree" style="margin-left: 15px">
|
||||
<span>{{ item01.label }}</span>
|
||||
<span
|
||||
style="font-size: 12px; color: gray; padding-left: 10px"
|
||||
>{{ item01.type }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<el-checkbox-button
|
||||
v-model="item01.value"
|
||||
@change="
|
||||
(val, $event) => leftCheckBoxHandle(val, item01, $event)
|
||||
"
|
||||
>+</el-checkbox-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="item01.children">
|
||||
<template v-for="(item02, index02) in item01.children">
|
||||
<div class="treebox">
|
||||
<div class="tree" style="margin-left: 30px">
|
||||
<span>{{ item02.label }}</span>
|
||||
<span
|
||||
style="font-size: 12px; color: gray; padding-left: 10px"
|
||||
>{{ item02.type }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<el-checkbox-button
|
||||
v-model="item02.value"
|
||||
@change="
|
||||
(val, $event) => leftCheckBoxHandle(val, item02, $event)
|
||||
"
|
||||
>+</el-checkbox-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="item02.children">
|
||||
<template v-for="(item03, index03) in item02.children">
|
||||
<div class="treebox">
|
||||
<div class="tree" style="margin-left: 30px">
|
||||
<span>{{ item03.label }}</span>
|
||||
<span
|
||||
style="
|
||||
font-size: 12px;
|
||||
color: gray;
|
||||
padding-left: 10px;
|
||||
"
|
||||
>{{ item03.type }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<el-checkbox-button
|
||||
v-model="item03.value"
|
||||
@change="
|
||||
(val, $event) =>
|
||||
leftCheckBoxHandle(val, item03, $event)
|
||||
"
|
||||
>+</el-checkbox-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
<div class="svg" :style="{ height: svgHeight }">
|
||||
<svg
|
||||
ref="svg"
|
||||
class="line"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
:style="{ height: svgHeight }"
|
||||
style="position: absolute; z-index: 2; width: 300px"
|
||||
version="1.1"
|
||||
>
|
||||
<line
|
||||
v-for="item in line"
|
||||
:key="item.leftid"
|
||||
:x1="item.x1"
|
||||
:y1="item.y1"
|
||||
:x2="item.x2"
|
||||
:y2="item.y2"
|
||||
style="stroke: blue; stroke-width: 1; z-index: 999"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="title">
|
||||
<h1>API入参</h1>
|
||||
</div>
|
||||
<template v-for="(item, index) in rightData">
|
||||
<div class="treebox">
|
||||
<div class="btn">
|
||||
<el-checkbox-button
|
||||
size="mini"
|
||||
class="layers-item-selector"
|
||||
v-model="item.value"
|
||||
@change="(val, $event) => rightCheckBoxHandle(val, item, $event)"
|
||||
>+</el-checkbox-button
|
||||
>
|
||||
</div>
|
||||
<div class="tree" :key="index">
|
||||
<span>{{ item.label }}</span>
|
||||
<span style="font-size: 12px; color: gray; padding-left: 10px">{{
|
||||
item.type
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="item.children">
|
||||
<template v-for="(item01, index01) in item.children">
|
||||
<div class="treebox">
|
||||
<div class="btn">
|
||||
<el-checkbox-button
|
||||
v-model="item01.value"
|
||||
@change="
|
||||
(val, $event) => rightCheckBoxHandle(val, item01, $event)
|
||||
"
|
||||
>+</el-checkbox-button
|
||||
>
|
||||
</div>
|
||||
<div class="tree" style="margin-left: 15px">
|
||||
<span>{{ item01.label }}</span>
|
||||
<span
|
||||
style="font-size: 12px; color: gray; padding-left: 10px"
|
||||
>{{ item01.type }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="item01.children">
|
||||
<template v-for="(item02, index02) in item01.children">
|
||||
<div class="treebox">
|
||||
<div class="btn">
|
||||
<el-checkbox-button
|
||||
v-model="item02.value"
|
||||
@change="
|
||||
(val, $event) =>
|
||||
rightCheckBoxHandle(val, item02, $event)
|
||||
"
|
||||
>+</el-checkbox-button
|
||||
>
|
||||
</div>
|
||||
<div class="tree" style="margin-left: 30px">
|
||||
<span>{{ item02.label }}</span>
|
||||
<span
|
||||
style="font-size: 12px; color: gray; padding-left: 10px"
|
||||
>{{ item02.type }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
leftData: [
|
||||
{
|
||||
label: "一级 1",
|
||||
id: 1,
|
||||
type: "Object",
|
||||
children: [
|
||||
{
|
||||
label: "二级 1-1",
|
||||
id: 2,
|
||||
type: "Object",
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: "三级 1-1-1",
|
||||
type: "string",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "一级 2",
|
||||
type: "Object",
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: "二级 2-1",
|
||||
type: "Object",
|
||||
children: [
|
||||
{
|
||||
id: 6,
|
||||
label: "三级 2-1-1",
|
||||
type: "String",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
label: "二级 2-2",
|
||||
type: "Object",
|
||||
children: [
|
||||
{
|
||||
id: 8,
|
||||
label: "三级 2-2-1",
|
||||
type: "String",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
label: "一级 3",
|
||||
type: "Object",
|
||||
children: [
|
||||
{
|
||||
id: 10,
|
||||
label: "二级 3-1",
|
||||
type: "Object",
|
||||
children: [
|
||||
{
|
||||
id: 11,
|
||||
label: "三级 3-1-1",
|
||||
type: "Object",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
label: "二级 3-2",
|
||||
type: "Object",
|
||||
children: [
|
||||
{
|
||||
id: 13,
|
||||
label: "三级 3-2-1",
|
||||
type: "Object",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
rightData: [
|
||||
{
|
||||
label: "一级 1",
|
||||
id: 1,
|
||||
type: "Object",
|
||||
children: [
|
||||
{
|
||||
label: "二级 1-1",
|
||||
id: 2,
|
||||
type: "Object",
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: "三级 1-1-1",
|
||||
type: "string",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "一级 2",
|
||||
type: "Object",
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: "二级 2-1",
|
||||
type: "Object",
|
||||
children: [
|
||||
{
|
||||
id: 6,
|
||||
label: "三级 2-1-1",
|
||||
type: "String",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
label: "二级 2-2",
|
||||
type: "Object",
|
||||
children: [
|
||||
{
|
||||
id: 8,
|
||||
label: "三级 2-2-1",
|
||||
type: "String",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
label: "一级 3",
|
||||
type: "Object",
|
||||
children: [
|
||||
{
|
||||
id: 10,
|
||||
label: "二级 3-1",
|
||||
type: "Object",
|
||||
children: [
|
||||
{
|
||||
id: 11,
|
||||
label: "三级 3-1-1",
|
||||
type: "Object",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
label: "二级 3-2",
|
||||
type: "Object",
|
||||
children: [
|
||||
{
|
||||
id: 13,
|
||||
label: "三级 3-2-1",
|
||||
type: "Object",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
leftActive: {},
|
||||
rightActive: {},
|
||||
line: [],
|
||||
leftActiveItem: {},
|
||||
rightActiveItem: {},
|
||||
svgHeight: 0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
leftCheckBoxHandle(val, item, e) {
|
||||
// console.log(val, item.id, e);
|
||||
if (val) {
|
||||
let svginfo = this.$refs.svg.getBoundingClientRect();
|
||||
let info = e.target.getBoundingClientRect();
|
||||
this.leftActiveItem = item;
|
||||
this.leftActive["leftid"] = item.id;
|
||||
this.leftActive["x1"] = svginfo.x - info.x - 25;
|
||||
this.leftActive["y1"] = info.y - svginfo.y + 10;
|
||||
|
||||
if (this.leftActive.leftid && this.rightActive.rightid) {
|
||||
// let obj = {};
|
||||
// obj["yOffset"] =
|
||||
// Math.abs(this.rightActive["y2"] - this.leftActive["y1"]) / 2;
|
||||
// obj["centerY "] =
|
||||
// this.rightActive["y2"] < this.leftActive["y1"]
|
||||
// ? this.rightActive["y2"] + obj["yOffset"]
|
||||
// : this.rightActive["y2"] - obj["yOffset"];
|
||||
// obj["xOffset"] =
|
||||
// Math.abs(this.rightActive["x2"] - this.leftActive["x1"]) / 2;
|
||||
// obj["centerX"] =
|
||||
// this.rightActive["x2"] < this.leftActive["x1"]
|
||||
// ? this.rightActive["x2"] + obj["xOffset"]
|
||||
// : this.rightActive["x2"] - obj["xOffset"];
|
||||
this.line.push({ ...this.leftActive, ...this.rightActive });
|
||||
this.$set(this.leftActiveItem, "isline", true);
|
||||
this.$set(this.rightActiveItem, "leftid", this.leftActiveItem.id);
|
||||
this.$set(this.leftActiveItem, "rightid", this.rightActiveItem.id);
|
||||
this.$set(this.rightActiveItem, "isline", true);
|
||||
this.leftActive = {};
|
||||
this.rightActive = {};
|
||||
}
|
||||
this.deepSearchBox(this.leftData, item.id);
|
||||
} else {
|
||||
if (item.isline) {
|
||||
console.log(item);
|
||||
this.line = this.line.filter((ele) => {
|
||||
return ele.leftid != item.id;
|
||||
});
|
||||
this.cloaseBox(this.rightData, item.rightid);
|
||||
item.isline = false;
|
||||
} else {
|
||||
this.leftActive = {};
|
||||
this.leftActiveItem = {};
|
||||
}
|
||||
}
|
||||
},
|
||||
rightCheckBoxHandle(val, item, e) {
|
||||
// console.log(val, item.id, e);
|
||||
if (val) {
|
||||
let svginfo = this.$refs.svg.getBoundingClientRect();
|
||||
let info = e.target.getBoundingClientRect();
|
||||
this.rightActiveItem = item;
|
||||
this.rightActive["rightid"] = item.id;
|
||||
this.rightActive["x2"] = info.x - svginfo.x;
|
||||
this.rightActive["y2"] = info.y - svginfo.y + 10;
|
||||
if (this.leftActive.leftid && this.rightActive.rightid) {
|
||||
this.line.push({ ...this.leftActive, ...this.rightActive });
|
||||
this.$set(this.leftActiveItem, "isline", true);
|
||||
this.$set(this.leftActiveItem, "rightid", this.rightActiveItem.id);
|
||||
this.$set(this.rightActiveItem, "leftid", this.leftActiveItem.id);
|
||||
this.$set(this.rightActiveItem, "isline", true);
|
||||
item["isline"] = true;
|
||||
this.leftActive = {};
|
||||
this.rightActive = {};
|
||||
}
|
||||
this.deepSearchBox(this.rightData, item.id);
|
||||
} else {
|
||||
if (item.isline) {
|
||||
console.log(item);
|
||||
this.line = this.line.filter((ele) => {
|
||||
return ele.rightid != item.id;
|
||||
});
|
||||
this.cloaseBox(this.leftData, item.leftid);
|
||||
item.isline = false;
|
||||
} else {
|
||||
this.rightActive = {};
|
||||
this.rightActiveItem = {};
|
||||
}
|
||||
}
|
||||
},
|
||||
deepSearchBox(arr, id) {
|
||||
arr.forEach((item) => {
|
||||
if (item.id != id && item.value && !item.isline) {
|
||||
item.value = false;
|
||||
}
|
||||
if (item.children && item.children.length) {
|
||||
this.deepSearchBox(item.children, id);
|
||||
}
|
||||
});
|
||||
},
|
||||
cloaseBox(arr, id) {
|
||||
arr.some((item) => {
|
||||
if (item.id == id) {
|
||||
item.value = false;
|
||||
item.isline = false;
|
||||
return true;
|
||||
} else if (item.children && item.children.length) {
|
||||
this.cloaseBox(item.children, id);
|
||||
}
|
||||
});
|
||||
},
|
||||
handleNodeClick(data) {
|
||||
console.log(data);
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.custom-tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
min-width: 700px;
|
||||
}
|
||||
.link {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
height: auto;
|
||||
.left {
|
||||
width: 300px;
|
||||
.title {
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.treebox {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.btn {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 300px;
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.treebox {
|
||||
align-items: center;
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
.btn {
|
||||
margin-right: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.svg {
|
||||
width: 300px;
|
||||
}
|
||||
svg {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.el-checkbox-button__inner {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 15px;
|
||||
background-color: #ffffff;
|
||||
border: solid 1px #cccccc;
|
||||
border-radius: 50% !important;
|
||||
font-size: 12px !important;
|
||||
cursor: pointer;
|
||||
padding: 0 !important;
|
||||
z-index: 3;
|
||||
}
|
||||
.layers-item-selector .is-checked {
|
||||
background-color: skyblue !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,463 @@
|
|||
<!--
|
||||
* @name: 弹窗配置
|
||||
* @author: zhangpengcheng
|
||||
* @date: 2022-08-25
|
||||
-->
|
||||
<template>
|
||||
<!-- 权限设置弹框 -->
|
||||
<!-- :style="{'margin':isCenter?'auto':''}"> -->
|
||||
<div style="padding: 16px; height: 100%">
|
||||
<div flex="cross:center" v-if="filterShow" style="margin-bottom: 5px">
|
||||
<el-input
|
||||
placeholder="输入关键字进行过滤"
|
||||
v-model="filterText"
|
||||
style="margin-right: 13px"
|
||||
></el-input>
|
||||
<el-button
|
||||
icon="el-icon-plus"
|
||||
style="height: 32px; line-height: 32px; padding: 0 13px !important"
|
||||
@click="add"
|
||||
v-if="filterButtonShow"
|
||||
>
|
||||
</el-button>
|
||||
</div>
|
||||
<div
|
||||
flex="dir:top cross:center main:center"
|
||||
style="margin: auto; height: calc(100% - 22px); overflow: auto"
|
||||
class="treeBodyHeight"
|
||||
>
|
||||
<div class="menu-i" flex="cross:center main:center">
|
||||
<div class="menu-i-t" flex="cross:top main:justify">
|
||||
<el-tree
|
||||
:data="menuData"
|
||||
:check-strictly="true"
|
||||
:default-checked-keys="selectData"
|
||||
v-loading="treeLoading"
|
||||
@node-click="handleNodeClick"
|
||||
:expand-on-click-node="false"
|
||||
:default-expand-all="expandAll"
|
||||
:filter-node-method="filterNode"
|
||||
:props="treeProps"
|
||||
style="width: 100%; background-color: transparent"
|
||||
@check-change="checkChange"
|
||||
node-key="id"
|
||||
ref="elTree"
|
||||
:show-checkbox="showCheckbox"
|
||||
>
|
||||
<div
|
||||
flex="cross:center main:justify"
|
||||
style="width: calc(100% - 31px)"
|
||||
slot-scope="{ node, data }"
|
||||
>
|
||||
<p
|
||||
class="nowrap"
|
||||
style="
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
"
|
||||
@dblclick="dbTree(node, data)"
|
||||
>
|
||||
{{ nodeLabel == "" ? node.label : node.label[nodeLabel] }}
|
||||
</p>
|
||||
<div style="width: 60px" v-if="treeButton">
|
||||
<el-button
|
||||
type="text"
|
||||
size="mini"
|
||||
icon="el-icon-plus"
|
||||
v-if="appendButton"
|
||||
@click.stop="() => append(node, data)"
|
||||
>
|
||||
</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
v-if="reviseButton"
|
||||
@click.stop="() => revise(node, data)"
|
||||
>
|
||||
</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
size="mini"
|
||||
icon="el-icon-delete"
|
||||
v-if="removeButton"
|
||||
@click.stop="() => remove(node, data)"
|
||||
>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-tree>
|
||||
<div @click="changePcAll" class="checkText" v-if="Allshow">全选</div>
|
||||
</div>
|
||||
</div>
|
||||
<div flex="cross:center main:center" style="width: 100%" v-if="isSaveBtn">
|
||||
<el-button style="width: 40%" type="primary" @click="saveMenuUser"
|
||||
>保存</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// import { queryMenuList, menuListSave } from '@/api/apis/auth'
|
||||
export default {
|
||||
props: {
|
||||
// 是否默认展开所有节点
|
||||
expandAll: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
// 操作按钮
|
||||
treeButton: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 操作按钮
|
||||
filterButtonShow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 是否显示保存按钮
|
||||
isSaveBtn: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 是否显示全选按钮
|
||||
Allshow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 是否显示多选按钮
|
||||
showCheckbox: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 是否居中
|
||||
isCenter: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
// 是否显示筛选
|
||||
filterShow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
menuData: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
setting: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
treeLoading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
appendButton: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
reviseButton: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
removeButton: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
nodeLabel: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
treeProps: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
children: "children",
|
||||
label: "label",
|
||||
};
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
defaultTheme: {
|
||||
handler: function (val, oldVal) {
|
||||
this.theme = val;
|
||||
// document.getElementsByTagName('body')[0].style.setProperty('--active', val)
|
||||
|
||||
// let arr = document.getElementsByClassName('.el-tree-node:focus>.el-tree-node__content')
|
||||
// $('.el-tree-node:focus>.el-tree-node__content').css('color',val)
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
filterText(val) {
|
||||
this.$refs.elTree.filter(val);
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
filterText: "",
|
||||
theme: "",
|
||||
powerDlog: false,
|
||||
// 回显选中ids
|
||||
selectData: [],
|
||||
// 树状图设置
|
||||
// treeProps: {
|
||||
// label: 'menuName',
|
||||
// children: 'id',
|
||||
// },
|
||||
// treeProps: {
|
||||
// children: 'children',
|
||||
// label: 'label'
|
||||
// },
|
||||
|
||||
// PC菜单全选
|
||||
checkedAllPc: false,
|
||||
// 防连点
|
||||
outing: false,
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
computed: {
|
||||
defaultTheme() {
|
||||
return this.$store.state.settings.theme;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
clickFirst() {
|
||||
document.querySelectorAll(".is-focusable")[0].click();
|
||||
},
|
||||
setCurrentKey(selectId) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.elTree.setCurrentKey(selectId);
|
||||
});
|
||||
},
|
||||
dbTree(node, data) {
|
||||
this.setCurrentKey(null);
|
||||
},
|
||||
// 添加
|
||||
append(node, data) {
|
||||
this.$emit("append", data);
|
||||
},
|
||||
// 编辑
|
||||
revise(node, data) {
|
||||
this.$emit("revise", data);
|
||||
},
|
||||
// 删除
|
||||
remove(node, data) {
|
||||
this.$emit("remove", data);
|
||||
},
|
||||
add() {
|
||||
this.$emit("add");
|
||||
},
|
||||
filterNode(value, data, node) {
|
||||
if (!value) return true;
|
||||
let nodeData =
|
||||
this.nodeLabel == ""
|
||||
? data[this.treeProps.label]
|
||||
: data[this.treeProps.label][this.nodeLabel];
|
||||
return nodeData.indexOf(value) !== -1;
|
||||
},
|
||||
buttonL(el) {
|
||||
el.active = !el.active;
|
||||
this.$forceUpdate();
|
||||
},
|
||||
setData(id) {
|
||||
this.selectData.push(id);
|
||||
},
|
||||
saveMenuUser() {
|
||||
let allKeys = this.getKey();
|
||||
this.$emit("onSaveMenu", allKeys);
|
||||
},
|
||||
// 获取选中的key值
|
||||
getKey() {
|
||||
return this.$refs.elTree.getCheckedKeys();
|
||||
},
|
||||
// 初始数据
|
||||
initData() {
|
||||
// 菜单数据
|
||||
// this.menuData = [];
|
||||
|
||||
// 回显选中ids
|
||||
this.selectData = [];
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.powerDlog = false;
|
||||
this.initData();
|
||||
},
|
||||
// 全选、反选
|
||||
changePcAll() {
|
||||
this.checkedAllPc = !this.checkedAllPc;
|
||||
let selectData = [];
|
||||
if (this.checkedAllPc) {
|
||||
selectData = this.cycleData(this.menuData);
|
||||
}
|
||||
this.selectData = selectData;
|
||||
},
|
||||
/**
|
||||
* @description 递归获取菜单id（树状 多叉树结构）
|
||||
* @author duanyipeng
|
||||
* @createDate 2020/7/31 20:54
|
||||
* @param {Array} outData 需要递归的数组
|
||||
* @param {Boolean} isSelect: false返回所有id,true返回已选择id
|
||||
*/
|
||||
cycleData(outData, isSelect) {
|
||||
let newData = [];
|
||||
|
||||
function cycle(data) {
|
||||
if (!data || data.length == 0) {
|
||||
return false;
|
||||
} else {
|
||||
for (var i = 0, len = data.length; i < len; i++) {
|
||||
let item = data[i];
|
||||
if (isSelect && item.selected == 1) {
|
||||
newData.push(item.id);
|
||||
}
|
||||
if (!isSelect) {
|
||||
newData.push(item.id);
|
||||
}
|
||||
cycle(item.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
cycle(outData);
|
||||
return newData;
|
||||
},
|
||||
getData(childIds) {
|
||||
let newData = [];
|
||||
|
||||
function cycle(data) {
|
||||
data.forEach((el) => {
|
||||
childIds.forEach((item) => {
|
||||
if (el.id == item) {
|
||||
newData.push(el);
|
||||
}
|
||||
});
|
||||
if (el.children != null && el.children && el.children.length) {
|
||||
cycle(el.children, childIds);
|
||||
}
|
||||
});
|
||||
}
|
||||
cycle(this.menuData, childIds);
|
||||
return newData;
|
||||
},
|
||||
/**
|
||||
* @description 节点选中状态发生变化时的回调
|
||||
* @author duanyipeng
|
||||
* @createDate 2020/7/31 20:53
|
||||
* @param { Object } nodeDode 当前节点对象
|
||||
* @param { Boolean } checked 当前节点是否选中
|
||||
*/
|
||||
checkChange(nodeDode, checked) {
|
||||
let getHalfCheckedKeys = this.$refs.elTree
|
||||
.getCheckedKeys()
|
||||
.concat(this.$refs.elTree.getHalfCheckedKeys());
|
||||
// let getHalfCheckedKeys = this.$refs.elTree.getHalfCheckedKeys()
|
||||
let childIds =
|
||||
getHalfCheckedKeys.length != 0 ? getHalfCheckedKeys : this.selectData;
|
||||
let checkdata = this.getData(childIds);
|
||||
this.$emit("checkChange", childIds, checkdata);
|
||||
return;
|
||||
let id = nodeDode.id;
|
||||
// let childIds = this.cycleData(id)
|
||||
// 循环设置子项是否选中
|
||||
childIds.forEach((item) => {
|
||||
this.$refs.elTree.setChecked(item, checked);
|
||||
});
|
||||
},
|
||||
// 点击事件
|
||||
handleNodeClick(data) {
|
||||
this.$emit("handleNodeClick", data);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
// $activeColor:val(--activeColor, "#00aaff");
|
||||
.nowrap {
|
||||
/*让长段文本不换行*/
|
||||
white-space: nowrap;
|
||||
/*设置文本超出元素宽度部分隐藏*/
|
||||
overflow-x: hidden;
|
||||
/*设置文本超出部分用省略号显示*/
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.el-tree-node__content {
|
||||
height: 32px !important;
|
||||
}
|
||||
|
||||
.el-tree-node__label {
|
||||
// font-size: 16px !important;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.el-tree-node__content > label.el-checkbox {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
.el-tree-node__content > .el-tree-node__expand-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.el-checkbox__label {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.checkBox .el-checkbox__inner {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.el-tree-node.is-current > .el-tree-node__content .el-button--text {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.menu-i {
|
||||
width: 100%;
|
||||
// margin-bottom: 24px;
|
||||
height: 100%;
|
||||
|
||||
&-f {
|
||||
color: #52575a;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
&-t {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// height: 450px;
|
||||
// border: 1px solid #d8d8d8;
|
||||
// overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.checkBox {
|
||||
margin-top: 6px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.checkText {
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
color: #ecf5ff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,928 @@
|
|||
<!--
|
||||
* @name: 自定义表单组件
|
||||
* @author: zhangpengcheng
|
||||
* @date: 2022-08-24
|
||||
-->
|
||||
<template>
|
||||
<el-form
|
||||
validate-on-rule-change
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
:label-position="labelPosition"
|
||||
:ref="refName"
|
||||
:label-width="labelWidth"
|
||||
>
|
||||
<el-row
|
||||
:gutter="0"
|
||||
v-for="(item, index) in formRow"
|
||||
:key="index"
|
||||
style="margin-bottom: 10px"
|
||||
>
|
||||
<el-col
|
||||
v-for="(row, indexRow) in item.elCol"
|
||||
:span="row.row ? row.row * 1 : spanNumber"
|
||||
:key="row.id"
|
||||
>
|
||||
<el-form-item
|
||||
:prop="row.id"
|
||||
:style="`display: flex;margin-bottom: ${marginBottom}px;padding:0 10px`"
|
||||
v-if="row.show != false"
|
||||
:class="rules[row.id] ? 'ruleFormClass ' : ''"
|
||||
:rules="
|
||||
formRule
|
||||
? [
|
||||
{
|
||||
required: row.required,
|
||||
message: `${row.title}不能为空`,
|
||||
trigger: row.type === 'input' ? 'change' : 'blur',
|
||||
},
|
||||
...(row.pattern && row.message
|
||||
? [
|
||||
{
|
||||
pattern: row.pattern,
|
||||
message: row.message,
|
||||
trigger: 'blur',
|
||||
},
|
||||
]
|
||||
: []),
|
||||
]
|
||||
: []
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="single label"
|
||||
v-if="row.label || row.title"
|
||||
slot="label"
|
||||
:style="`` + `justify-content: ${justifyContent};`"
|
||||
flex
|
||||
>
|
||||
<span
|
||||
class="label"
|
||||
:style="`font-size:${
|
||||
row.fontSize ? row.fontSize + 'px' : '13px'
|
||||
}`"
|
||||
>
|
||||
<span v-if="row.required" style="color: red">*</span>
|
||||
{{ row.title }}:
|
||||
</span>
|
||||
</div>
|
||||
<template v-if="!lookFlag">
|
||||
<el-checkbox
|
||||
v-model="ruleForm[row.id]"
|
||||
v-if="row.type == 'onecheck'"
|
||||
:disabled="disabled"
|
||||
>是
|
||||
</el-checkbox>
|
||||
<el-input
|
||||
v-model="ruleForm[row.id]"
|
||||
clearable
|
||||
:disabled="disabled || (row.disabledOfId?Boolean(ruleForm.id):row.disabled) "
|
||||
:rows="row.rows ? row.rows : 2"
|
||||
:type="row.type ? row.type : 'text'"
|
||||
:maxlength="row.maxlength ? row.maxlength * 1 : '99'"
|
||||
:placeholder="!row.placeholder ? '请输入' : row.placeholder"
|
||||
v-if="
|
||||
row.tag === 'elInput' || (row.type === 'input' && !lookFlag)
|
||||
"
|
||||
@blur="searchByStationName(row.id,ruleForm)"
|
||||
min="1"
|
||||
@input="row.rules ? integerNumber(row) : ''"
|
||||
@dblclick.native="row.double?dblclick(ruleForm[row.id]):''"
|
||||
@change="$emit('onInput')"
|
||||
>
|
||||
</el-input>
|
||||
<el-input
|
||||
type="number"
|
||||
v-if="row.type === 'num'"
|
||||
v-model="ruleForm[row.id]"
|
||||
style="width: 100%"
|
||||
:disabled="(row.disabled && !newFlag ? row.disabled : false) || disabled"
|
||||
:precision="row.precisionNum ? row.precisionNum : 0"
|
||||
:placeholder="!row.placeholder ? '请输入' : row.placeholder"
|
||||
:step="row.stepNum ? row.stepNum : 1"
|
||||
@change="handleChange"
|
||||
@input="(val) => limitPhoneNum(val, ruleForm, row.id)"
|
||||
:maxlength="row.maxlength ? row.maxlength * 1 : 50"
|
||||
:min="1"
|
||||
:max="row.max ? row.max : 255"
|
||||
:label="!row.placeholder ? '描述文字' : row.placeholder"
|
||||
>
|
||||
<template slot="append" v-if="row.message">{{ row.message }}</template>
|
||||
</el-input
|
||||
>
|
||||
<el-switch
|
||||
v-if="row.type === 'switch' && !lookFlag"
|
||||
v-model="ruleForm[row.id]"
|
||||
:active-text="row.activeText"
|
||||
@change="switchChange($event, index, indexRow, row)"
|
||||
:inactive-text="row.inactiveText"
|
||||
:active-value="row.activeValue ? row.activeValue : true"
|
||||
:inactive-value="
|
||||
row.inactiveValue || row.inactiveValue == 0
|
||||
? row.inactiveValue
|
||||
: false
|
||||
"
|
||||
>
|
||||
</el-switch>
|
||||
<baseDatePicker
|
||||
class="w-100"
|
||||
v-model="ruleForm[row.id]"
|
||||
v-if="
|
||||
row.tag === 'elDatePicker' ||
|
||||
(row.type === 'datepick' && !lookFlag)
|
||||
"
|
||||
:disabled="row.disabled && !newFlag"
|
||||
:datePickerType="formRule ? 'date' : 'daterange'"
|
||||
>
|
||||
</baseDatePicker>
|
||||
<baseDatePicker
|
||||
class="w-100"
|
||||
v-model="ruleForm[row.id]"
|
||||
v-if="row.type === 'datetiempick' && !lookFlag"
|
||||
:disabled="row.disabled && !newFlag"
|
||||
datePickerType="datetime"
|
||||
>
|
||||
</baseDatePicker>
|
||||
<el-radio-group
|
||||
v-model="ruleForm[row.id]"
|
||||
v-if="
|
||||
row.tag === 'elRadio' || (row.type === 'radio' && !lookFlag)
|
||||
"
|
||||
@input="changeRadio($event, index, indexRow, row)"
|
||||
:disabled="row.disabled && !newFlag ? row.disabled : false"
|
||||
>
|
||||
<el-radio v-for="el in row.options" :label="el.id" :key="el.id">{{
|
||||
el.label
|
||||
}}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-if="row.type === 'textrea' && !lookFlag"
|
||||
resize="none"
|
||||
:rows="4"
|
||||
placeholder="请输入内容"
|
||||
show-word-limi
|
||||
v-model="ruleForm[row.id]"
|
||||
:disabled="row.disabled && !newFlag"
|
||||
>
|
||||
</el-input>
|
||||
|
||||
<el-select
|
||||
class="w-100"
|
||||
v-model="ruleForm[row.id]"
|
||||
filterable
|
||||
:multiple="row.multiple"
|
||||
@change="selectChange($event, index, indexRow, row)"
|
||||
:disabled="row.disabled || disabled"
|
||||
:clearable="row.clearable ? row.clearable : true"
|
||||
:placeholder="!row.placeholder ? '请选择' : row.placeholder"
|
||||
v-if="
|
||||
row.tag === 'select' || (row.type === 'select' && !lookFlag)
|
||||
"
|
||||
>
|
||||
<el-option
|
||||
v-for="(el, index) in row.options"
|
||||
:key="!row.optionValue ? el['id'] : el[row.optionValue]"
|
||||
:label="!row.optionLabel ? el['label'] : el[row.optionLabel]"
|
||||
:value="!row.optionValue ? el['id'] : el[row.optionValue]"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<baseNewSelect
|
||||
:ref="row.refName"
|
||||
:apiInfo="row.apiInfo"
|
||||
:searchApiInfo="row.searchApiInfo"
|
||||
v-if="row.type === 'newSelect'"
|
||||
v-model="ruleForm[row.id]"
|
||||
:itemObj="row"
|
||||
@showValue="showValueHandle"
|
||||
:idKey="row.id"
|
||||
:journalingType="row.journalingType"
|
||||
:prop="row.prop"
|
||||
:foucus="row.foucus"
|
||||
:apiBody="row.apiBody"
|
||||
:searchKey="row.searchKey"
|
||||
@selectChange="selectChangeHanlde"
|
||||
>
|
||||
</baseNewSelect>
|
||||
<slot
|
||||
:name="row.slotName"
|
||||
v-if="row.type === 'elSlot'"
|
||||
:row="{row,ruleForm}"
|
||||
></slot>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div
|
||||
v-if="
|
||||
row.type !== 'radio' &&
|
||||
row.type !== 'newSelect' &&
|
||||
row.type !== 'select' &&
|
||||
lookFlag
|
||||
"
|
||||
>
|
||||
{{ ruleForm[row.id] }}
|
||||
</div>
|
||||
<baseNewSelect
|
||||
:disabled="true"
|
||||
:ref="row.refName"
|
||||
:apiInfo="row.apiInfo"
|
||||
:searchApiInfo="row.searchApiInfo"
|
||||
v-if="row.type === 'newSelect'"
|
||||
v-model="ruleForm[row.id]"
|
||||
:itemObj="row"
|
||||
@showValue="showValueHandle"
|
||||
:idKey="row.id"
|
||||
:journalingType="row.journalingType"
|
||||
:prop="row.prop"
|
||||
:foucus="row.foucus"
|
||||
:apiBody="row.apiBody"
|
||||
:searchKey="row.searchKey"
|
||||
>
|
||||
</baseNewSelect>
|
||||
<el-radio-group
|
||||
v-model="ruleForm[row.id]"
|
||||
v-if="row.type === 'radio'"
|
||||
@input="changeRadio($event, index, indexRow, row)"
|
||||
:disabled="true"
|
||||
>
|
||||
<el-radio v-for="el in row.options" :label="el.id" :key="el.id">{{
|
||||
el.label
|
||||
}}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
<el-checkbox-group
|
||||
class="w-100"
|
||||
v-if="row.type === 'checkbox'"
|
||||
v-model="ruleForm[row.id]"
|
||||
>
|
||||
{{ 123 }}
|
||||
<el-checkbox
|
||||
v-for="(el, index) in row.options"
|
||||
:key="el.id"
|
||||
:label="el.id"
|
||||
>{{ el.label }}
|
||||
</el-checkbox
|
||||
>
|
||||
</el-checkbox-group>
|
||||
<baseCascader
|
||||
v-if="row.type === 'treeselect'"
|
||||
v-model="ruleForm[row.id]"
|
||||
:disabled="row.disabled && !newFlag"
|
||||
:itemObj="row"
|
||||
:ruleForm="ruleForm"
|
||||
:lookflag="lookFlag"
|
||||
class="w-100"
|
||||
></baseCascader>
|
||||
<el-select
|
||||
class="w-100"
|
||||
v-model="ruleForm[row.id]"
|
||||
filterable
|
||||
@change="selectChange($event, index, indexRow, row)"
|
||||
:disabled="true"
|
||||
:clearable="row.clearable ? row.clearable : true"
|
||||
:placeholder="!row.placeholder ? '请选择' : row.placeholder"
|
||||
v-if="row.type === 'select' && lookFlag"
|
||||
>
|
||||
<el-option
|
||||
v-for="(el, index) in row.options"
|
||||
:key="!row.optionValue ? el['id'] : el[row.optionValue]"
|
||||
:label="!row.optionLabel ? el['label'] : el[row.optionLabel]"
|
||||
:value="!row.optionValue ? el['id'] : el[row.optionValue]"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
<slot :name="row.slotName" v-if="row.tag === 'elSlot'"></slot>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<slot name="main"></slot>
|
||||
<el-form-item v-if="false" style="margin-top: 20px; padding: 0 20px">
|
||||
<!-- flex="cross:center main:center" -->
|
||||
<div flex="main:right">
|
||||
<el-button
|
||||
v-if="isFunBtn"
|
||||
class="saveBtn"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="submitForm(refName)"
|
||||
>提交
|
||||
</el-button
|
||||
>
|
||||
<el-button v-if="!lookFlag" @click="resetForm(refName)">重置</el-button>
|
||||
<el-button v-if="isFunBtn" @click="close()">取消</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import baseCascader from './baseCascader/index.vue'
|
||||
import { deepClone } from '@/utils/index.js'
|
||||
import baseDatePicker from './baseDatePicker.vue'
|
||||
import baseNewSelect from './baseNewSelect'
|
||||
import { checkMobile } from '@/utils/util'
|
||||
import { BaseSelect } from './baseSelect.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
// uploadFile,
|
||||
// customCascader
|
||||
baseNewSelect,
|
||||
baseDatePicker,
|
||||
baseCascader,
|
||||
BaseSelect
|
||||
},
|
||||
props: {
|
||||
labelWidth: {
|
||||
type: String,
|
||||
default: '80px'
|
||||
},
|
||||
labelPosition: {
|
||||
type: String,
|
||||
default: 'top'
|
||||
},
|
||||
// 提交按钮loading
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否校验正则（搜索模式）
|
||||
formRule: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
refName: {
|
||||
type: String,
|
||||
default: 'ruleForm'
|
||||
},
|
||||
// 表单新建模式
|
||||
newFlag: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 表单查看模式
|
||||
lookFlag: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
// 表单显示格式
|
||||
spanNumber: {
|
||||
type: Number,
|
||||
default: 12
|
||||
},
|
||||
spanWidth: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
},
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 表单页面结构数据
|
||||
formRow: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
// 是否禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否显示操作按钮
|
||||
isFunBtn: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
formdata: {
|
||||
type: Object
|
||||
},
|
||||
justifyContent: {
|
||||
type: String,
|
||||
default: 'flex-end'
|
||||
},
|
||||
marginBottom: {
|
||||
type: String,
|
||||
default: '0'
|
||||
},
|
||||
ruleForm: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
tableColumn: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pickerOptionsSearch: {
|
||||
shortcuts: [
|
||||
{
|
||||
text: '本月',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', [new Date(), new Date()])
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '今年至今',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date(new Date().getFullYear(), 0)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '最近六个月',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setMonth(start.getMonth() - 6)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
// 表单数据
|
||||
// ruleForm: {},
|
||||
pickerOptions: {
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now()
|
||||
},
|
||||
shortcuts: [
|
||||
{
|
||||
text: '今天',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', new Date())
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '昨天',
|
||||
onClick(picker) {
|
||||
const date = new Date()
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24)
|
||||
picker.$emit('pick', date)
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '一周前',
|
||||
onClick(picker) {
|
||||
const date = new Date()
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
|
||||
picker.$emit('pick', date)
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
tempFormData: {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
ruleForm: {
|
||||
immediate: true, // 立即执行
|
||||
deep: true, // 深度监听复杂类型内变化
|
||||
handler(newVal, oldVal) {
|
||||
this.$emit('dataChanges')
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.tempFormData = deepClone(this.ruleForm)
|
||||
},
|
||||
mounted() {
|
||||
// this.ruleForm = this.formdata
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
dblclick(val) {
|
||||
this.$emit('dblclick', val)
|
||||
},
|
||||
selectChangeHanlde(val, row) {
|
||||
console.log(val, row, 111)
|
||||
this.$emit('selectChange', val, row)
|
||||
},
|
||||
showValueHandle() {
|
||||
},
|
||||
limitPhoneNum(value, data, id) {
|
||||
if (value.toString().length > 11) {
|
||||
data[id] = value.toString().slice(0, 11)
|
||||
}
|
||||
},
|
||||
selectShow(row) {
|
||||
try {
|
||||
this.$emit('selectFormSearch', row)
|
||||
} catch (error) {
|
||||
console.log(this.ruleForm, row, '23232出错了')
|
||||
}
|
||||
},
|
||||
close() {
|
||||
this.$emit('closeDialog')
|
||||
},
|
||||
integerNumber(row) {
|
||||
// row.rules?(v)=>()):''
|
||||
// @input="(v)=>(row.row.number=v.replace(/[^\d]/g,''))"
|
||||
// if(this.ruleForm[row.prop].replace(/[^\d]/g,'')){
|
||||
// return this.ruleForm[row.prop].replace(/[^\d]/g,'')
|
||||
//
|
||||
// integer整数
|
||||
if (row.rulesName == 'integer') {
|
||||
this.ruleForm[row.prop] = this.ruleForm[row.prop].replace(/[^\d]/g, '')
|
||||
}
|
||||
// decimal小数
|
||||
if (row.rulesName == 'decimal') {
|
||||
this.ruleForm[row.id] = this.ruleForm[row.id]
|
||||
.replace(/[^\d.]/g, '')
|
||||
.replace(/\.{2,}/g, '.')
|
||||
.replace('.', '$#$')
|
||||
.replace(/\./g, '')
|
||||
.replace('$#$', '.')
|
||||
.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
|
||||
.replace(/^\./g, '')
|
||||
}
|
||||
// 身份证
|
||||
if (row.rulesName == 'identity') {
|
||||
this.ruleForm[row.prop] = this.ruleForm[row.prop].replace(
|
||||
/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
|
||||
''
|
||||
)
|
||||
}
|
||||
// 手机号
|
||||
if (row.rulesName == 'phone') {
|
||||
this.ruleForm[row.prop] = this.ruleForm[row.prop].replace(
|
||||
/^1(3|4|5|7|8|9)\\d{9}$/,
|
||||
''
|
||||
)
|
||||
// this.ruleForm[row.prop] = this.ruleForm[row.prop].replace(/^1[3,4,5,6,7,8,9][0-9]{9}$/, '')
|
||||
// this.ruleForm[row.prop] = this.ruleForm[row.prop].replace(/1(\d{2})\d{4}(\d{4})/g,'').replace(/[^\d]/g, '')
|
||||
// this.ruleForm[row.prop] = this.ruleForm[row.prop].replace(/\.{11,}/g, '')
|
||||
// /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
|
||||
}
|
||||
// 邮箱
|
||||
if (row.rulesName == 'eMail') {
|
||||
this.ruleForm[row.prop] = this.ruleForm[row.prop].replace(
|
||||
/^([0-9a-zA-Z_\.\-\])+\@([0-9a-zA-Z_\.\-\])+\.([a-zA-Z]+)$/,
|
||||
''
|
||||
)
|
||||
}
|
||||
// this.ruleForm[row.prop] = this.ruleForm[row.prop].replace(/[^\d]/g,'')
|
||||
},
|
||||
//根据地址获取经纬度
|
||||
searchByStationName(type, form) {
|
||||
this.$emit('inputBlur', type, form)
|
||||
if (type == 'address') {
|
||||
let address = this.ruleForm[type]
|
||||
let that = this
|
||||
var map = new BMap.Map('container')
|
||||
map.centerAndZoom(address, 18)
|
||||
map.enableScrollWheelZoom() //启用滚轮放大缩小，默认禁用
|
||||
map.enableContinuousZoom() //启用地图惯性拖拽，默认禁用
|
||||
map.addControl(new BMap.NavigationControl()) //添加默认缩放平移控件
|
||||
map.addControl(new BMap.OverviewMapControl()) //添加默认缩略地图控件
|
||||
map.addControl(
|
||||
new BMap.OverviewMapControl({
|
||||
isOpen: true,
|
||||
anchor: BMAP_ANCHOR_BOTTOM_RIGHT
|
||||
})
|
||||
) //右下角，打开
|
||||
var localSearch = new BMap.LocalSearch(map)
|
||||
localSearch.enableAutoViewport() //允许自动调节窗体大小
|
||||
map.clearOverlays() //清空原来的标注
|
||||
var keyword = address
|
||||
localSearch.setSearchCompleteCallback(function(searchResult) {
|
||||
var poi = searchResult.getPoi(0)
|
||||
map.centerAndZoom(poi.point, 13)
|
||||
var marker = new BMap.Marker(
|
||||
new BMap.Point(poi.point.lng, poi.point.lat)
|
||||
) // 创建标注，为要查询的地方对应的经纬度
|
||||
map.addOverlay(marker)
|
||||
var content =
|
||||
keyword +
|
||||
'<br/><br/>经度：' +
|
||||
poi.point.lng +
|
||||
'<br/>纬度：' +
|
||||
poi.point.lat
|
||||
that.ruleForm['lng'] = poi.point.lng
|
||||
that.ruleForm['lat'] = poi.point.lat
|
||||
var infoWindow = new BMap.InfoWindow(
|
||||
'<p style=\'font-size:14px;\'>' + content + '</p>'
|
||||
)
|
||||
marker.addEventListener('click', function() {
|
||||
this.openInfoWindow(infoWindow)
|
||||
})
|
||||
// marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
|
||||
})
|
||||
localSearch.search(keyword)
|
||||
}
|
||||
},
|
||||
//计步器
|
||||
handleChange(val) {
|
||||
this.$emit('handleChange', val)
|
||||
},
|
||||
// 获取图片
|
||||
getImage(imagePath) {
|
||||
let licenseImg = imagePath.join(',')
|
||||
},
|
||||
// 处置前照片
|
||||
getbeforeImgList(imagePath) {
|
||||
let licenseImg = imagePath.join(',')
|
||||
this.$set(this.ruleForm, 'beforeImgList', licenseImg)
|
||||
},
|
||||
// 处置材料
|
||||
getmaterialsList(imagePath) {
|
||||
let licenseImg = imagePath.join(',')
|
||||
this.$set(this.ruleForm, 'materialsList', licenseImg)
|
||||
},
|
||||
// 处置后材料
|
||||
getmaterialsListAfter(imagePath) {
|
||||
let licenseImg = imagePath.join(',')
|
||||
this.$set(this.ruleForm, 'materialsListAfter', licenseImg)
|
||||
},
|
||||
revealPhoto(licenseImg) {
|
||||
this.$refs.imgFile.revealImg(licenseImg)
|
||||
},
|
||||
// 回显数据
|
||||
echoFromData(echoData, otherField) {
|
||||
let jsonData = []
|
||||
this.formRow.forEach((item) => {
|
||||
jsonData.push(item.elCol)
|
||||
})
|
||||
let newJson = [].concat.apply([], jsonData)
|
||||
newJson.forEach((item) => {
|
||||
if (this.ruleForm.factoryInFlag == 1) {
|
||||
for (let i = 0; i < this.formRow[8].elCol.length; i++) {
|
||||
}
|
||||
}
|
||||
if (this.ruleForm.factoryInFlag == 0) {
|
||||
for (let i = 0; i < this.formRow[8].elCol.length; i++) {
|
||||
}
|
||||
}
|
||||
this.$set(this.ruleForm, item.prop, echoData[item.prop])
|
||||
})
|
||||
// 回显自定义多级选择组件
|
||||
if (typeof otherField == 'object') {
|
||||
this.$refs[otherField.props][0].setEchoData(echoData[otherField.field])
|
||||
}
|
||||
},
|
||||
// 获取指定字段参数
|
||||
//参数propLabel ， 值value
|
||||
getField(propLabel, value) {
|
||||
this.$set(this.ruleForm, propLabel, value)
|
||||
},
|
||||
//弹窗赋值
|
||||
choiceAssignment(value) {
|
||||
this.ruleForm = Object.assign({}, value)
|
||||
// this.$forceUpdate()
|
||||
},
|
||||
incomingParameters(vale) {
|
||||
let ruleLength = 0
|
||||
let valeLength = 0
|
||||
for (let i in vale) {
|
||||
valeLength = valeLength + 1
|
||||
}
|
||||
for (let i in this.ruleForm) {
|
||||
ruleLength = ruleLength + 1
|
||||
}
|
||||
// if(ruleLength == valeLength){
|
||||
// this.choiceAssignment(vale)
|
||||
// }else{
|
||||
// for(let i in vale){
|
||||
// this.getField(i,vale[i])
|
||||
// }
|
||||
// }
|
||||
for (let i in vale) {
|
||||
this.getField(i, vale[i])
|
||||
}
|
||||
},
|
||||
resetFormPlus(formName) {
|
||||
for (let i in this.$refs[formName]) {
|
||||
this.getField(i, '')
|
||||
}
|
||||
},
|
||||
// 重置表单字段
|
||||
resetField(field) {
|
||||
if (this.ruleForm[field]) {
|
||||
this.$set(this.ruleForm, field, '')
|
||||
this.$refs['ruleForm'].clearValidate(field) // 清除表单特定属性
|
||||
}
|
||||
},
|
||||
resetForm() {
|
||||
this.$refs[this.rulesName].clearValidate() // 清除表单特定属性
|
||||
},
|
||||
resetFields() {
|
||||
// this.choiceAssignment({});
|
||||
this.$refs.ruleForm.resetFields()
|
||||
},
|
||||
// 下拉框更改,可根据 index 与 indexRow 定位具体位置
|
||||
selectChange(val, index, indexRow, row) {
|
||||
this.$emit('onSelect', val, index, indexRow, row)
|
||||
this.$forceUpdate()
|
||||
},
|
||||
switchChange(val, index, indexRow, row) {
|
||||
this.$emit('switchChange', val, index, indexRow, row)
|
||||
},
|
||||
// 自定义级联选择器返回值
|
||||
getCascader(value, field) {
|
||||
this.$set(this.ruleForm, field, value)
|
||||
},
|
||||
// 表单提交
|
||||
submitForm() {
|
||||
this.$refs[this.refName].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$emit('onSubmit', this.ruleForm)
|
||||
} else {
|
||||
console.log('error submit!!')
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
// 表单重置
|
||||
resetForm() {
|
||||
// let tempObj = deepClone(this.tempFormData);
|
||||
// this.tableColumn
|
||||
// .filter((item) => item.disabled)
|
||||
// .forEach((item) => {
|
||||
// tempObj[item.id] = this.ruleForm[item.id];
|
||||
// });
|
||||
// this.choiceAssignment({});
|
||||
// this.$emit("resetForm", tempObj);
|
||||
this.$refs[this.refName].resetFields()
|
||||
},
|
||||
clearCheck(propName) {
|
||||
this.ruleForm[propName] = ''
|
||||
},
|
||||
elDialogClick(row, index, indexRow) {
|
||||
if (row.disabled) {
|
||||
return
|
||||
}
|
||||
// row.prop
|
||||
this.$emit('elDialogClick', row, index)
|
||||
},
|
||||
elDialogHover(row) {
|
||||
row.elDialogHoverType = true
|
||||
},
|
||||
elDialogLeave(row) {
|
||||
// row.elDialogHoverType = false
|
||||
},
|
||||
// 单选按钮组input事件
|
||||
changeRadio(val, index, indexRow, row) {
|
||||
this.$emit('onChangeRadio', val, index, indexRow, row)
|
||||
},
|
||||
normalizer(node, row) {
|
||||
//去掉children=null的属性
|
||||
if (node.children == null || node.children == 'null') {
|
||||
delete node.children
|
||||
}
|
||||
// return{
|
||||
// ...node,
|
||||
// label:nodeLabel
|
||||
// }
|
||||
},
|
||||
selectTree(row) {
|
||||
this.$emit('selectTree')
|
||||
if (this.$refs.ruleForm) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.ruleForm.validateField(row.id)
|
||||
})
|
||||
}
|
||||
},
|
||||
treeSelectClear() {
|
||||
this.$refs.selectTree.clear()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.$refs.ruleForm.resetFields();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.el-form-item__error {
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
/* width: 25%; */
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
|
||||
.el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
|
||||
margin-right: 0;
|
||||
content: "";
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
::v-deep .el-form-item--medium .el-form-item__content {
|
||||
line-height: 20px !important;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__label {
|
||||
padding: 0 0 10px !important;
|
||||
}
|
||||
|
||||
.label {
|
||||
/* @include fontBase(16px, #333333) ; */
|
||||
color: #999;
|
||||
font-size: 14px !important;
|
||||
display: block;
|
||||
width: 180px;
|
||||
// text-align: left;
|
||||
}
|
||||
|
||||
> > > .el-form-item__label {
|
||||
width: 100px;
|
||||
text-align: right !important;
|
||||
margin-right: 10px !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__label:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__content {
|
||||
margin-left: 10px;
|
||||
// width: calc(100% - 100px);
|
||||
}
|
||||
|
||||
.w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.saveBtn {
|
||||
/* width: 410px; */
|
||||
}
|
||||
|
||||
.one {
|
||||
width: calc(100% - 15px) !important;
|
||||
}
|
||||
|
||||
.elDialog {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
/* width: calc(100% - 14px);1 */
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 8px;
|
||||
padding: 0 15px;
|
||||
cursor: pointer;
|
||||
|
||||
i {
|
||||
color: #c0c4cc;
|
||||
}
|
||||
}
|
||||
|
||||
.showText {
|
||||
/* width: 100%; */
|
||||
/* width: calc(100% - 110px); */
|
||||
/*让长段文本不换行*/
|
||||
white-space: nowrap;
|
||||
/*设置文本超出元素宽度部分隐藏*/
|
||||
overflow-x: hidden;
|
||||
/*设置文本超出部分用省略号显示*/
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ruleFormClass {
|
||||
::v-deep .el-input__inner {
|
||||
border-color: #e6a23c !important;
|
||||
}
|
||||
|
||||
.elDialog {
|
||||
border-color: #e6a23c !important;
|
||||
}
|
||||
|
||||
::v-deep .el-radio__inner {
|
||||
border-color: #e6a23c !important;
|
||||
}
|
||||
|
||||
.el-radio.is-bordered {
|
||||
border-color: #e6a23c !important;
|
||||
}
|
||||
|
||||
::v-deep .vue-treeselect__control {
|
||||
border-color: #e6a23c !important;
|
||||
}
|
||||
|
||||
::v-deep .el-textarea__inner {
|
||||
border-color: #e6a23c !important;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep.stretchNone {
|
||||
.el-textarea__inner {
|
||||
resize: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,321 @@
|
|||
<template>
|
||||
<div>
|
||||
<template v-if="!lookflag">
|
||||
<el-select
|
||||
v-loading="selLoading"
|
||||
class="w-100"
|
||||
v-model="selectValue"
|
||||
:placeholder="placeholder"
|
||||
:clearable="false"
|
||||
style="width: 240px"
|
||||
size="mini"
|
||||
ref="mySelect"
|
||||
:reserve-keyword="true"
|
||||
:disabled="disabled"
|
||||
filterable
|
||||
popper-class="sele"
|
||||
:filter-method="filter"
|
||||
@change="fun"
|
||||
@focus="funx"
|
||||
@blur="funb"
|
||||
@visible-change="hidden"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in options"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
remote
|
||||
:value="item.value"
|
||||
placeholder="请输入"
|
||||
>
|
||||
</el-option>
|
||||
|
||||
<div style="bottom: -10px">
|
||||
<el-pagination
|
||||
v-if="pageModel.total > pageModel.limit"
|
||||
small
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="pageModel.pageIndex"
|
||||
:page-size="pageModel.limit"
|
||||
layout="prev, pager,next,total"
|
||||
:total="pageModel.total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-select>
|
||||
</template>
|
||||
<template v-else
|
||||
><div v-loading="selLoading">{{ showValue }}</div></template
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep .el-input--mini .el-input__inner {
|
||||
height: 38px;
|
||||
}
|
||||
.w-100 {
|
||||
width: 100% !important;
|
||||
}
|
||||
.drop >>> .el-input__inner {
|
||||
background: #5183ff !important;
|
||||
color: white;
|
||||
border: none;
|
||||
height: 26px;
|
||||
padding: 10px 22px 10px 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.drop {
|
||||
width: 250px;
|
||||
}
|
||||
.drop >>> .el-select .el-input .el-select__caret {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
import debounce from "lodash/debounce";
|
||||
import { getUserModuleApi } from "@/api/integrationOption/integrationOption.js";
|
||||
export default {
|
||||
props: {
|
||||
searchKey: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
ruleForm: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
selectInfo: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
// 是否禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
placeholder: String,
|
||||
value: {
|
||||
type: [String, Number],
|
||||
},
|
||||
itemObj: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
lookflag: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
idKey: {
|
||||
type: [Number, String],
|
||||
default: 0,
|
||||
},
|
||||
journalingType: {
|
||||
type: [String, Number],
|
||||
default: "subject",
|
||||
},
|
||||
apiInfo: {
|
||||
type: Object,
|
||||
},
|
||||
searchApiInfo: {
|
||||
type: Object,
|
||||
},
|
||||
prop: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
label: "names",
|
||||
id: "codes",
|
||||
};
|
||||
},
|
||||
},
|
||||
foucus: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
apiBody: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pageModel: {
|
||||
total: 0,
|
||||
pageIndex: 1,
|
||||
limit: 10,
|
||||
},
|
||||
selLoading: false,
|
||||
showValue: "",
|
||||
lookLoading: false,
|
||||
options: [],
|
||||
tempObj: {},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
selectValue: {
|
||||
get() {
|
||||
return this.value;
|
||||
},
|
||||
set(val) {
|
||||
this.$emit("input", val);
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (this.value) {
|
||||
console.log(this.value, "查询");
|
||||
this.searchCodes(this.value);
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
// 页码改变事件
|
||||
handleCurrentChange(val) {
|
||||
this.pageModel.pageIndex = val;
|
||||
this.getUserModuleHandle();
|
||||
},
|
||||
// select选中更改事件
|
||||
fun(val) {
|
||||
// this.$emit(`${this.funName}`, arr);
|
||||
this.$emit("selectChange", val, this.itemObj);
|
||||
// this.searchShowValue(val);
|
||||
this.$nextTick(() => {
|
||||
this.$emit("blur");
|
||||
});
|
||||
},
|
||||
// searchShowValue(val) {
|
||||
// this.options.forEach((item) => {
|
||||
// if (item.codes == val) {
|
||||
// this.showValue = item.names;
|
||||
// this.$nextTick(() => {
|
||||
// this.$emit("showValue", this.showValue, this.itemObj, this.idKey);
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
// },
|
||||
// 获得焦点
|
||||
funx() {
|
||||
if (this.foucus) {
|
||||
this.getUserModuleHandle();
|
||||
}
|
||||
},
|
||||
clearOptions() {
|
||||
if (this.options.length) {
|
||||
this.pageModel.pageIndex = 1;
|
||||
this.options = [];
|
||||
this.tempObj = null;
|
||||
}
|
||||
},
|
||||
// 失去焦点
|
||||
funb() {
|
||||
// this.$nextTick(() => {
|
||||
// this.$emit("blur");
|
||||
// });
|
||||
},
|
||||
hidden(val) {
|
||||
if (!val) {
|
||||
this.$nextTick(() => {
|
||||
this.$emit("blur");
|
||||
});
|
||||
}
|
||||
},
|
||||
//搜索方法,将符合的数据存入options中，并分页展示
|
||||
filter: debounce(function (val) {
|
||||
this.pageModel.pageIndex = 1;
|
||||
this.getUserModuleHandle(val);
|
||||
}, 300),
|
||||
// filter(val) {
|
||||
|
||||
// },
|
||||
focus() {
|
||||
this.$refs.mySelect.focus();
|
||||
},
|
||||
async getUserModuleHandle(val = null, obj = null) {
|
||||
if (obj) {
|
||||
this.tempObj = obj;
|
||||
}
|
||||
this.selLoading = true;
|
||||
const res = await getUserModuleApi(this.apiInfo, {
|
||||
journalingType: this.journalingType,
|
||||
names: val,
|
||||
pageNum: this.pageModel.pageIndex,
|
||||
pageSize: 100,
|
||||
...obj,
|
||||
...this.tempObj,
|
||||
...this.apiBody,
|
||||
});
|
||||
this.selLoading = false;
|
||||
if (res.status == 200) {
|
||||
this.options = [];
|
||||
if (res.attribute instanceof Array) {
|
||||
this.pageModel.total = res.attribute.length;
|
||||
res.attribute.forEach((item) => {
|
||||
this.options.push({
|
||||
value: item[this.prop.id],
|
||||
label: item[this.prop.label],
|
||||
});
|
||||
});
|
||||
} else {
|
||||
this.pageModel.total = res.attribute.total;
|
||||
res.attribute.list.forEach((item) => {
|
||||
this.options.push({
|
||||
value: item[this.prop.id],
|
||||
label: item[this.prop.label],
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
async searchCodes(codes) {
|
||||
let obj = {};
|
||||
if (this.searchKey) {
|
||||
obj[this.searchKey] = codes;
|
||||
}
|
||||
const res = await getUserModuleApi(this.searchApiInfo, {
|
||||
...obj,
|
||||
});
|
||||
console.log(res, "查询结果");
|
||||
if (res.status == 200 && res.attribute.main) {
|
||||
if (!this.options.length) {
|
||||
console.log(this.prop.id, this.prop.label);
|
||||
this.options.push({
|
||||
value: res.attribute.main[this.prop.id],
|
||||
label: res.attribute.main[this.prop.label],
|
||||
});
|
||||
}
|
||||
this.showValue = res.attribute.main[this.prop.label];
|
||||
console.log(this.showValue);
|
||||
this.$nextTick(() => {
|
||||
this.$emit("showValue", this.showValue, this.itemObj, this.idKey);
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
beforeDestroy() {},
|
||||
//监听来自父组件的数据，当数据更新时，重置展示
|
||||
watch: {
|
||||
value: {
|
||||
handler: function (newv, oldv) {
|
||||
console.log("进入watch", newv);
|
||||
if(newv){
|
||||
this.searchCodes(newv);
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<!--
|
||||
* @name: 自定义分页组件
|
||||
* @author: Zhangpengcheng
|
||||
* @date: 2022-09-05
|
||||
-->
|
||||
<template>
|
||||
<div class="pageTion" flex="main:right">
|
||||
<el-pagination ref="pagination" :page-sizes="[10,20, 30, 40,100]" :total="pageModel.total" :current-page="pageModel.page" :page-size="pageModel.limit"
|
||||
@current-change="currentChange" @size-change="sizeChange" background layout="prev, pager, next,jumper,total,sizes">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
pageModel: {
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
})
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
sizeChange(val) {
|
||||
let pageModel = this.pageModel;
|
||||
pageModel.limit = val;
|
||||
this.$emit('update:pageModel', pageModel)
|
||||
this.$emit('onPageChange')
|
||||
},
|
||||
currentChange(val) {
|
||||
let pageModel = this.pageModel;
|
||||
pageModel.pageIndex = val;
|
||||
this.$emit('update:pageModel', pageModel)
|
||||
this.$emit('onPageChange')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped lang='scss'>
|
||||
.pageTion {
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
}
|
||||
::v-deep .el-pager li {
|
||||
background-color: #f9f9f9 !important ;
|
||||
width: 36px !important;
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
::v-deep .el-pager .active {
|
||||
background-color: #409EFF !important;
|
||||
}
|
||||
::v-deep .el-pagination button {
|
||||
background-color: #f9f9f9 !important;
|
||||
color: #333333 !important;
|
||||
font-size: 14px !important;
|
||||
border-radius: 18px !important;
|
||||
width: 98px !important;
|
||||
height: 36px !important;
|
||||
}
|
||||
::v-deep .el-pagination__total {
|
||||
line-height: 36px !important;
|
||||
}
|
||||
::v-deep .el-pagination__jump {
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
}
|
||||
::v-deep .el-input__inner {
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
// 单选框
|
||||
<template>
|
||||
<el-radio-group v-model="itemObj.value">
|
||||
<el-radio v-for="item in itemObj.options" :label="item.id" :key="item.id">{{item.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
itemObj: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
radio: "",
|
||||
};
|
||||
},
|
||||
created(){
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
// 下拉框
|
||||
<template>
|
||||
<el-select v-model="itemObj.value" filterable placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in itemObj.options"
|
||||
:key="item.id"
|
||||
:label="item.label"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
itemObj:{
|
||||
type:Object,
|
||||
default:()=>{}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
created(){
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,634 @@
|
|||
<!--
|
||||
* @name: 自定义 el-table
|
||||
* @author: Zhangpengcheng
|
||||
* @date: 2022-08-30
|
||||
* tabLoading 加载 headerStyle表头格式 tableData数据 border纵向边框 @current-change单选触发 summary-method合计 @cell-click某个单元格点击触发事件 @sort-change触发后台排序
|
||||
* @row-click 当某一行被点击时会触发该事件 highlight-current-row是否高亮 show-summary是否合计 SummariesIndex合计需要的index @selection-change多选 tableHeight高度
|
||||
* :style="'height:'+ tableHeight + '!important'"
|
||||
-->
|
||||
<template>
|
||||
<!-- :row-class-name="tableRowClassName" -->
|
||||
<div class="app-container">
|
||||
<el-table
|
||||
v-loading="tabLoading"
|
||||
ref="elTable"
|
||||
:header-cell-style="headerStyle"
|
||||
:data="tableData"
|
||||
:border="border"
|
||||
@current-change="handleCurrentChange"
|
||||
:summary-method="getSummaries"
|
||||
:row-class-name="tableRowClassName"
|
||||
:size="size"
|
||||
:row-key="getRowKey"
|
||||
@cell-click="getCellClick"
|
||||
@row-click="getRowClick"
|
||||
:highlight-current-row="highlightCurrent"
|
||||
:show-summary="showsummary"
|
||||
:SummariesIndex="SummariesIndex"
|
||||
@row-dblclick="rowDblclick"
|
||||
@selection-change="handleSelectionChange"
|
||||
@select="select"
|
||||
@select-all="selectAll"
|
||||
style="width: 100%"
|
||||
:cell-class-name="tableCellName"
|
||||
:height="tableHeight"
|
||||
:max-height="tableMaxHeight"
|
||||
@sort-change="sortChange"
|
||||
:key="itemKey"
|
||||
@cell-dblclick="doubleClick"
|
||||
fit
|
||||
>
|
||||
<el-table-column
|
||||
align="center"
|
||||
:reserve-selection="true"
|
||||
v-if="showSelect"
|
||||
type="selection"
|
||||
width="55"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="序号"
|
||||
align="center"
|
||||
type="index"
|
||||
v-if="showIndex"
|
||||
width="55"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<div v-if="indexOperate">
|
||||
<p v-if="scope.$index + 1 != tableData.length">
|
||||
{{ scope.$index + 1 }}
|
||||
</p>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
circle
|
||||
v-else
|
||||
size="mini"
|
||||
@click="newRow"
|
||||
>
|
||||
</el-button>
|
||||
</div>
|
||||
<p v-else>{{ scope.$index + 1 }}</p>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="单选" align="center" v-if="slotrow" width="60">
|
||||
<template slot-scope="scope">
|
||||
<!-- 定义插槽：父组件可以使用 v-slot:prop="{row}" 搭配template标签，自定义每一列单元格的样式与操作 -->
|
||||
<el-radio v-model="radioIndex" :label="scope.$index"
|
||||
><span></span
|
||||
></el-radio>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
:key="ind + 1"
|
||||
:width="item.width ? item.width : 'auto'"
|
||||
:label="item.title"
|
||||
:prop="item.id"
|
||||
:show-overflow-tooltip="item.tooltip"
|
||||
:sortable="item.sortable"
|
||||
:align="item.align ? item.align : 'center'"
|
||||
header-align="center"
|
||||
:fixed="item.fixed"
|
||||
v-for="(item, ind) in tableColumn"
|
||||
>
|
||||
<!-- :isClick="item.other && item.other.isClick ? item.other.isClick : false" -->
|
||||
<template slot-scope="scope">
|
||||
<!-- 定义插槽：父组件可以使用 v-slot:prop="{row}" 搭配template标签，自定义每一列单元格的样式与操作 -->
|
||||
<slot :name="item.id" :row="slotrow ? scope : scope.row">
|
||||
<!-- 插槽后备内容：如父组件不使用插槽则使用后备内容 -->
|
||||
<!-- color:
|
||||
item.other && item.other.color ? item.other.color : '#333',
|
||||
cursor:
|
||||
item.other && item.other.isClick ? 'pointer' : 'default', -->
|
||||
<template
|
||||
class="item"
|
||||
effect="dark"
|
||||
placement="top"
|
||||
v-if="
|
||||
item.type !== 'select' &&
|
||||
item.type !== 'treeselect' &&
|
||||
item.type !== 'datepick' &&
|
||||
item.type !== 'check'
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
"
|
||||
>
|
||||
<span
|
||||
:style="{
|
||||
color: item.color ? item.color : '#333',
|
||||
cursor: item.isClick ? 'pointer' : 'default',
|
||||
}"
|
||||
>{{
|
||||
!item.stateOption
|
||||
? scope.row[item.id]
|
||||
: item.stateOption[scope.row[item.id]]
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<baseNewSelect
|
||||
v-if="item.type === 'select'"
|
||||
v-model="scope.row[item.id]"
|
||||
:lookflag="true"
|
||||
:itemObj="item"
|
||||
:ruleForm="scope.row"
|
||||
></baseNewSelect>
|
||||
<baseCascader
|
||||
v-if="item.type === 'treeselect'"
|
||||
v-model="scope.row[item.id]"
|
||||
:lookflag="true"
|
||||
:itemObj="item"
|
||||
:ruleForm="scope.row"
|
||||
>
|
||||
</baseCascader>
|
||||
<div v-if="item.type === 'datepick'">
|
||||
{{ scope.row[item.id].split("T")[0] }}
|
||||
</div>
|
||||
<el-checkbox v-model="scope.row[item.id]"></el-checkbox>
|
||||
</template>
|
||||
</slot>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
:width="funWidth"
|
||||
v-if="funData.length != 0"
|
||||
align="center"
|
||||
header-align="center"
|
||||
:fixed="fixedTable"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<div flex="cross:center main:center">
|
||||
<div
|
||||
v-for="(item, index) in funData"
|
||||
:key="index"
|
||||
:class="{ 'mr-12': index + 1 != funData.length }"
|
||||
@click.stop="funcEmit(scope.row, funData[index])"
|
||||
class="btnText"
|
||||
:style="{ background: item.color ? item.color : 'blue' }"
|
||||
style="padding: 3px 10px; border-radius: 20px"
|
||||
>
|
||||
<span
|
||||
style="color: #fff; font-weight: 700"
|
||||
v-if="!item.ifField && !item.hiddenField"
|
||||
>{{ item.text }}</span
|
||||
>
|
||||
<span
|
||||
:style="{
|
||||
color:
|
||||
scope.row[item.ifField] == item.fieldVal
|
||||
? item.fieldColor
|
||||
: item.color,
|
||||
}"
|
||||
v-if="item.ifField"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- 操作 、自定义插槽 -->
|
||||
<slot v-else></slot>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import baseCascader from "./baseCascader/index";
|
||||
import baseNewSelect from "./baseNewSelect.vue";
|
||||
import Sortable from "sortablejs";
|
||||
import { getUserModuleApi } from "@/api/integrationOption/integrationOption.js";
|
||||
export default {
|
||||
props: {
|
||||
// 最大高度
|
||||
tableMaxHeight: {
|
||||
type: [String, Number],
|
||||
},
|
||||
// loading
|
||||
tabLoading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 序号操作icon
|
||||
indexOperate: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 固定列
|
||||
fixedTable: {
|
||||
type: [Boolean, String],
|
||||
default: false,
|
||||
},
|
||||
// 读取字段
|
||||
slotrow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
showsummary: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 表格高度
|
||||
tableHeight: {
|
||||
type: [Number, String],
|
||||
},
|
||||
// 表格高度
|
||||
// windowHight: {
|
||||
// type: [ String],
|
||||
// default: 'auto'
|
||||
// },
|
||||
// 表格尺寸
|
||||
size: {
|
||||
type: String,
|
||||
default: "small",
|
||||
},
|
||||
// 表格数据
|
||||
tableData: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
// 表头数据
|
||||
tableColumn: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
// 合计的index
|
||||
SummariesIndex: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
// 是否显示选择框
|
||||
showSelect: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 是否显示序号
|
||||
showIndex: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 操作选项
|
||||
funData: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
// 操作按钮宽度
|
||||
funWidth: {
|
||||
type: Number,
|
||||
default: 100,
|
||||
},
|
||||
// 是否带有纵向边框
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
|
||||
// 单选是否高亮
|
||||
highlightCurrent: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 默认拖动
|
||||
sortableSwitch: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// headerStyle:{
|
||||
// type: String,
|
||||
// default:{
|
||||
// 'background-color': '#F5F5F5',
|
||||
// 'color': '#333333',
|
||||
// },
|
||||
// }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
headerStyle: {
|
||||
"background-color": "#F5F5F5",
|
||||
color: "#333333",
|
||||
},
|
||||
itemKey: true,
|
||||
radioIndex: false,
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.$emit("mainTableMounted");
|
||||
this.rowDrop();
|
||||
// 解决滚动条问题
|
||||
// var tableBody = this.$refs.elTable.$refs.footerWrapper
|
||||
// tableBody.addEventListener('scroll', () => {
|
||||
// // 滚动距离
|
||||
// const scrollLeft = tableBody.scrollLeft
|
||||
// this.$refs.elTable.$refs.bodyWrapper.scrollLeft = scrollLeft
|
||||
// })
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
methods: {
|
||||
setCurrent(row) {
|
||||
this.$refs.elTable.setCurrentRow(row);
|
||||
},
|
||||
selectShow(item, row) {
|
||||
const res = getUserModuleApi(
|
||||
{
|
||||
tl: "optionService",
|
||||
as: "sys_template",
|
||||
dj: "queryTemplateData",
|
||||
},
|
||||
{
|
||||
service: item.service,
|
||||
id: row[item.id],
|
||||
label: item.label,
|
||||
value: item.value,
|
||||
}
|
||||
).then((val) => {
|
||||
this.$emit("selectValueGeT", item, row, val.attribute[0][item.label]);
|
||||
});
|
||||
|
||||
// console.log(res.attribute[0][item.label])
|
||||
// return 1232321;
|
||||
},
|
||||
select(selection, row) {
|
||||
this.$emit("select", selection, row);
|
||||
},
|
||||
selectAll(selection) {
|
||||
this.$emit("selectAll", selection);
|
||||
},
|
||||
setTableKey() {
|
||||
this.itemKey = !this.itemKey;
|
||||
},
|
||||
// 单元格双击事件
|
||||
doubleClick(row, column, cell, event) {
|
||||
this.$emit("doubleClick", row, column, cell, event);
|
||||
},
|
||||
// 取消多选
|
||||
clearSelect() {
|
||||
this.$refs.elTable.clearSelection();
|
||||
},
|
||||
/**
|
||||
* @description 单元格点击事件
|
||||
* @author duanyipeng
|
||||
* @createDate 2020/7/6 21:36
|
||||
* @param { Object } row 每一行数据
|
||||
* @param { Object } column 选中单元格表头数据
|
||||
* @use {
|
||||
* other:{
|
||||
* isClick:true
|
||||
* }
|
||||
* }
|
||||
*/
|
||||
getCellClick(row, column) {
|
||||
let label = column.label;
|
||||
// let itemColumn = this.tableColumn.filter(item => {
|
||||
// return item.label === label
|
||||
// })
|
||||
// if (itemColumn[0] && itemColumn[0].other && itemColumn[0].other.isClick) {
|
||||
// this.$emit('onCellClick', row, label)
|
||||
// }
|
||||
this.$emit("onCellClick", row, label);
|
||||
},
|
||||
// 每一行点击事件
|
||||
getRowClick(row, column, event) {
|
||||
this.handleCurrentChange(row);
|
||||
this.$emit("onRowClick", row);
|
||||
},
|
||||
// 每一行双击点击事件
|
||||
rowDblclick(row, column, event) {
|
||||
if (this.showSelect) {
|
||||
this.toggleSelection([row]);
|
||||
}
|
||||
this.$emit("rowDblclick", row);
|
||||
},
|
||||
// 保存选中的数据id,row-key就是要指定一个key标识这一行的数据
|
||||
getRowKey(row) {
|
||||
return row.id;
|
||||
},
|
||||
// 多选事件
|
||||
handleSelectionChange(selectTable) {
|
||||
this.$emit("onSelectionChange", selectTable);
|
||||
},
|
||||
/**
|
||||
* 触发操作事件
|
||||
* 参数1：当前按钮索引
|
||||
* 参数2：当前按钮所在行数据
|
||||
*/
|
||||
funcEmit(row, item) {
|
||||
this.$emit("onFunc", row, item);
|
||||
},
|
||||
// 排序改变 降序:descending;升序ascending
|
||||
sortChange(column) {
|
||||
this.$emit("sortChange", column);
|
||||
},
|
||||
//单选
|
||||
handleCurrentChange(val) {
|
||||
this.radioIndex = val.index;
|
||||
this.$emit("radioChange", val);
|
||||
},
|
||||
clearRadioIndex() {
|
||||
this.radioIndex = false;
|
||||
},
|
||||
setRadioIndex(index) {
|
||||
this.radioIndex = index;
|
||||
},
|
||||
// 添加index
|
||||
tableCellName({ row, column, rowIndex, columnINdex }) {
|
||||
row.index = rowIndex;
|
||||
column.index = columnINdex;
|
||||
},
|
||||
// tableRowClassName({ row,rowIndex}) {
|
||||
// if (rowIndex === 1) {
|
||||
// return 'warning-row';
|
||||
// } else if (rowIndex === 3) {
|
||||
// return 'success-row';
|
||||
// }
|
||||
// return '';
|
||||
// },
|
||||
tableRowClassName: function ({ row, rowIndex }) {
|
||||
let data = "";
|
||||
this.$emit("row-class-name", { row: row, rowIndex: rowIndex }, (val) => {
|
||||
data = val;
|
||||
});
|
||||
return data; //属性名必须返回一个string
|
||||
},
|
||||
newRow() {
|
||||
this.$emit("newRow");
|
||||
this.$nextTick(() => {
|
||||
this.$refs.elTable.bodyWrapper.scrollTop =
|
||||
this.$refs.elTable.bodyWrapper.scrollHeight;
|
||||
});
|
||||
},
|
||||
//行拖拽,排序方法
|
||||
|
||||
rowDrop() {
|
||||
if (!this.sortableSwitch) {
|
||||
return;
|
||||
}
|
||||
const el = this.$refs.elTable.$el.querySelectorAll(
|
||||
".el-table__body-wrapper > table > tbody"
|
||||
)[0];
|
||||
this.sortable = Sortable.create(el, {
|
||||
ghostClass: "sortable-ghost",
|
||||
setData: function (dataTransfer) {
|
||||
dataTransfer.setData("Text", "");
|
||||
},
|
||||
onEnd: (evt) => {
|
||||
// console.log(evt,"evt")
|
||||
// console.log(evt.oldIndex, "oldIndex");
|
||||
// console.log(this.tableData)
|
||||
// console.log(evt.oldIndex, this.tableData.splice(evt.oldIndex, 1))
|
||||
const targetRow = this.tableData.splice(evt.oldIndex, 1)[0];
|
||||
// console.log(targetRow, "targetRow");
|
||||
// console.log(evt.newIndex, "newIndex");
|
||||
this.tableData.splice(evt.newIndex, 0, targetRow);
|
||||
},
|
||||
});
|
||||
},
|
||||
// 默认选择
|
||||
toggleSelection(rowData, selected) {
|
||||
if (rowData) {
|
||||
rowData.forEach((row) => {
|
||||
this.$refs.elTable.toggleRowSelection(row, selected);
|
||||
});
|
||||
} else {
|
||||
this.$refs.elTable.clearSelection();
|
||||
}
|
||||
},
|
||||
// 合计
|
||||
getSummaries(params) {
|
||||
const { columns, data } = params;
|
||||
const sums = [];
|
||||
columns.forEach((column, index) => {
|
||||
if (index === 0) {
|
||||
sums[index] = "合计";
|
||||
return;
|
||||
}
|
||||
this.SummariesIndex.forEach((el) => {
|
||||
if (index == el) {
|
||||
const values = data.map((item) => Number(item[column.property]));
|
||||
if (!values.every((value) => isNaN(value))) {
|
||||
sums[index] = values.reduce((prev, curr) => {
|
||||
const value = Number(curr);
|
||||
if (!isNaN(value)) {
|
||||
return prev + curr;
|
||||
} else {
|
||||
return prev;
|
||||
}
|
||||
}, 0);
|
||||
sums[index] = sums[index].toFixed(2);
|
||||
} else {
|
||||
sums[index] = "";
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
return sums;
|
||||
},
|
||||
},
|
||||
components: {
|
||||
baseNewSelect,
|
||||
baseCascader,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.btnText {
|
||||
padding: 3px 10px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.el-table .warning-row {
|
||||
background: #ffe562;
|
||||
}
|
||||
|
||||
.el-table .success-row {
|
||||
background: #acf389;
|
||||
}
|
||||
|
||||
.el-table .denger-row {
|
||||
background: #e13501;
|
||||
}
|
||||
|
||||
.fiexTableBottm {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
>>> .el-radio__label {
|
||||
// display: none;
|
||||
}
|
||||
|
||||
.btnText {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mr-12 {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
::v-deep .cell {
|
||||
font-weight: 400;
|
||||
}
|
||||
::v-deep .el-table__row {
|
||||
height: 60px !important;
|
||||
background-color: #fcfcfc;
|
||||
}
|
||||
::v-deep .el-table__header {
|
||||
height: 50px !important;
|
||||
background-color: #fcfcfc;
|
||||
}
|
||||
// ::v-deep .el-table .sort-caret.ascending {
|
||||
// top: 1px
|
||||
// }
|
||||
|
||||
// ::v-deep .el-table .sort-caret.descending {
|
||||
// bottom: 2px
|
||||
// }
|
||||
|
||||
// ::v-deep .el-table .caret-wrapper {
|
||||
// height: 23px;
|
||||
// }
|
||||
|
||||
// 解决滚动条问题 div ::v-deep .el-table--scrollable-x .el-table__body-wrapper {
|
||||
// overflow-x: hidden !important;
|
||||
// z-index: 2 !important;
|
||||
// }
|
||||
// div ::v-deep .el-table__footer-wrapper {
|
||||
// overflow-x: auto;
|
||||
// border-top: 1px solid #f4f4f4;
|
||||
// }
|
||||
// ::v-deep .el-table {
|
||||
// overflow-x: auto;
|
||||
// }
|
||||
// ::v-deep .el-table__header-wrapper,
|
||||
// ::v-deep .el-table__body-wrapper,
|
||||
// ::v-deep .el-table__footer-wrapper {
|
||||
// overflow: visible;
|
||||
// }
|
||||
// ::v-deep .el-table::after {
|
||||
// position: relative;
|
||||
// }
|
||||
// ::v-deep .el-table--scrollable-x ::v-deep .el-table__body-wrapper {
|
||||
// overflow: visible;
|
||||
// }
|
||||
// ::v-deep .el-table {
|
||||
// .el-table__body-wrapper {
|
||||
// z-index: 2;
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
|
|
@ -0,0 +1,741 @@
|
|||
<!--
|
||||
* @name: 自定义 el-table
|
||||
* @author: Zhangpengcheng
|
||||
* @date: 2022-08-30
|
||||
* tabLoading 加载 headerStyle表头格式 tableData数据 border纵向边框 @current-change单选触发 summary-method合计 @cell-click某个单元格点击触发事件 @sort-change触发后台排序
|
||||
* @row-click 当某一行被点击时会触发该事件 highlight-current-row是否高亮 show-summary是否合计 SummariesIndex合计需要的index @selection-change多选 tableHeight高度
|
||||
* :style="'height:'+ tableHeight + '!important'"
|
||||
-->
|
||||
<template>
|
||||
<!-- :row-class-name="tableRowClassName" -->
|
||||
<div class="app-container">
|
||||
<el-table
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
v-loading="tabLoading"
|
||||
ref="elTable"
|
||||
:header-cell-style="headerStyle"
|
||||
:data="tableInfo.tableData"
|
||||
:border="border"
|
||||
@current-change="handleCurrentChange"
|
||||
:summary-method="getSummaries"
|
||||
:row-class-name="tableRowClassName"
|
||||
:size="size"
|
||||
row-key="id"
|
||||
@cell-click="getCellClick"
|
||||
@row-click="getRowClick"
|
||||
:highlight-current-row="highlightCurrent"
|
||||
:show-summary="showsummary"
|
||||
:SummariesIndex="SummariesIndex"
|
||||
@row-dblclick="rowDblclick"
|
||||
@selection-change="handleSelectionChange"
|
||||
@select="select"
|
||||
@select-all="selectAll"
|
||||
style="width: 100%"
|
||||
:cell-class-name="tableCellName"
|
||||
:max-height="tableMaxHeight"
|
||||
@sort-change="sortChange"
|
||||
:key="itemKey"
|
||||
@cell-dblclick="doubleClick"
|
||||
fit
|
||||
>
|
||||
<el-table-column
|
||||
align="center"
|
||||
:reserve-selection="true"
|
||||
v-if="showSelect"
|
||||
type="selection"
|
||||
width="55"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
fixed
|
||||
label="序号"
|
||||
align="center"
|
||||
type="index"
|
||||
v-if="showIndex"
|
||||
width="55"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<div v-if="indexOperate && !lookflag">
|
||||
<p v-if="scope.$index + 1 != tableInfo.tableData.length">
|
||||
{{ scope.$index + 1 }}
|
||||
</p>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
circle
|
||||
v-else
|
||||
size="mini"
|
||||
@click="newRow"
|
||||
>
|
||||
</el-button>
|
||||
</div>
|
||||
<p v-else>{{ scope.$index + 1 }}</p>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="单选" align="center" v-if="slotrow" width="60">
|
||||
<template slot-scope="scope">
|
||||
<!-- 定义插槽：父组件可以使用 v-slot:prop="{row}" 搭配template标签，自定义每一列单元格的样式与操作 -->
|
||||
<el-radio v-model="radioIndex" :label="scope.$index"
|
||||
><span></span
|
||||
></el-radio>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:key="item.id"
|
||||
:width="item.width ? item.width : 'auto'"
|
||||
:label="item.title"
|
||||
:prop="item.id"
|
||||
:show-overflow-tooltip="item.tooltip"
|
||||
:sortable="item.sortable"
|
||||
:align="item.align ? item.align : 'center'"
|
||||
header-align="center"
|
||||
:fixed="item.fixed"
|
||||
v-for="(item, ind) in tableInfo.detailFields"
|
||||
v-if="!item.hidden"
|
||||
>
|
||||
<!-- :isClick="item.other && item.other.isClick ? item.other.isClick : false" -->
|
||||
<template slot-scope="scope">
|
||||
<!-- 定义插槽：父组件可以使用 v-slot:prop="{row}" 搭配template标签，自定义每一列单元格的样式与操作 -->
|
||||
<slot
|
||||
:name="item.id"
|
||||
:row="
|
||||
slotrow
|
||||
? scope
|
||||
: [scope.row, item, tableInfo.tableData[scope.row.index]]
|
||||
"
|
||||
>
|
||||
<template v-if="!lookflag">
|
||||
<!-- <button @click="test(scope)">按钮</button> -->
|
||||
<!-- v-model="tableInfo.tableData[scope.row.index][item.id]" -->
|
||||
|
||||
<el-input
|
||||
:maxlength="item.maxlength ? item.maxlength : '50'"
|
||||
v-if="item.type === 'input'"
|
||||
v-model="scope.row[item.id]"
|
||||
placeholder=""
|
||||
></el-input>
|
||||
<el-input
|
||||
:maxlength="item.maxlength ? item.maxlength : '50'"
|
||||
v-if="item.type === 'number'"
|
||||
type="number"
|
||||
onkeyup="value=value.replace(/[^\d]/g,'')"
|
||||
v-model="scope.row[item.id]"
|
||||
placeholder=""
|
||||
min="1"
|
||||
></el-input>
|
||||
<el-checkbox
|
||||
v-if="item.type === 'checkbox'"
|
||||
v-model="scope.row[item.id]"
|
||||
></el-checkbox>
|
||||
<BaseSelect
|
||||
v-if="item.type === 'select'"
|
||||
v-model="scope.row[item.id]"
|
||||
:selectInfo="item"
|
||||
:itemObj="item"
|
||||
:ruleForm="tableInfo.tableData[scope.row.index]"
|
||||
></BaseSelect>
|
||||
<baseCascader
|
||||
v-if="item.type === 'treeselect'"
|
||||
v-model="scope.row[item.id]"
|
||||
:itemObj="item"
|
||||
:ruleForm="tableInfo.tableData[scope.row.index]"
|
||||
>
|
||||
</baseCascader>
|
||||
<el-link
|
||||
style="
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
"
|
||||
v-if="item.type === 'click'"
|
||||
@click="clickBoxHandle(scope.row)"
|
||||
type="primary"
|
||||
>{{
|
||||
tableInfo.tableData[scope.row.index][item.id]
|
||||
? tableInfo.tableData[scope.row.index][item.id]
|
||||
: "点击这里..."
|
||||
}}</el-link
|
||||
>
|
||||
<div v-if="item.type === 'text'">
|
||||
<el-tooltip class="item" effect="dark" placement="top">
|
||||
<div slot="content">
|
||||
{{ tableInfo.tableData[scope.row.index][item.id] }}
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
"
|
||||
>
|
||||
{{ tableInfo.tableData[scope.row.index][item.id] }}
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<BaseDatePicker
|
||||
v-if="item.type === 'datepick'"
|
||||
v-model="scope.row[item.id]"
|
||||
></BaseDatePicker>
|
||||
<BaseDatePicker
|
||||
v-if="item.type === 'datetimepick'"
|
||||
datePickerType="datetime"
|
||||
v-model="scope.row[item.id]"
|
||||
></BaseDatePicker>
|
||||
<div
|
||||
v-if="
|
||||
item.type === 'compute' &&
|
||||
!lookflag &&
|
||||
scope.$index + 1 != tableInfo.tableData.length
|
||||
"
|
||||
>
|
||||
<el-tooltip class="item" effect="dark" placement="top">
|
||||
<div slot="content">
|
||||
{{ calculator(item, scope.row) }}
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
"
|
||||
>
|
||||
{{ calculator(item, scope.row) }}
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<el-switch
|
||||
v-if="item.type === 'switch'"
|
||||
v-model="scope.row[item.id]"
|
||||
>
|
||||
</el-switch>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div
|
||||
v-if="
|
||||
item.type != 'checkbok' &&
|
||||
item.type !== 'select' &&
|
||||
item.type !== 'treeselect' &&
|
||||
item.type !== 'datepick'
|
||||
"
|
||||
>
|
||||
<el-tooltip class="item" effect="dark" placement="top">
|
||||
<div slot="content">
|
||||
{{ tableInfo.tableData[scope.row.index][item.id] }}
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
"
|
||||
>
|
||||
{{ tableInfo.tableData[scope.row.index][item.id] }}
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<baseCascader
|
||||
v-if="item.type === 'treeselect'"
|
||||
v-model="scope.row[item.id]"
|
||||
:lookflag="true"
|
||||
:itemObj="item"
|
||||
:ruleForm="tableInfo.tableData[scope.row.index]"
|
||||
>
|
||||
</baseCascader>
|
||||
<el-checkbox
|
||||
v-if="item.type === 'checkbox'"
|
||||
v-model="scope.row[item.id]"
|
||||
></el-checkbox>
|
||||
<div v-if="item.type === 'datepick'">
|
||||
{{ 123 }}
|
||||
{{ scope.row[item.id].split("T")[0] }}
|
||||
</div>
|
||||
</template>
|
||||
</slot>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
:width="funWidth"
|
||||
v-if="funData.length != 0 && !lookflag"
|
||||
align="center"
|
||||
header-align="center"
|
||||
:fixed="fixedTable"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<div flex="cross:center main:center">
|
||||
<div
|
||||
v-for="(item, index) in funData"
|
||||
:key="index"
|
||||
:class="{ 'mr-12': index + 1 != funData.length }"
|
||||
@click="funcEmit(scope.row, funData[index], scope)"
|
||||
class="btnText"
|
||||
>
|
||||
<span
|
||||
:style="'color:' + item.color"
|
||||
v-if="!item.ifField && !item.hiddenField"
|
||||
>{{ item.text }}</span
|
||||
>
|
||||
<span
|
||||
:style="{
|
||||
color:
|
||||
scope.row[item.ifField] == item.fieldVal
|
||||
? item.fieldColor
|
||||
: item.color,
|
||||
}"
|
||||
v-if="item.ifField"
|
||||
>{{
|
||||
scope.row[item.ifField] == item.fieldVal
|
||||
? item.fieldTxt
|
||||
: item.text
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- 操作 、自定义插槽 -->
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import baseCascader from "./baseCascader/index";
|
||||
import { deepClone } from "@/utils/index.js";
|
||||
import execMathExpress from "exec-mathexpress";
|
||||
import BaseDatePicker from "./baseDatePicker.vue";
|
||||
import BaseSelect from "./baseNewSelect.vue";
|
||||
import Sortable from "sortablejs";
|
||||
export default {
|
||||
props: {
|
||||
// 表格的索引值
|
||||
formIndex: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
lookflag: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
tableInfo: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
// 最大高度
|
||||
tableMaxHeight: {
|
||||
type: [String, Number],
|
||||
},
|
||||
// loading
|
||||
tabLoading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 序号操作icon
|
||||
indexOperate: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 固定列
|
||||
fixedTable: {
|
||||
type: [Boolean, String],
|
||||
default: false,
|
||||
},
|
||||
// 读取字段
|
||||
slotrow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
showsummary: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 表格高度
|
||||
tableHeight: {
|
||||
type: [Number, String],
|
||||
default: "auto",
|
||||
},
|
||||
// 表格高度
|
||||
// windowHight: {
|
||||
// type: [ String],
|
||||
// default: 'auto'
|
||||
// },
|
||||
// 表格尺寸
|
||||
size: {
|
||||
type: String,
|
||||
default: "small",
|
||||
},
|
||||
// 表格数据
|
||||
tableData: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
// 表头数据
|
||||
detailFields: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
// 合计的index
|
||||
SummariesIndex: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
// 是否显示选择框
|
||||
showSelect: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 是否显示序号
|
||||
showIndex: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 操作选项
|
||||
funData: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
// 操作按钮宽度
|
||||
funWidth: {
|
||||
type: Number,
|
||||
default: 100,
|
||||
},
|
||||
// 是否带有纵向边框
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
|
||||
// 单选是否高亮
|
||||
highlightCurrent: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 默认拖动
|
||||
sortableSwitch: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// headerStyle:{
|
||||
// type: String,
|
||||
// default:{
|
||||
// 'background-color': '#F5F5F5',
|
||||
// 'color': '#333333',
|
||||
// },
|
||||
// }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
headerStyle: {
|
||||
"background-color": "#F5F5F5",
|
||||
color: "#333333",
|
||||
},
|
||||
itemKey: true,
|
||||
radioIndex: false,
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.$emit("getTableData", this.tableInfo.index);
|
||||
this.rowDrop();
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
methods: {
|
||||
test(row) {
|
||||
console.log(row);
|
||||
},
|
||||
|
||||
calculator(item, row) {
|
||||
let obj = {};
|
||||
item.computeId.forEach((ele) => {
|
||||
obj[ele] = row[ele];
|
||||
});
|
||||
let result;
|
||||
try {
|
||||
let { num, den } = execMathExpress(item.total, obj);
|
||||
console.log(execMathExpress(item.total, obj));
|
||||
result = num / den;
|
||||
} catch (error) {
|
||||
return "数字不合法";
|
||||
}
|
||||
this.$emit("toalResult", this.tableInfo, row, item, result);
|
||||
return result.toFixed(2);
|
||||
},
|
||||
// 点击这里盒子触发
|
||||
clickBoxHandle(row) {
|
||||
this.$emit(
|
||||
"clickBox",
|
||||
this.tableInfo,
|
||||
row.index,
|
||||
this.tableInfo.tableData[row.index].id,
|
||||
this.formIndex
|
||||
);
|
||||
},
|
||||
select(selection, row) {
|
||||
this.$emit("select", selection, row);
|
||||
},
|
||||
selectAll(selection) {
|
||||
this.$emit("selectAll", selection);
|
||||
},
|
||||
setTableKey() {
|
||||
this.itemKey = !this.itemKey;
|
||||
},
|
||||
// 单元格双击事件
|
||||
doubleClick(row, column, cell, event) {
|
||||
this.$emit("doubleClick", row, column, cell, event);
|
||||
},
|
||||
// 取消多选
|
||||
clearSelect() {
|
||||
this.$refs.elTable.clearSelection();
|
||||
},
|
||||
/**
|
||||
* @description 单元格点击事件
|
||||
* @author duanyipeng
|
||||
* @createDate 2020/7/6 21:36
|
||||
* @param { Object } row 每一行数据
|
||||
* @param { Object } column 选中单元格表头数据
|
||||
* @use {
|
||||
* other:{
|
||||
* isClick:true
|
||||
* }
|
||||
* }
|
||||
*/
|
||||
getCellClick(row, column) {
|
||||
let label = column.label;
|
||||
// let itemColumn = this.detailFields.filter(item => {
|
||||
// return item.label === label
|
||||
// })
|
||||
// if (itemColumn[0] && itemColumn[0].other && itemColumn[0].other.isClick) {
|
||||
// this.$emit('onCellClick', row, label)
|
||||
// }
|
||||
this.$emit("onCellClick", row, label);
|
||||
},
|
||||
// 每一行点击事件
|
||||
getRowClick(row, column, event) {
|
||||
this.handleCurrentChange(row);
|
||||
this.$emit("onRowClick", row);
|
||||
},
|
||||
// 每一行双击点击事件
|
||||
rowDblclick(row, column, event) {
|
||||
if (this.showSelect) {
|
||||
this.toggleSelection([row]);
|
||||
}
|
||||
this.$emit("rowDblclick", row);
|
||||
},
|
||||
// 保存选中的数据id,row-key就是要指定一个key标识这一行的数据
|
||||
getRowKey(row) {
|
||||
return row.id;
|
||||
},
|
||||
// 多选事件
|
||||
handleSelectionChange(selectTable) {
|
||||
this.$emit("onSelectionChange", selectTable);
|
||||
},
|
||||
/**
|
||||
* 触发操作事件
|
||||
* 参数1：当前按钮索引
|
||||
* 参数2：当前按钮所在行数据
|
||||
*/
|
||||
funcEmit(row, item) {
|
||||
this.$emit("onFunc", row, item, this.tableInfo.tableData);
|
||||
},
|
||||
// 排序改变 降序:descending;升序ascending
|
||||
sortChange(column) {
|
||||
this.$emit("sortChange", column);
|
||||
},
|
||||
//单选
|
||||
handleCurrentChange(val) {
|
||||
this.radioIndex = val.index;
|
||||
this.$emit("radioChange", val);
|
||||
},
|
||||
clearRadioIndex() {
|
||||
this.radioIndex = false;
|
||||
},
|
||||
setRadioIndex(index) {
|
||||
this.radioIndex = index;
|
||||
},
|
||||
// 添加index
|
||||
tableCellName({ row, column, rowIndex, columnINdex }) {
|
||||
row.index = rowIndex;
|
||||
column.index = columnINdex;
|
||||
},
|
||||
// tableRowClassName({ row,rowIndex}) {
|
||||
// if (rowIndex === 1) {
|
||||
// return 'warning-row';
|
||||
// } else if (rowIndex === 3) {
|
||||
// return 'success-row';
|
||||
// }
|
||||
// return '';
|
||||
// },
|
||||
tableRowClassName: function ({ row, rowIndex }) {
|
||||
let data = "";
|
||||
this.$emit("row-class-name", { row: row, rowIndex: rowIndex }, (val) => {
|
||||
data = val;
|
||||
});
|
||||
return data; //属性名必须返回一个string
|
||||
},
|
||||
newRow() {
|
||||
this.$emit("newRow", this.tableInfo);
|
||||
this.$nextTick(() => {
|
||||
this.$refs.elTable.bodyWrapper.scrollTop =
|
||||
this.$refs.elTable.bodyWrapper.scrollHeight;
|
||||
this.setTableKey();
|
||||
});
|
||||
},
|
||||
//行拖拽,排序方法
|
||||
rowDrop() {
|
||||
if (!this.sortableSwitch) {
|
||||
return;
|
||||
}
|
||||
const el = this.$refs.elTable.$el.querySelectorAll(
|
||||
".el-table__body-wrapper > table > tbody"
|
||||
)[0];
|
||||
this.sortable = Sortable.create(el, {
|
||||
ghostClass: "sortable-ghost",
|
||||
setData: function (dataTransfer) {
|
||||
dataTransfer.setData("Text", "");
|
||||
},
|
||||
onEnd: (evt) => {
|
||||
// console.log(evt,"evt")
|
||||
// console.log(evt.oldIndex, "oldIndex");
|
||||
// console.log(this.tableData)
|
||||
// console.log(evt.oldIndex, this.tableData.splice(evt.oldIndex, 1))
|
||||
const targetRow = this.tableData.splice(evt.oldIndex, 1)[0];
|
||||
// console.log(targetRow, "targetRow");
|
||||
// console.log(evt.newIndex, "newIndex");
|
||||
this.tableData.splice(evt.newIndex, 0, targetRow);
|
||||
},
|
||||
});
|
||||
},
|
||||
// 默认选择
|
||||
toggleSelection(rowData, selected) {
|
||||
if (rowData) {
|
||||
rowData.forEach((row) => {
|
||||
this.$refs.elTable.toggleRowSelection(row, selected);
|
||||
});
|
||||
} else {
|
||||
this.$refs.elTable.clearSelection();
|
||||
}
|
||||
},
|
||||
// 合计
|
||||
getSummaries(params) {
|
||||
const { columns, data } = params;
|
||||
const sums = [];
|
||||
columns.forEach((column, index) => {
|
||||
if (index === 0) {
|
||||
sums[index] = "合计";
|
||||
return;
|
||||
}
|
||||
this.SummariesIndex.forEach((el) => {
|
||||
if (index == el) {
|
||||
const values = data.map((item) => Number(item[column.property]));
|
||||
if (!values.every((value) => isNaN(value))) {
|
||||
sums[index] = values.reduce((prev, curr) => {
|
||||
const value = Number(curr);
|
||||
if (!isNaN(value)) {
|
||||
return prev + curr;
|
||||
} else {
|
||||
return prev;
|
||||
}
|
||||
}, 0);
|
||||
sums[index] = sums[index].toFixed(2);
|
||||
} else {
|
||||
sums[index] = "";
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
return sums;
|
||||
},
|
||||
},
|
||||
components: {
|
||||
BaseSelect,
|
||||
BaseDatePicker,
|
||||
baseCascader,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.el-table .warning-row {
|
||||
background: #ffe562;
|
||||
}
|
||||
|
||||
.el-table .success-row {
|
||||
background: #acf389;
|
||||
}
|
||||
|
||||
.el-table .denger-row {
|
||||
background: #e13501;
|
||||
}
|
||||
|
||||
.fiexTableBottm {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
>>> .el-radio__label {
|
||||
// display: none;
|
||||
}
|
||||
|
||||
.btnText {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mr-12 {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
::v-deep .cell {
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
::v-deep .el-table__row {
|
||||
height: 60px !important;
|
||||
background-color: #fcfcfc;
|
||||
}
|
||||
// ::v-deep .el-table .sort-caret.ascending {
|
||||
// top: 1px
|
||||
// }
|
||||
|
||||
// ::v-deep .el-table .sort-caret.descending {
|
||||
// bottom: 2px
|
||||
// }
|
||||
|
||||
// ::v-deep .el-table .caret-wrapper {
|
||||
// height: 23px;
|
||||
// }
|
||||
|
||||
// 解决滚动条问题
|
||||
// div ::v-deep .el-table--scrollable-x .el-table__body-wrapper{overflow-x: hidden!important;z-index: 2!important;}
|
||||
// div ::v-deep .el-table__footer-wrapper {overflow-x: auto;border-top: 1px solid #f4f4f4;}
|
||||
// ::v-deep .el-table {
|
||||
// overflow-x: auto;
|
||||
// }
|
||||
// ::v-deep .el-table__header-wrapper,
|
||||
// ::v-deep .el-table__body-wrapper,
|
||||
// ::v-deep .el-table__footer-wrapper {
|
||||
// overflow: visible;
|
||||
// }
|
||||
// ::v-deep .el-table::after {
|
||||
// position: relative;
|
||||
// }
|
||||
// ::v-deep .el-table--scrollable-x ::v-deep .el-table__body-wrapper {
|
||||
// overflow: visible;
|
||||
// }
|
||||
// ::v-deep .el-table { .el-table__body-wrapper { z-index: 2; } }
|
||||
</style>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
const addForm = [
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: 'input',
|
||||
title: '主数据名称',
|
||||
id: 'mdmName',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: 'textrea',
|
||||
title: '备注',
|
||||
id: 'remark',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
fontSize: 16
|
||||
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const tableColumn = [
|
||||
{
|
||||
id: 'mdmName',
|
||||
title: '主数据名称',
|
||||
align: 'left',
|
||||
width: 130
|
||||
},
|
||||
{
|
||||
id: 'mdmTypeName',
|
||||
title: '主数据类型'
|
||||
},
|
||||
{
|
||||
id: 'remark',
|
||||
title: '备注',
|
||||
tooltip: true
|
||||
},
|
||||
{
|
||||
id: 'createUserId',
|
||||
title: '创建人',
|
||||
tooltip: true
|
||||
},
|
||||
{
|
||||
id: 'createTime',
|
||||
title: '创建日期',
|
||||
tooltip: true
|
||||
},
|
||||
{
|
||||
id: 'modifyUserId',
|
||||
title: '修改人'
|
||||
},
|
||||
{
|
||||
id: 'modifyTime',
|
||||
title: '修改时间'
|
||||
}
|
||||
]
|
||||
const settingMenu = [
|
||||
{
|
||||
title: '基本信息',
|
||||
icon: 'masterDataMenu01',
|
||||
path: 'masterDataEdit'
|
||||
},
|
||||
{
|
||||
title: '数据源',
|
||||
icon: 'masterDataMenu02',
|
||||
path: 'dataOrigin'
|
||||
},
|
||||
{
|
||||
title: '显示信息',
|
||||
icon: 'masterDataMenu03',
|
||||
path: 'displayInfo'
|
||||
},
|
||||
{
|
||||
title: '数据来源',
|
||||
icon: 'masterDataMenu04',
|
||||
path: 'authorily'
|
||||
},
|
||||
{
|
||||
title: '分发设置',
|
||||
icon: 'masterDataMenu05',
|
||||
path: 'distribute'
|
||||
},
|
||||
{
|
||||
title: '日志',
|
||||
icon: 'masterDataMenu06',
|
||||
path: 'logsDeatil'
|
||||
},
|
||||
]
|
||||
const configData = {
|
||||
addForm,
|
||||
tableColumn,
|
||||
settingMenu
|
||||
}
|
||||
export default configData
|
||||
|
|
@ -0,0 +1,281 @@
|
|||
const dataOriginFormRow = [
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: "input",
|
||||
title: "表名",
|
||||
id: "clientPath",
|
||||
|
||||
row: 12,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16
|
||||
},
|
||||
{
|
||||
type: "input",
|
||||
title: "备注",
|
||||
id: "webPath",
|
||||
row: 12,
|
||||
disabled: false,
|
||||
required: false,
|
||||
fontSize: 16
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
const optionFormRow = [
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: "input",
|
||||
title: "中文名称",
|
||||
id: "chName",
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: "input",
|
||||
title: "英文名称",
|
||||
id: "enName",
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
pattern: /^[a-z][a-z0-9_]{0,50}$/,
|
||||
message: "须以小写字母开头，只能包含小写字母，数字和下划线，不能包含中文字符其他符号。",
|
||||
disabledOfId: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: "select",
|
||||
title: "字段类型",
|
||||
id: "filedType",
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
options: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: "num",
|
||||
title: "长度",
|
||||
id: "filedLength",
|
||||
max:255,
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: "input",
|
||||
title: "显示名",
|
||||
id: "title",
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16
|
||||
},
|
||||
],
|
||||
}
|
||||
, {
|
||||
elCol: [
|
||||
{
|
||||
type: "select",
|
||||
title: "宽度",
|
||||
id: "row",
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
options: [
|
||||
{
|
||||
label: "3",
|
||||
id: "3",
|
||||
}, {
|
||||
label: "6",
|
||||
id: "6",
|
||||
}, {
|
||||
label: "9",
|
||||
id: "9",
|
||||
}, {
|
||||
label: "12",
|
||||
id: "12",
|
||||
}, {
|
||||
label: "15",
|
||||
id: "15",
|
||||
}, {
|
||||
label: "18",
|
||||
id: "18",
|
||||
}, {
|
||||
label: "21",
|
||||
id: "21",
|
||||
}, {
|
||||
label: "24",
|
||||
id: "24",
|
||||
},
|
||||
]
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: "num",
|
||||
title: "单元格宽度",
|
||||
id: "width",
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: false,
|
||||
fontSize: 16,
|
||||
message:"px"
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: "select",
|
||||
title: "数据类型",
|
||||
id: "type",
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
options: [
|
||||
{
|
||||
label: "input",
|
||||
id: "input",
|
||||
}, {
|
||||
label: "datepick",
|
||||
id: "datepick",
|
||||
}, {
|
||||
label: "daterange",
|
||||
id: "daterange",
|
||||
}, {
|
||||
label: "radio",
|
||||
id: "radio",
|
||||
}, {
|
||||
label: "textrea",
|
||||
id: "textrea",
|
||||
}, {
|
||||
label: "select",
|
||||
id: "select",
|
||||
}, {
|
||||
label: "treeselect",
|
||||
id: "treeselect",
|
||||
}, {
|
||||
label: "number",
|
||||
id: "num",
|
||||
},
|
||||
]
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: "onecheck",
|
||||
title: "必填",
|
||||
id: "required",
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: false,
|
||||
fontSize: 16,
|
||||
options: [
|
||||
{
|
||||
label: "是",
|
||||
id: "true",
|
||||
}, {
|
||||
label: "否",
|
||||
id: "false",
|
||||
}
|
||||
]
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: "onecheck",
|
||||
title: "禁止修改",
|
||||
id: "disabled",
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: false,
|
||||
fontSize: 16,
|
||||
options: [
|
||||
{
|
||||
label: "是",
|
||||
id: "true",
|
||||
},
|
||||
]
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
const mainOptionRow = [
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: "input",
|
||||
title: "英文名",
|
||||
id: "dbName",
|
||||
disabledOfId: true,
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
pattern: /^[a-zA-Z][a-zA-Z0-9_]{0,50}$/,
|
||||
message: "须以字母开头且不能出现_外的字符与中文",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: "input",
|
||||
title: "表说明",
|
||||
id: "remark",
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
]
|
||||
const mainRule =
|
||||
{
|
||||
dbName: [
|
||||
{
|
||||
pattern: /^[a-zA-Z][a-zA-Z0-9_]{0,29}$/,
|
||||
message: "必须以字母开头，后续字符可包含字母、数字和下划线，总长度不超过30个字符。",
|
||||
trigger: "change",
|
||||
},
|
||||
],
|
||||
}
|
||||
const config = {
|
||||
dataOriginFormRow,
|
||||
optionFormRow,
|
||||
mainOptionRow,
|
||||
mainRule
|
||||
}
|
||||
export default config
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
|
|
@ -0,0 +1,664 @@
|
|||
<template>
|
||||
<div class="wrap">
|
||||
<!--数据表-->
|
||||
<div class="mainTable">
|
||||
<div class="rule">
|
||||
<div class="name">单据规则</div>
|
||||
<template v-if="!receiptsTableData.length">
|
||||
<div class="value">尚未设置</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="value">
|
||||
<div class="receiptsItem" v-for="(item,index) in receiptsTableData">{{ item.dbValue }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="btn" @click="ruleAddHandle">
|
||||
<img src="./images/设置.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="bigTitle" style="margin: 10px 0">数据表</div>
|
||||
<div class="table">
|
||||
<BaseTable
|
||||
ref="mainTable"
|
||||
:tableData="mainTableData"
|
||||
:tabLoading="mainTabLoading"
|
||||
:tableColumn="mainTableColumn"
|
||||
:border="false"
|
||||
tableMaxHeight="600"
|
||||
:highlightCurrent="true"
|
||||
@radioChange="mainOnClick"
|
||||
>
|
||||
<template #dbType="{row}">
|
||||
{{ row.dbType === '1' ? '主表' : '子表' }}
|
||||
</template>
|
||||
<template #operation="{row}">
|
||||
<div class="btnList">
|
||||
<div class="settingBtn" @click="mainTableEditHandle(row)">
|
||||
<img src="./images/设置.png" alt="">
|
||||
</div>
|
||||
<div class="deleBtn" @click="mainDeleOnFunc(row)">
|
||||
<img src="./images/删除.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</BaseTable>
|
||||
<div class="mainAddRow">
|
||||
<el-link
|
||||
type="primary"
|
||||
@click="addMainAddRow"
|
||||
:underline="false"
|
||||
>+ 数据表添加
|
||||
</el-link
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 表字段-->
|
||||
<div class="sonTable">
|
||||
<div class="bigTitle">表字段</div>
|
||||
<div class="table">
|
||||
<BaseTable
|
||||
ref="activedTable"
|
||||
:tableData="activedTableData"
|
||||
:tabLoading="activedTabLoading"
|
||||
:tableColumn="activedTableColumn"
|
||||
:border="false"
|
||||
tableMaxHeight="650"
|
||||
:highlightCurrent="true"
|
||||
@radioChange="activedOnClick"
|
||||
@onFunc="activedOnFunc"
|
||||
>
|
||||
<template #filedType="{row}">
|
||||
{{ dataTypeDist[row.filedType] }}
|
||||
</template>
|
||||
<template #operation="{row}">
|
||||
<div class="btnList">
|
||||
<div class="settingBtn" @click="sonTableEditHandle(row)">
|
||||
<img src="./images/设置.png" alt="">
|
||||
</div>
|
||||
<div class="deleBtn" @click="activedOnFunc(row)">
|
||||
<img src="./images/删除.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</BaseTable>
|
||||
<div class="mainAddRow" v-if="mainTempClick.id">
|
||||
<el-link
|
||||
v-if="mainTempClick.id"
|
||||
type="primary"
|
||||
@click="activedAddRow"
|
||||
:underline="false"
|
||||
>+ 表字段添加
|
||||
</el-link
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 单据规则-->
|
||||
<base-right-dialog
|
||||
ref="baseRightDialog"
|
||||
:footerShow="true"
|
||||
:dialogVisible.sync="ruleAddDialogShow"
|
||||
title="单据规则"
|
||||
@handleClose="ruleAddDialogShow=false"
|
||||
:submitShow="true"
|
||||
:size="'50%'"
|
||||
@handleConfirmClick="ruleAddSaveHanlde"
|
||||
>
|
||||
<div class="receiptsTable">
|
||||
<ruleAddTable ref="ruleAddTable"></ruleAddTable>
|
||||
</div>
|
||||
</base-right-dialog>
|
||||
<!-- 数据表 -->
|
||||
<base-right-dialog
|
||||
ref="mainTableAddtDialog"
|
||||
:footerShow="true"
|
||||
:dialogVisible.sync="mainTableDialogShow"
|
||||
title="数据表"
|
||||
@handleClose="mainTableDialogShow=false"
|
||||
:submitShow="true"
|
||||
:size="'30%'"
|
||||
@handleConfirmClick="mainTableSaveHandle"
|
||||
>
|
||||
<div class="mainTable">
|
||||
<mainTable ref="mainTable"></mainTable>
|
||||
</div>
|
||||
</base-right-dialog>
|
||||
<!-- 表字段-->
|
||||
<base-right-dialog
|
||||
ref="sonTableAddtDialog"
|
||||
:footerShow="true"
|
||||
:dialogVisible.sync="sonTableDialogShow"
|
||||
title="表字段"
|
||||
@handleClose="sonTableDialogShow=false"
|
||||
:submitShow="true"
|
||||
:size="'40%'"
|
||||
@handleConfirmClick="sonTableSaveHandle"
|
||||
>
|
||||
<div class="mainTable">
|
||||
<sonTable ref="sonTable" :activedTableData="activedTableData" :mainTempClick="mainTempClick"
|
||||
@sonSaveHandle="sonSaveHandle"
|
||||
></sonTable>
|
||||
</div>
|
||||
</base-right-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import sonTable from '@/views/masterDataOptions/dataOrigin/sonTable.vue'
|
||||
import mainTable from '@/views/masterDataOptions/dataOrigin/mainTable.vue'
|
||||
import ruleAddTable from '@/views/masterDataOptions/dataOrigin/ruleAddTable.vue'
|
||||
import BaseTable from '@/views/intergrationTask/compoments/baseTable.vue'
|
||||
import configData from './configData'
|
||||
import { getApiModuleApi } from '@/api/apiChunks/index.js'
|
||||
import baseNewForm from '../compoments/baseNewForm'
|
||||
import { deepClone } from '@/utils/index.js'
|
||||
import baseDialog from '@/views/integrationOption/compoments/baseDialog'
|
||||
import baseForm from '@/components/base/baseNewForm/index.vue'
|
||||
import baseRightDialog from '@/components/base/baseRightDialog/index.vue'
|
||||
import { authApi } from '@/api/apis/auth'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
mainTempClick: {},//数据表当前点击行
|
||||
mainTableData: [],//主表数据
|
||||
mainTabLoading: false,//主表loading
|
||||
mainTableColumn: [
|
||||
{ title: '英文名', id: 'dbName' },
|
||||
{ title: '表类型', id: 'dbType' },
|
||||
{ title: '表说明', id: 'remark' },
|
||||
{ title: '操作', id: 'operation' }
|
||||
],
|
||||
mainFunData: [],//主表操栏
|
||||
activedTableData: [],//子表数据（单击主表后赋值）
|
||||
activedTabLoading: false,//选中表loading
|
||||
activedTableColumn: [
|
||||
{ title: '中文名', id: 'chName' },
|
||||
{ title: '英文名', id: 'enName' },
|
||||
{ title: '字段类型', id: 'filedType' },
|
||||
{ title: '长度', id: 'filedLength' },
|
||||
{ title: '操作', id: 'operation' }
|
||||
],//子表行数据
|
||||
activedFunData: [
|
||||
{
|
||||
text: '删除',
|
||||
color: 'red'
|
||||
}
|
||||
],//子表操作栏
|
||||
ruleAddDialogShow: false,//单据规则
|
||||
receiptsTableData: [],//单据规则表单
|
||||
mainTableDialogShow: false,//主数据弹窗
|
||||
//数据类型字段
|
||||
dataTypeDist: {},
|
||||
//表字段下啦
|
||||
fieldTypeOptions: [],
|
||||
sonTableDialogShow: false,//字表dialog显示
|
||||
serviceOptions: []//表字段服务名称下啦
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//表字段字段类型下啦初始化
|
||||
async initSelect() {
|
||||
//数据类型下拉
|
||||
const type = await getApiModuleApi({
|
||||
tl: 'generalServiceImpl',
|
||||
as: 'dictionaryshop',
|
||||
dj: 'selectDictionaryshop'
|
||||
}, { tab_name: 'mdm', column_name: 'mdm_filed_type' })
|
||||
this.fieldTypeOptions = []
|
||||
type.attribute.forEach(item => {
|
||||
//创造数据字段给表单插槽显示（字段类型）
|
||||
this.$set(this.dataTypeDist, item.column_value, item.column_content)
|
||||
this.fieldTypeOptions.push({
|
||||
label: item.column_content,
|
||||
id: item.column_value
|
||||
})
|
||||
})
|
||||
this.serviceOptions = []
|
||||
//服务名下拉
|
||||
const service = await getApiModuleApi({
|
||||
tl: 'mdmModuleService',
|
||||
as: '',
|
||||
dj: 'queryMdmService'
|
||||
}, { remark: '' })
|
||||
service.attribute.forEach(item => {
|
||||
console.log(item, 'item')
|
||||
this.serviceOptions.push({
|
||||
id: item.dbName,
|
||||
label: item.remark,
|
||||
dbId: item.id,
|
||||
mdmId: item.mdmId
|
||||
|
||||
})
|
||||
})
|
||||
},
|
||||
// 主表上方表格行点击
|
||||
async mainOnClick(val) {
|
||||
if (val.index === -1) return
|
||||
console.log(val)
|
||||
//将当前点击行存储
|
||||
this.mainTempClick = val
|
||||
//请求数据表对应的表字段
|
||||
const res = await authApi('mdmModuleService', '', 'queryMdmDbField', '', {
|
||||
mdmId: this.$route.query.id,
|
||||
dbId: this.mainTempClick.id
|
||||
})
|
||||
this.activedTableData = res.attribute
|
||||
},
|
||||
// 主表按钮(删除）
|
||||
mainDeleOnFunc(row, item) {
|
||||
console.log(row, 'row')
|
||||
let msg = row.dbType == 1 ? '删除主表将会导致所有相关子表一并删除，是否确认继续删除操作？' : '是否确定删除？'
|
||||
this.$confirm(msg)
|
||||
.then(async(_) => {
|
||||
this.openLoading('submit')
|
||||
const res = await authApi('mdmModuleService', '', 'deleteMdmDb', '', {
|
||||
mdmId: this.$route.query.id,
|
||||
...row
|
||||
})
|
||||
this.$vmNews('删除成功！', 'success')
|
||||
if (this.mainTempClick.id === row.id || row.dbType == 1) {
|
||||
this.activedTableData = []
|
||||
this.mainTempClick = {}
|
||||
}
|
||||
this.getMainTableHandle()
|
||||
})
|
||||
.catch((_) => {
|
||||
})
|
||||
},
|
||||
//数据表添加按钮
|
||||
addMainAddRow() {
|
||||
if (!this.receiptsTableData.length) {
|
||||
this.$vmNews('请添加单据规则后，再添加数据表。')
|
||||
return
|
||||
}
|
||||
this.mainTableDialogShow = true
|
||||
this.$nextTick(() => {
|
||||
//重置表单
|
||||
this.$refs.mainTable.$refs.mainOptionForm.resetFields()
|
||||
this.$refs.mainTable.mainOptionForm = {}
|
||||
//将英文名改为可编辑状态
|
||||
this.$refs.mainTable.mainOptionRow[0].elCol.disabled = false
|
||||
})
|
||||
},
|
||||
//数据表编辑
|
||||
mainTableEditHandle(row) {
|
||||
this.mainTableDialogShow = true
|
||||
this.$nextTick(() => {
|
||||
//重置表单
|
||||
this.$refs.mainTable.$refs.mainOptionForm.resetFields()
|
||||
this.$refs.mainTable.mainOptionForm = JSON.parse(JSON.stringify(row))
|
||||
//将英文名改为可编辑状态
|
||||
this.$refs.mainTable.mainOptionRow[0].elCol.disabled = true
|
||||
})
|
||||
},
|
||||
//表字段单击事件
|
||||
activedOnClick(val) {
|
||||
},
|
||||
//表字段点击操作
|
||||
activedOnFunc(row) {
|
||||
this.$confirm('是否确定删除？')
|
||||
.then(async(_) => {
|
||||
this.openLoading('submit')
|
||||
const res = await authApi('mdmModuleService', '', 'deleteMdmDbField', '', {
|
||||
id: row.id,
|
||||
mdmId: this.$route.query.id,
|
||||
dbId: this.mainTempClick.id,
|
||||
dbName: this.mainTempClick.dbName,
|
||||
enName: row.enName,
|
||||
filedType: row.filedType
|
||||
})
|
||||
this.$vmNews('删除成功', 'success')
|
||||
this.mainOnClick(this.mainTempClick)
|
||||
this.activedTableData.splice(row.index, 1)
|
||||
})
|
||||
.catch((_) => {
|
||||
})
|
||||
},
|
||||
//表字段点击设置
|
||||
sonTableEditHandle(row) {
|
||||
this.sonTableDialogShow = true
|
||||
this.$nextTick(() => {
|
||||
//重置一切表单
|
||||
this.$refs.sonTable.$refs.optionForm.resetFields()
|
||||
this.$refs.sonTable.$refs.typeOptionForm.resetFields()
|
||||
this.$refs.sonTable.$refs.propertyForm.resetFields()
|
||||
this.$refs.sonTable.optionRuleForm = {}
|
||||
this.$refs.sonTable.typeOptionRuleForm = {}
|
||||
this.$refs.sonTable.propertyRuleForm = {}
|
||||
this.$refs.sonTable.propertyActiveList = []
|
||||
this.$refs.sonTable.propertyFormRow = []
|
||||
this.$refs.sonTable.typeOptionFormRow = []
|
||||
//字段类型下啦
|
||||
this.$refs.sonTable.optionFormRow[2].elCol[0].options = this.fieldTypeOptions
|
||||
this.$refs.sonTable.serviceOptions = this.serviceOptions
|
||||
this.$refs.sonTable.activedOnClick(row)
|
||||
|
||||
})
|
||||
},
|
||||
//表字段添加按钮
|
||||
activedAddRow() {
|
||||
this.sonTableDialogShow = true
|
||||
this.$nextTick(() => {
|
||||
//重置一切表单
|
||||
this.$refs.sonTable.$refs.optionForm.resetFields()
|
||||
this.$refs.sonTable.$refs.typeOptionForm.resetFields()
|
||||
this.$refs.sonTable.$refs.propertyForm.resetFields()
|
||||
this.$refs.sonTable.optionRuleForm = {}
|
||||
this.$set(this.$refs.sonTable.optionRuleForm, 'required', false)
|
||||
this.$set(this.$refs.sonTable.optionRuleForm, 'disabled', false)
|
||||
this.$refs.sonTable.typeOptionRuleForm = {}
|
||||
this.$refs.sonTable.propertyRuleForm = {}
|
||||
this.$refs.sonTable.propertyActiveList = []
|
||||
this.$refs.sonTable.propertyFormRow = []
|
||||
this.$refs.sonTable.typeOptionFormRow = []
|
||||
this.$refs.sonTable.activedTableRow = {}
|
||||
//字段类型下啦
|
||||
this.$refs.sonTable.optionFormRow[2].elCol[0].options = this.fieldTypeOptions
|
||||
this.$refs.sonTable.serviceOptions = this.serviceOptions
|
||||
|
||||
})
|
||||
},
|
||||
//单据规则方法打开
|
||||
ruleAddHandle() {
|
||||
this.ruleAddDialogShow = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.ruleAddTable.ruleAddTableData = JSON.parse(JSON.stringify(this.receiptsTableData))
|
||||
})
|
||||
|
||||
},
|
||||
//单据规则添加方法(保存）
|
||||
async ruleAddSaveHanlde() {
|
||||
let tempTableData = this.$refs.ruleAddTable.ruleAddTableData
|
||||
let type = false
|
||||
let flag = tempTableData.some((item, index) => {
|
||||
if (!item.dbType || !item.dbValue) {
|
||||
this.$vmNews(`请选择${index + 1}行的类型并填写或选择规则`, 'warning')
|
||||
return true
|
||||
} else if (item.dbType === '4' && index + 1 !== tempTableData.length) {
|
||||
type = true
|
||||
this.$vmNews(`流水号只允许在最后一行`, 'warning')
|
||||
return true
|
||||
} else if (item.dbType === '4') {
|
||||
type = true
|
||||
}
|
||||
})
|
||||
if (!type) {
|
||||
this.$vmNews(`请添加流水号`, 'warning')
|
||||
return
|
||||
}
|
||||
if (flag) return
|
||||
this.openLoading('submit')
|
||||
const res = await authApi('mdmModuleService', '', 'saveOrUpdateMdmTableCodeRule', '', {
|
||||
id: this.$route.query.id,
|
||||
mdmTableCodeRuleEntityList: tempTableData
|
||||
})
|
||||
this.ruleAddDialogShow = false
|
||||
this.$vmNews('添加单据规则成功', 'success')
|
||||
//调用单据规则
|
||||
this.getRuleHandle()
|
||||
},
|
||||
//单据规则获取
|
||||
async getRuleHandle() {
|
||||
this.openLoading('submit')
|
||||
const res = await authApi('mdmModuleService', '', 'getMdmTableCodeRule', '', {
|
||||
mdmId: this.$route.query.id
|
||||
})
|
||||
this.receiptsTableData = res.attribute
|
||||
},
|
||||
//数据表保存
|
||||
mainTableSaveHandle() {
|
||||
this.$refs.mainTable.$refs.mainOptionForm.$refs['ruleForm'].validate(async(valid) => {
|
||||
if (valid) {
|
||||
//主数据英文名黑名单
|
||||
let blacklist = ['id', 'document_rule', 'document_rule_num', 'data_status', 'add_status', 'update_status', 'delete_status', 'sorts', 'create_user_id', 'create_time', 'modify_user_id', 'modify_time', 'sts', 'org_id', 'company_id', 'data_id']
|
||||
let form = this.$refs.mainTable.mainOptionForm
|
||||
//判断黑名单
|
||||
if (blacklist.includes(form.dbName)) {
|
||||
this.$vmNews('当前英文名为系统默认字段，请修改')
|
||||
return
|
||||
}
|
||||
//判断是主表还是子表 "dbType":"2",//类型 1、主表 2、明细
|
||||
console.log(this.mainTableData.length && !form.id, 'this.mainTableData.length && !form.id', form, this.mainTableData.length)
|
||||
if (!form.id) {
|
||||
if (this.mainTableData.length) {
|
||||
this.$set(form, 'dbType', 2)
|
||||
} else {
|
||||
this.$set(form, 'dbType', 1)
|
||||
}
|
||||
}
|
||||
|
||||
//判断有没有id如果有走编辑 没有走新增
|
||||
if (form.id) {
|
||||
this.openLoading('submit')
|
||||
const res = await authApi('mdmModuleService', '', 'updateMdmDb', '', {
|
||||
mdmId: this.$route.query.id,
|
||||
...form
|
||||
})
|
||||
if (res.status == 200) {
|
||||
this.$vmNews('保存成功', 'success')
|
||||
this.mainTableDialogShow = false
|
||||
this.getMainTableHandle()
|
||||
this.initSelect()
|
||||
}
|
||||
} else {
|
||||
this.openLoading('submit')
|
||||
const res = await authApi('mdmModuleService', '', 'saveMdmDb', '', {
|
||||
mdmId: this.$route.query.id,
|
||||
...form
|
||||
})
|
||||
if (res.status == 200) {
|
||||
this.$vmNews('保存成功', 'success')
|
||||
this.mainTableDialogShow = false
|
||||
this.getMainTableHandle()
|
||||
this.initSelect()
|
||||
}
|
||||
}
|
||||
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
//表字段保存
|
||||
sonTableSaveHandle() {
|
||||
this.$refs.sonTable.$refs.optionForm.submitForm()
|
||||
|
||||
},
|
||||
//获取数据表
|
||||
async getMainTableHandle() {
|
||||
const res = await authApi('mdmModuleService', '', 'queryMdmDb', '', {
|
||||
mdmId: this.$route.query.id
|
||||
})
|
||||
this.mainTableData = res.attribute
|
||||
},
|
||||
//表字段校验通过正式开始保存
|
||||
async sonSaveHandle(params) {
|
||||
if (params.id) {
|
||||
this.openLoading('submit')
|
||||
const res = await authApi('mdmModuleService', '', 'updateMdmDbField', '', params)
|
||||
this.$vmNews('保存成功！', 'success')
|
||||
this.sonTableDialogShow = false
|
||||
//重新请求表字段
|
||||
this.mainOnClick(this.mainTempClick)
|
||||
|
||||
} else {
|
||||
this.openLoading('submit')
|
||||
const res = await authApi('mdmModuleService', '', 'saveMdmDbField', '', params)
|
||||
this.$vmNews('保存成功！', 'success')
|
||||
this.sonTableDialogShow = false
|
||||
//重新请求表字段
|
||||
this.mainOnClick(this.mainTempClick)
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
components: {
|
||||
baseRightDialog, baseForm,
|
||||
baseNewForm,
|
||||
BaseTable,
|
||||
baseDialog,
|
||||
ruleAddTable,
|
||||
mainTable,
|
||||
sonTable
|
||||
},
|
||||
created() {
|
||||
//调用单据规则
|
||||
this.getRuleHandle()
|
||||
//调用获取数据表
|
||||
this.getMainTableHandle()
|
||||
//表字段的数据类型下啦获取
|
||||
this.initSelect()
|
||||
//调用左侧选中状态
|
||||
this.$emit('flashActive', 1)
|
||||
},
|
||||
watch: {},
|
||||
computed: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep .el-button {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
margin-left: 5px;
|
||||
border-radius: 8px;
|
||||
height: calc(100%);
|
||||
|
||||
.mainAddRow {
|
||||
margin-top: 10px;
|
||||
border: 1px dotted #ccc;
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.bigTitle {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
color: #333333;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.mainTable {
|
||||
flex: 1;
|
||||
padding: 30px 20px 20px;
|
||||
border-right: 1px solid #EBEBEB;;
|
||||
|
||||
.rule {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
.name {
|
||||
margin-right: 10px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
line-height: 22px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid #ebebeb;
|
||||
padding: 10px 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-left: 15px;
|
||||
cursor: pointer;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background: #EBEBED;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
margin-top: 20px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.sonTable {
|
||||
flex: 1;
|
||||
padding: 30px 20px 20px;
|
||||
|
||||
.table {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btnList {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.settingBtn {
|
||||
cursor: pointer;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: #EBEBED;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.deleBtn {
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: #EBEBED;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .el-table{
|
||||
max-height: calc(100vh - 230px) !important;
|
||||
}
|
||||
::v-deep .el-table__body-wrapper{
|
||||
max-height: calc(100vh - 230px) !important;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,83 @@
|
|||
<template>
|
||||
<div class="mainTable">
|
||||
<baseNewForm
|
||||
ref="mainOptionForm"
|
||||
:spanNumber="24"
|
||||
:isFunBtn="false"
|
||||
:formRow="mainOptionRow"
|
||||
:ruleForm="mainOptionForm"
|
||||
:labelPosition="'top'"
|
||||
:rules="rules"
|
||||
@onSubmit="mainOptionOnSubmit"
|
||||
>
|
||||
</baseNewForm>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import baseNewForm from '../compoments/baseNewForm'
|
||||
|
||||
export default {
|
||||
name: 'mainTable',
|
||||
components: {
|
||||
baseNewForm
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mainOptionRow: [
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: 'input',
|
||||
title: '英文名',
|
||||
id: 'dbName',
|
||||
disabledOfId: true,
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
pattern: /^[a-zA-Z][a-zA-Z0-9_]{0,50}$/,
|
||||
message: '须以字母开头且不能出现_外的字符与中文'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: 'input',
|
||||
title: '表说明',
|
||||
id: 'remark',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
mainOptionForm: {},
|
||||
rules: {
|
||||
dbName: [{
|
||||
required: true,
|
||||
message: '请输入源数据',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
remark: [{
|
||||
required: true,
|
||||
message: '请输入源数据',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
mainOptionOnSubmit() {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,172 @@
|
|||
<template>
|
||||
<div class="ruleAddTable">
|
||||
<BaseTable
|
||||
ref="receiptsTable"
|
||||
:showIndex="true"
|
||||
:tableData="ruleAddTableData"
|
||||
:tableColumn="receiptsTableColumn"
|
||||
:border="false"
|
||||
:funData="receiptsFunData"
|
||||
tableHeight="60vh"
|
||||
@onFunc="receiptsOnFunc"
|
||||
>
|
||||
<template #dbType="{row}">
|
||||
<el-select v-model="row['dbType']" placeholder="请选择"
|
||||
@change="(val)=>ruleTypeSeleceChangHandle(val,row)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in ruleTypeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
<template #dbValue="{row}">
|
||||
<div v-if="!row['dbType']">请选择格式类型</div>
|
||||
<div v-else-if="row['dbType'] === '1'">{{ row.dbValue }}</div>
|
||||
<div v-else-if="row['dbType'] === '2'">
|
||||
<el-input v-model="row.dbValue"></el-input>
|
||||
</div>
|
||||
<div v-else-if="row['dbType'] === '3'">
|
||||
<el-select v-model="row.dbValue" placeholder="请选择" style="width: 100%;">
|
||||
<el-option
|
||||
v-for="item in dateOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div v-else-if="row['dbType'] === '4'">
|
||||
<el-input v-model="row.dbValue" @input="(val)=>integerNumber(val,row)"></el-input>
|
||||
</div>
|
||||
</template>
|
||||
<template #operation="{row}">
|
||||
<div class="deleBtn" @click="receiptsOnFunc(row)">
|
||||
<img src="./images/删除.png" alt="">
|
||||
</div>
|
||||
</template>
|
||||
</BaseTable>
|
||||
<div class="receiptsAddRow" style="margin-top: 30px;
|
||||
border: 1px dotted #ccc;
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
line-height: 50px;"
|
||||
>
|
||||
<el-link
|
||||
type="primary"
|
||||
@click="receiptsAddRow"
|
||||
:underline="false"
|
||||
>+ 添加
|
||||
</el-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseTable from '@/views/intergrationTask/compoments/baseTable.vue'
|
||||
|
||||
export default {
|
||||
name: 'ruleAddTable',
|
||||
components: { BaseTable },
|
||||
data() {
|
||||
return {
|
||||
receiptsTableData: [],//单据规则表单
|
||||
ruleAddTableData: [],//单据规则添加用表单
|
||||
receiptsTableColumn: [
|
||||
{
|
||||
title: '类型',
|
||||
id: 'dbType'
|
||||
},
|
||||
{
|
||||
title: '格式规则',
|
||||
id: 'dbValue'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
id: 'operation',
|
||||
width: 70
|
||||
}
|
||||
],//单据规则表单
|
||||
ruleTypeOptions: [
|
||||
{
|
||||
label: '连接符号',
|
||||
value: '1'
|
||||
}, {
|
||||
label: '字符串',
|
||||
value: '2'
|
||||
}, {
|
||||
label: '日期',
|
||||
value: '3'
|
||||
}, {
|
||||
label: '流水号',
|
||||
value: '4'
|
||||
}
|
||||
],//单据规则下啦
|
||||
receiptsFunData: [],//单据规则按钮
|
||||
dateOptions: [
|
||||
{
|
||||
label: 'yyyy-MM-dd',
|
||||
value: 'yyyy-MM-dd'
|
||||
}, {
|
||||
label: 'yyyyMMdd',
|
||||
value: 'yyyyMMdd'
|
||||
}, {
|
||||
label: 'yyyy-MM-dd HH:mm:ss',
|
||||
value: 'yyyy-MM-dd HH:mm:ss'
|
||||
}, {
|
||||
label: 'yyyyMMddHHmmss',
|
||||
value: 'yyyyMMddHHmmss'
|
||||
}, {
|
||||
label: 'yyyyMMddHHmmssSSS',
|
||||
value: 'yyyyMMddHHmmssSSS'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//规则表格删除
|
||||
receiptsOnFunc(row) {
|
||||
this.ruleAddTableData.splice(row.index, 1)
|
||||
},
|
||||
//单据规则添加行
|
||||
receiptsAddRow() {
|
||||
this.ruleAddTableData.push({})
|
||||
},
|
||||
//单据规则下拉改变事件
|
||||
ruleTypeSeleceChangHandle(val, row) {
|
||||
this.$set(row, 'dbValue', '')
|
||||
if (val === '1') {
|
||||
row['dbValue'] = '-'
|
||||
}
|
||||
},
|
||||
//流水号修改事件
|
||||
integerNumber(val, row) {
|
||||
row['dbValue'] = row['dbValue'].replace(/[^\d]/g, '')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
.deleBtn {
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: #EBEBED;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> img {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,866 @@
|
|||
<template>
|
||||
<div class="sonTable">
|
||||
<div class="optionForm">
|
||||
<baseNewForm
|
||||
ref="optionForm"
|
||||
:spanNumber="24"
|
||||
:isFunBtn="false"
|
||||
:formRow="optionFormRow"
|
||||
:ruleForm="optionRuleForm"
|
||||
:labelPosition="'top'"
|
||||
@onSelect="selectChangeHanlde"
|
||||
@inputBlur="optionFormInputBlur"
|
||||
@onSubmit="optionOnSubmit"
|
||||
:rules="rules"
|
||||
>
|
||||
</baseNewForm>
|
||||
<baseNewForm
|
||||
:rules="rules"
|
||||
ref="typeOptionForm"
|
||||
:spanNumber="24"
|
||||
:isFunBtn="false"
|
||||
:formRow="typeOptionFormRow"
|
||||
:ruleForm="typeOptionRuleForm"
|
||||
:labelPosition="'top'"
|
||||
@onSelect="typeSelectChangeHanlde"
|
||||
@onSubmit="typeOptionOnSubmit"
|
||||
>
|
||||
</baseNewForm>
|
||||
<baseNewForm
|
||||
:rules="rules"
|
||||
ref="propertyForm"
|
||||
:spanNumber="24"
|
||||
:isFunBtn="false"
|
||||
:formRow="propertyFormRow"
|
||||
:ruleForm="propertyRuleForm"
|
||||
:labelPosition="'top'"
|
||||
@onSubmit="propertyOnSubmit"
|
||||
|
||||
>
|
||||
</baseNewForm>
|
||||
</div>
|
||||
<div class="smtitle">
|
||||
可选控间属性
|
||||
</div>
|
||||
<div class="checkBoxList">
|
||||
<el-checkbox-group v-model="propertyActiveList"
|
||||
@change="propertyActiveListChangeHanlde"
|
||||
>
|
||||
<el-checkbox v-for="(item,index) in propertyList" :label="item.id" :key="item.id">{{
|
||||
item.label
|
||||
}}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import baseNewForm from '../compoments/baseNewForm.vue'
|
||||
import { deepClone } from '@/utils'
|
||||
import { getApiModuleApi } from '@/api/apiChunks'
|
||||
|
||||
export default {
|
||||
name: 'sonTable',
|
||||
props: {
|
||||
activedTableData: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
mainTempClick: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
rules:{
|
||||
chName: [{
|
||||
required: true,
|
||||
message: '请输入源数据',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
enName: [{
|
||||
required: true,
|
||||
message: '请输入源数据',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
filedType: [{
|
||||
required: true,
|
||||
message: '请输入源数据',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
filedLength: [{
|
||||
required: true,
|
||||
message: '请输入源数据',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
title: [{
|
||||
required: true,
|
||||
message: '请输入源数据',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
row: [{
|
||||
required: true,
|
||||
message: '请输入源数据',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
type: [{
|
||||
required: true,
|
||||
message: '请输入源数据',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
service: [{
|
||||
required: true,
|
||||
message: '请输入源数据',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
label: [{
|
||||
required: true,
|
||||
message: '请输入源数据',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
upId: [{
|
||||
required: true,
|
||||
message: '请输入源数据',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
},
|
||||
activedTableRow: {},//当前选中行
|
||||
optionFormRow: [
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: 'input',
|
||||
title: '中文名称',
|
||||
id: 'chName',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: 'input',
|
||||
title: '英文名称',
|
||||
id: 'enName',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
pattern: /^[a-z][a-z0-9_]{0,50}$/,
|
||||
message: '必须以小写字母开头，只能包含小写字母、数字和下划线，不能包含中文字符或其他符号。',
|
||||
disabledOfId: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: 'select',
|
||||
title: '字段类型',
|
||||
id: 'filedType',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
options: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: 'num',
|
||||
title: '长度',
|
||||
id: 'filedLength',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
max: 255
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: 'input',
|
||||
title: '显示名',
|
||||
id: 'title',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16
|
||||
}
|
||||
]
|
||||
}
|
||||
, {
|
||||
elCol: [
|
||||
{
|
||||
type: 'select',
|
||||
title: '宽度',
|
||||
id: 'row',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
options: [
|
||||
{
|
||||
label: '3',
|
||||
id: '3'
|
||||
}, {
|
||||
label: '6',
|
||||
id: '6'
|
||||
}, {
|
||||
label: '9',
|
||||
id: '9'
|
||||
}, {
|
||||
label: '12',
|
||||
id: '12'
|
||||
}, {
|
||||
label: '15',
|
||||
id: '15'
|
||||
}, {
|
||||
label: '18',
|
||||
id: '18'
|
||||
}, {
|
||||
label: '21',
|
||||
id: '21'
|
||||
}, {
|
||||
label: '24',
|
||||
id: '24'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: 'num',
|
||||
title: '单元格宽度',
|
||||
id: 'width',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: false,
|
||||
fontSize: 16,
|
||||
message: 'px'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: 'select',
|
||||
title: '数据类型',
|
||||
id: 'type',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
options: [
|
||||
{
|
||||
label: 'input',
|
||||
id: 'input'
|
||||
}, {
|
||||
label: 'datepick',
|
||||
id: 'datepick'
|
||||
},
|
||||
// {
|
||||
// label: 'daterange',
|
||||
// id: 'daterange'
|
||||
// },
|
||||
{
|
||||
label: 'radio',
|
||||
id: 'radio'
|
||||
}, {
|
||||
label: 'textrea',
|
||||
id: 'textrea'
|
||||
}, {
|
||||
label: 'select',
|
||||
id: 'select'
|
||||
}, {
|
||||
label: 'treeselect',
|
||||
id: 'treeselect'
|
||||
},
|
||||
{
|
||||
label: 'number',
|
||||
id: 'num'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: 'onecheck',
|
||||
title: '必填',
|
||||
id: 'required',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: false,
|
||||
fontSize: 16,
|
||||
options: [
|
||||
{
|
||||
label: '是',
|
||||
id: 'true'
|
||||
}, {
|
||||
label: '否',
|
||||
id: 'false'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: 'onecheck',
|
||||
title: '禁止修改',
|
||||
id: 'disabled',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: false,
|
||||
fontSize: 16,
|
||||
options: [
|
||||
{
|
||||
label: '是',
|
||||
id: 'true'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
optionRuleForm: {},//表字段options数据
|
||||
//type选中后的表
|
||||
typeOptionFormRow: [],
|
||||
typeOptionRuleForm: {},//表字段根据type数据
|
||||
propertyFormRow: [],//可选属性表表格（渲染）
|
||||
propertyRuleForm: {},//可选属性表数据
|
||||
propertyActiveList: [],//可选属性选中列表（v-model)
|
||||
propertyList: [
|
||||
{
|
||||
label: '大于',
|
||||
id: 'up'
|
||||
}, {
|
||||
label: '小于',
|
||||
id: 'low'
|
||||
},
|
||||
{
|
||||
label: '正则',
|
||||
id: 'pattern'
|
||||
},
|
||||
{ label: '正则提示', id: 'message' }
|
||||
],//可选属性列表
|
||||
//可选属性表数据字典
|
||||
typeDist: {
|
||||
select: [
|
||||
{
|
||||
type: 'select',
|
||||
id: 'service',
|
||||
title: '服务名称',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
options: []
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
id: 'label',
|
||||
title: 'label',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
options: []
|
||||
}, {
|
||||
type: 'input',
|
||||
id: 'value',
|
||||
title: 'value',
|
||||
row: 24,
|
||||
disabled: true,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
options: []
|
||||
}
|
||||
],
|
||||
radio: [
|
||||
{
|
||||
type: 'select',
|
||||
id: 'service',
|
||||
title: '服务名称',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
options: []
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
id: 'label',
|
||||
title: 'label',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
options: []
|
||||
}, {
|
||||
type: 'input',
|
||||
id: 'value',
|
||||
title: 'value',
|
||||
row: 24,
|
||||
disabled: true,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
options: []
|
||||
}
|
||||
],
|
||||
treeselect: [
|
||||
{
|
||||
type: 'select',
|
||||
id: 'service',
|
||||
title: '服务名称',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
options: []
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
id: 'label',
|
||||
title: 'label',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
options: []
|
||||
}, {
|
||||
type: 'input',
|
||||
id: 'value',
|
||||
title: 'value',
|
||||
row: 24,
|
||||
disabled: true,
|
||||
required: false,
|
||||
fontSize: 16,
|
||||
options: []
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
id: 'upId',
|
||||
title: 'upId',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
options: []
|
||||
}
|
||||
]
|
||||
},
|
||||
serviceOptions: [], //服务下啦
|
||||
//radiolist属性数字字典
|
||||
propertyDist: {
|
||||
up: {
|
||||
type: 'select',
|
||||
id: 'up',
|
||||
title: '大于',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
options: []
|
||||
},
|
||||
low: {
|
||||
type: 'select',
|
||||
id: 'low',
|
||||
title: '小于',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
options: []
|
||||
},
|
||||
pattern: {
|
||||
type: 'input',
|
||||
id: 'pattern',
|
||||
title: '正则',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16
|
||||
},
|
||||
message: {
|
||||
type: 'input',
|
||||
id: 'message',
|
||||
title: '正则提示',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//回显事件
|
||||
activedOnClick(val) {
|
||||
this.activedTableRow = val
|
||||
//清空type带出来的ruleForm
|
||||
this.typeOptionFormRow = []
|
||||
this.typeOptionRuleForm = {
|
||||
value: 'id'
|
||||
}
|
||||
this.propertyFormRow = []
|
||||
this.propertyRuleForm = {}
|
||||
this.propertyActiveList = []
|
||||
let propertyRuleForm = []
|
||||
let optionRuleForm = []
|
||||
let typeOptionRuleForm = []
|
||||
|
||||
this.$nextTick(() => {
|
||||
// 重置表单
|
||||
this.$refs.optionForm.resetForm()
|
||||
this.optionRuleForm = deepClone(val)
|
||||
console.log(this.optionRuleForm, 'this.optionRuleForm')
|
||||
let dom = document.querySelector('.optionForm')
|
||||
dom.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
//表单规则处理
|
||||
if (!val.mdmModuleDbFiledsRules) return
|
||||
val.mdmModuleDbFiledsRules.forEach(item => {
|
||||
if (item.ruleCode === 'required' || item.ruleCode === 'disabled') {
|
||||
if (!item.ruleValue) {
|
||||
this.$set(this[item.formName], item.ruleCode, false)
|
||||
} else if (typeof item.ruleValue === 'boolean') {
|
||||
this.$set(this[item.formName], item.ruleCode, item.ruleValue)
|
||||
} else {
|
||||
this.$set(this[item.formName], item.ruleCode, JSON.parse(item.ruleValue))
|
||||
}
|
||||
} else {
|
||||
this.$set(this[item.formName], item.ruleCode, item.ruleValue)
|
||||
}
|
||||
if (item.formName === 'propertyRuleForm') {
|
||||
propertyRuleForm.push(item.ruleCode)
|
||||
}
|
||||
})
|
||||
if (this.typeOptionRuleForm.service) {
|
||||
this.typeSelectChangeHanlde(this.typeOptionRuleForm.service, '', '', {
|
||||
id: 'service',
|
||||
options: this.serviceOptions
|
||||
}, true)
|
||||
}
|
||||
this.selectChangeHanlde(this.optionRuleForm.type, '', '', { id: 'type' }, true)
|
||||
this.selectChangeHanlde(this.optionRuleForm.filedType, '', '', { id: 'filedType' }, true)
|
||||
this.propertyActiveList = propertyRuleForm
|
||||
this.propertyActiveListChangeHanlde(this.propertyActiveList)
|
||||
|
||||
})
|
||||
},
|
||||
//表字段下拉触发（根据type类型动态对表
|
||||
selectChangeHanlde(val, index, indexRow, row, init = false) {
|
||||
if (row.id === 'type') {
|
||||
this.typeOptionFormRow = []
|
||||
if (!init) {
|
||||
this.typeOptionRuleForm = {
|
||||
value: 'id'
|
||||
}
|
||||
}
|
||||
if (val && this.typeDist[val]) {
|
||||
this.typeDist[val].forEach(item => {
|
||||
// 如果是服务名称则将请求下来的服务名用上
|
||||
if (item.id === 'service') {
|
||||
item.options = deepClone(this.serviceOptions)
|
||||
}
|
||||
let tempObj = {
|
||||
elCol: [
|
||||
{
|
||||
...item
|
||||
}
|
||||
]
|
||||
}
|
||||
this.typeOptionFormRow.push(tempObj)
|
||||
})
|
||||
}
|
||||
}
|
||||
//字段类型下啦改变时 将数据类型下啦重置
|
||||
if (row.id === 'filedType') {
|
||||
if (val) {
|
||||
let dist = {
|
||||
1: [
|
||||
{
|
||||
label: 'number',
|
||||
id: 'num'
|
||||
}
|
||||
],
|
||||
2: [
|
||||
{
|
||||
label: 'number',
|
||||
id: 'num'
|
||||
}
|
||||
],
|
||||
3: [
|
||||
{
|
||||
label: 'input',
|
||||
id: 'input'
|
||||
},
|
||||
{
|
||||
label: 'radio',
|
||||
id: 'radio'
|
||||
},
|
||||
{
|
||||
label: 'textrea',
|
||||
id: 'textrea'
|
||||
},
|
||||
{
|
||||
label: 'select',
|
||||
id: 'select'
|
||||
},
|
||||
{
|
||||
label: 'treeselect',
|
||||
id: 'treeselect'
|
||||
}
|
||||
],
|
||||
4: [
|
||||
{
|
||||
label: 'datepick',
|
||||
id: 'datepick'
|
||||
}
|
||||
// {
|
||||
// label: 'daterange',
|
||||
// id: 'daterange'
|
||||
// }
|
||||
]
|
||||
}
|
||||
this.optionFormRow[7].elCol[0].options = dist[val]
|
||||
if (val == 4) {
|
||||
this.optionFormRow[3].elCol[0].disabled = true
|
||||
this.optionFormRow[3].elCol[0].required = false
|
||||
this.$set(this.optionRuleForm, 'filedLength', '')
|
||||
} else {
|
||||
this.optionFormRow[3].elCol[0].disabled = false
|
||||
this.optionFormRow[3].elCol[0].required = true
|
||||
}
|
||||
} else {
|
||||
this.optionFormRow[3].elCol[0].disabled = false
|
||||
this.optionFormRow[3].elCol[0].required = true
|
||||
}
|
||||
if (!init) {
|
||||
this.$set(this.optionRuleForm, 'type', '')
|
||||
this.typeOptionFormRow = []
|
||||
this.typeOptionRuleForm = {}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
,
|
||||
//表单输入框失焦事件（为了让中文名称可以给显示名）
|
||||
optionFormInputBlur(id, row) {
|
||||
if (id === 'chName' && !row.title) {
|
||||
this.$set(row, 'title', row['chName'])
|
||||
}
|
||||
}
|
||||
,
|
||||
//配置项表通过
|
||||
optionOnSubmit() {
|
||||
this.$refs.typeOptionForm.submitForm()
|
||||
}
|
||||
,
|
||||
//type表下拉触发（目的是为了服务名称下拉后拿到label
|
||||
async typeSelectChangeHanlde(val, index, indexRow, row, initFlag = false) {
|
||||
if (row.id === 'service') {
|
||||
if (val) {
|
||||
let obj = row.options.find(item => {
|
||||
return val === item.id
|
||||
})
|
||||
console.log(obj, 'obj')
|
||||
const res = await getApiModuleApi({
|
||||
tl: 'mdmModuleService',
|
||||
as: '',
|
||||
dj: 'queryMdmServiceField'
|
||||
}, { mdmId: obj.mdmId, dbId: obj.dbId })
|
||||
this.labelOptions = []
|
||||
res.attribute.forEach(item => {
|
||||
this.labelOptions.push({
|
||||
id: item.enName,
|
||||
label: item.chName
|
||||
})
|
||||
})
|
||||
} else {
|
||||
this.labelOptions = []
|
||||
}
|
||||
|
||||
this.typeOptionFormRow.forEach(item => {
|
||||
if (item.elCol[0].id === 'label' || item.elCol[0].id === 'upId') {
|
||||
if (!initFlag) {
|
||||
this.$set(this.typeOptionRuleForm, item.elCol[0].id, '')
|
||||
}
|
||||
item.elCol[0].options = deepClone(this.labelOptions)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
,
|
||||
//type表通过
|
||||
typeOptionOnSubmit() {
|
||||
this.$refs.propertyForm.submitForm()
|
||||
}
|
||||
,
|
||||
//可选属性表通过校验 准备开始保存
|
||||
propertyOnSubmit() {
|
||||
console.log('进入保存方法', this.activedTableRow)
|
||||
let params = {
|
||||
mdmId: this.$route.query.id,
|
||||
dbId: this.mainTempClick.id,
|
||||
dbType: this.mainTempClick.dbType,
|
||||
dbName: this.mainTempClick.dbName,
|
||||
id: this.activedTableRow.id
|
||||
}
|
||||
//开始暂存
|
||||
let tempDist = {
|
||||
title: true,
|
||||
row: true,
|
||||
type: true,
|
||||
required: true,
|
||||
disabled: true,
|
||||
width: true
|
||||
}
|
||||
let tempArr = []
|
||||
let disabledWords = ['id', 'formmain_id', 'data_status', 'sorts', 'create_user_id', 'create_time', 'modify_user_id', 'modify_time', 'sts', 'org_id', 'company_id', 'data_id']
|
||||
if (disabledWords.includes(this.optionRuleForm.enName)) {
|
||||
this.$vmNews(`暂存失败，英文名${this.optionRuleForm.enName}不合法。`)
|
||||
return
|
||||
}
|
||||
if (this.optionRuleForm.type === 'datepick' || this.optionRuleForm.type === 'daterange') {
|
||||
if (this.optionRuleForm.filedType != 4) {
|
||||
this.$vmNews('字段类型与数据类型不合法，请选择日期类型', 'warning')
|
||||
return
|
||||
}
|
||||
}
|
||||
if (this.optionRuleForm.filedType == 4) {
|
||||
if (this.optionRuleForm.type !== 'datepick' && this.optionRuleForm.type !== 'daterange') {
|
||||
this.$vmNews('字段类型与数据类型不合法', 'warning')
|
||||
return
|
||||
}
|
||||
}
|
||||
if (this.optionRuleForm.filedLength * 1 > 255) {
|
||||
this.$vmNews('长度不能大于255')
|
||||
return
|
||||
}
|
||||
if (this.optionRuleForm.filedType == 2 && this.optionRuleForm.filedLength * 1 > 65) {
|
||||
this.$vmNews('当字段类型为金额时长度不得大于65')
|
||||
return
|
||||
}
|
||||
this.$set(params, 'chName', this.optionRuleForm.chName)
|
||||
this.$set(params, 'enName', this.optionRuleForm.enName)
|
||||
this.$set(params, 'filedType', this.optionRuleForm.filedType)
|
||||
this.$set(params, 'filedLength', this.optionRuleForm.filedLength)
|
||||
this.optionFormRow.forEach(item => {
|
||||
if (tempDist[item.elCol[0].id]) {
|
||||
tempArr.push({
|
||||
ruleName: item.elCol[0].title,
|
||||
ruleCode: item.elCol[0].id,
|
||||
ruleValue: this.optionRuleForm[item.elCol[0].id],
|
||||
ruleType: 2,
|
||||
formName: 'optionRuleForm'
|
||||
})
|
||||
}
|
||||
})
|
||||
this.typeOptionFormRow.forEach(item => {
|
||||
tempArr.push({
|
||||
ruleName: item.elCol[0].title,
|
||||
ruleCode: item.elCol[0].id,
|
||||
ruleValue: this.typeOptionRuleForm[item.elCol[0].id],
|
||||
ruleType: 2,
|
||||
formName: 'typeOptionRuleForm'
|
||||
})
|
||||
})
|
||||
this.propertyFormRow.forEach(item => {
|
||||
tempArr.push({
|
||||
ruleName: item.elCol[0].title,
|
||||
ruleCode: item.elCol[0].id,
|
||||
ruleValue: this.propertyRuleForm[item.elCol[0].id],
|
||||
ruleType: 2,
|
||||
formName: 'propertyRuleForm'
|
||||
})
|
||||
})
|
||||
params.mdmModuleDbFiledsRules = tempArr
|
||||
console.log(params)
|
||||
this.$emit('sonSaveHandle', params)
|
||||
|
||||
}
|
||||
,
|
||||
// 可选属性表变更方法
|
||||
propertyActiveListChangeHanlde(val) {
|
||||
this.propertyFormRow = []
|
||||
// 消除表单里被取消的值
|
||||
Object.keys(this.propertyRuleForm).forEach(item => {
|
||||
if (!val.includes(item)) {
|
||||
this.$delete(this.propertyRuleForm, item)
|
||||
}
|
||||
})
|
||||
if (val === 'up' || val === 'low') {
|
||||
this.activedTableData.forEach(item => {
|
||||
tempOptions.push({ label: item.id, chName: item.enName })
|
||||
})
|
||||
}
|
||||
|
||||
// 通过字典找到值的类型渲染在表单上
|
||||
val.forEach(item => {
|
||||
let tempOptions = []
|
||||
//若是大于和小于则需要将datepick拿到放进来选
|
||||
if (item === 'up' || item === 'low') {
|
||||
this.activedTableData.some(ele => {
|
||||
console.log(ele, 'ele')
|
||||
if (this.activedTableRow.id === ele.id || !ele.mdmModuleDbFiledsRules) return false
|
||||
ele.mdmModuleDbFiledsRules.forEach(ele02 => {
|
||||
if (ele02.ruleValue === 'datepick') {
|
||||
tempOptions.push({ label: ele.chName, id: ele.enName })
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
let tempObj = {
|
||||
elCol: [
|
||||
{
|
||||
...this.propertyDist[item],
|
||||
options: tempOptions
|
||||
}
|
||||
]
|
||||
}
|
||||
this.propertyFormRow.push(tempObj)
|
||||
})
|
||||
|
||||
}
|
||||
},
|
||||
components: {
|
||||
baseNewForm
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
.smtitle {
|
||||
color: #333;
|
||||
font-weight: 400;
|
||||
padding: 20px 0;
|
||||
border-top: 1px solid #EBEBEB;
|
||||
}
|
||||
|
||||
.checkBoxList {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
|
|
@ -0,0 +1,608 @@
|
|||
<template>
|
||||
<div class="displayInfo" v-loading="mainLoading">
|
||||
<div class="typeSetting">
|
||||
<div class="btn">
|
||||
<div class="title">显示类型</div>
|
||||
<div class="chunk">
|
||||
<el-button
|
||||
v-if="!editFlag"
|
||||
icon="el-icon-edit"
|
||||
type="primary"
|
||||
@click="editFlag=true"
|
||||
>编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="editFlag"
|
||||
icon="el-icon-close"
|
||||
@click="getRuleForm"
|
||||
:loading="saveLoading"
|
||||
>取消
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="editFlag"
|
||||
icon="el-icon-first-aid-kit"
|
||||
type="primary"
|
||||
@click="saveHandle"
|
||||
:loading="saveLoading"
|
||||
>保存
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="!editFlag">
|
||||
<div class="radio" style="margin-bottom: 20px">
|
||||
<el-radio-group v-model="displayType" :disabled="true">
|
||||
<el-radio label="1">树形</el-radio>
|
||||
<el-radio label="2">列表</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="form" v-if="displayType == 1">
|
||||
<baseNewForm
|
||||
ref="optionForm"
|
||||
:spanNumber="24"
|
||||
:isFunBtn="false"
|
||||
:formRow="formRow"
|
||||
:ruleForm="ruleForm"
|
||||
:labelPosition="'right'"
|
||||
labelWidth="100px"
|
||||
@onSubmit="onSubmit"
|
||||
:lookFlag="true"
|
||||
>
|
||||
</baseNewForm>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="radio" style="margin-bottom: 20px">
|
||||
<el-radio-group v-model="displayType">
|
||||
<el-radio label="1">树形</el-radio>
|
||||
<el-radio label="2">列表</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="form" v-if="displayType == 1">
|
||||
<baseNewForm
|
||||
ref="optionForm"
|
||||
:spanNumber="24"
|
||||
:isFunBtn="false"
|
||||
:formRow="formRow"
|
||||
:ruleForm="ruleForm"
|
||||
:labelPosition="'right'"
|
||||
labelWidth="100px"
|
||||
@onSubmit="onSubmit"
|
||||
>
|
||||
</baseNewForm>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="content">
|
||||
<div class="showItem">
|
||||
<div class="itemTitle">查询</div>
|
||||
<div class="setting">
|
||||
<div class="settingBox" @click="settingHandle('查询')">
|
||||
<div class="img">
|
||||
<img src="./images/设置.png" alt="">
|
||||
</div>
|
||||
<div class="value">设置</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="showCheckBoxList">
|
||||
<div class="showCheckBoxItem" v-for="(item,index) in dbQueryFiled" :key="index">
|
||||
<div class="name">{{ item.viewName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="showItem">
|
||||
<div class="itemTitle">列表</div>
|
||||
<div class="setting">
|
||||
<div class="settingBox" @click="settingHandle('列表')">
|
||||
<div class="img">
|
||||
<img src="./images/设置.png" alt="">
|
||||
</div>
|
||||
<div class="value">设置</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="showCheckBoxList">
|
||||
<div class="showCheckBoxItem" v-for="(item,index) in dbListFiled" :key="index">
|
||||
<div class="name">{{ item.viewName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="showItem">
|
||||
<div class="itemTitle">新增</div>
|
||||
<div class="setting">
|
||||
<div class="settingBox" @click="settingHandle('新增')">
|
||||
<div class="img">
|
||||
<img src="./images/设置.png" alt="">
|
||||
</div>
|
||||
<div class="value">设置</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="showCheckBoxList">
|
||||
<div class="showCheckBoxItem" v-for="(item,index) in dbAddFiled" :key="index">
|
||||
<div class="name">{{ item.viewName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="showItem">
|
||||
<div class="itemTitle">修改</div>
|
||||
<div class="setting">
|
||||
<div class="settingBox" @click="settingHandle('修改')">
|
||||
<div class="img">
|
||||
<img src="./images/设置.png" alt="">
|
||||
</div>
|
||||
<div class="value">设置</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="showCheckBoxList">
|
||||
<div class="showCheckBoxItem" v-for="(item,index) in dbEditFiled" :key="index">
|
||||
<div class="name">{{ item.viewName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="showItem">
|
||||
<div class="itemTitle">查看</div>
|
||||
<div class="setting">
|
||||
<div class="settingBox" @click="settingHandle('查看')">
|
||||
<div class="img">
|
||||
<img src="./images/设置.png" alt="">
|
||||
</div>
|
||||
<div class="value">设置</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="showCheckBoxList">
|
||||
<div class="showCheckBoxItem" v-for="(item,index) in dbShowFiled" :key="index">
|
||||
<div class="name">{{ item.viewName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="showItem">
|
||||
<div class="itemTitle">按钮</div>
|
||||
<div class="setting">
|
||||
<div class="settingBox" @click="settingHandle('按钮')">
|
||||
<div class="img">
|
||||
<img src="./images/设置.png" alt="">
|
||||
</div>
|
||||
<div class="value">设置</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="showCheckBoxList">
|
||||
<div class="showCheckBoxItem" v-for="(item,index) in btnShowList" :key="index">
|
||||
<div class="name">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- -->
|
||||
<base-right-dialog
|
||||
ref="mainTableAddtDialog"
|
||||
:footerShow="true"
|
||||
:dialogVisible.sync="mainTableDialogShow"
|
||||
:title="activeTitle + '设置'"
|
||||
:submitShow="true"
|
||||
:size="'50%'"
|
||||
@handleConfirmClick="mainTableSaveHandle"
|
||||
@handleClose="mainTableDialogShow=false"
|
||||
>
|
||||
<div class="mainTable">
|
||||
<settingChunk ref="settingChunk" @saveSuccessEmit="saveSuccessEmit"></settingChunk>
|
||||
</div>
|
||||
</base-right-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import settingChunk from '@/views/masterDataOptions/displayInfo/settingChunk.vue'
|
||||
import baseNewForm from '@/views/intergrationTask/compoments/baseNewForm'
|
||||
import { getApiModuleApi } from '@/api/apiChunks/index.js'
|
||||
import baseRightDialog from '@/components/base/baseRightDialog/index.vue'
|
||||
import { authApi } from '@/api/apis/auth'
|
||||
|
||||
export default {
|
||||
name: 'index.vue',
|
||||
data() {
|
||||
return {
|
||||
formRow: [
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: 'select',
|
||||
title: '显示字段',
|
||||
id: 'viewFiled',
|
||||
row: 6,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
options: []
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
title: '上级id字段',
|
||||
id: 'upIdFiled',
|
||||
row: 6,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
options: []
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
ruleForm: {},
|
||||
ainLoading: false,
|
||||
displayType: '1',//显示类型
|
||||
saveLoading: false,//保存loading
|
||||
activeTitle: '',//当前选中的key名用于右弹窗
|
||||
mainTableDialogShow: false,
|
||||
mainLoading: false,
|
||||
'dbQueryFiled': [],//查询
|
||||
'dbAddFiled': [],//新增
|
||||
'dbEditFiled': [],//修改
|
||||
'dbShowFiled': [],//查看
|
||||
'dbListFiled': [],//列表
|
||||
btnShowList: [],//已选中的按钮
|
||||
allFiledList: [
|
||||
{
|
||||
buttonName: '新建',
|
||||
buttonValue: 'new',
|
||||
buttonType: '1'
|
||||
}, {
|
||||
buttonName: '重置',
|
||||
buttonValue: 'resize',
|
||||
buttonType: '2'
|
||||
}, {
|
||||
buttonName: '查询',
|
||||
buttonValue: 'search',
|
||||
buttonType: '3'
|
||||
}, {
|
||||
buttonName: '修改',
|
||||
buttonValue: 'edit',
|
||||
buttonType: '4'
|
||||
}, {
|
||||
buttonName: '删除',
|
||||
buttonValue: 'dele',
|
||||
buttonType: '5'
|
||||
}, {
|
||||
buttonName: '查看',
|
||||
buttonValue: 'view',
|
||||
buttonType: '6'
|
||||
}, {
|
||||
buttonName: '下发',
|
||||
buttonValue: 'send',
|
||||
buttonType: '7'
|
||||
}
|
||||
],//所有按钮
|
||||
dist: {
|
||||
'查询': ['queryFiled', 'dbQueryFiled', 1],
|
||||
'列表': ['listFiled', 'dbListFiled', 2],
|
||||
'新增': ['addFiled', 'dbAddFiled', 3],
|
||||
'修改': ['editFiled', 'dbEditFiled', 4],
|
||||
'查看': ['showFiled', 'dbShowFiled', 5]
|
||||
},//字典
|
||||
editFlag: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async initSelect() {
|
||||
const res = await getApiModuleApi({
|
||||
tl: 'mdmModuleService',
|
||||
as: '',
|
||||
dj: 'queryMdmMainDBField'
|
||||
}, {
|
||||
mdmId: this.$route.query.id
|
||||
})
|
||||
if (res.status === '200') {
|
||||
this.formRow[0].elCol[1].options = []
|
||||
this.formRow[0].elCol[0].options = []
|
||||
res.attribute.forEach(item => {
|
||||
this.formRow[0].elCol[1].options.push({
|
||||
label: item.chName,
|
||||
id: item.enName
|
||||
})
|
||||
this.formRow[0].elCol[0].options.push({
|
||||
label: item.chName,
|
||||
id: item.enName
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
//设置保存成功
|
||||
saveSuccessEmit() {
|
||||
this.mainTableDialogShow = false
|
||||
this.getAllField()
|
||||
},
|
||||
//验证通过
|
||||
async onSubmit() {
|
||||
if (this.ruleForm.id) {
|
||||
this.openLoading('submit')
|
||||
const res = await authApi('mdmModuleService', '', 'updateMdmView', '', {
|
||||
...this.ruleForm,
|
||||
mdmId: this.$route.query.id,
|
||||
viewName: this.displayType
|
||||
})
|
||||
this.$vmNews('保存成功', 'success')
|
||||
this.editFlag = false
|
||||
this.getRuleForm()
|
||||
} else {
|
||||
this.openLoading('submit')
|
||||
const res = await authApi('mdmModuleService', '', 'saveMdmView', '', {
|
||||
...this.ruleForm,
|
||||
mdmId: this.$route.query.id,
|
||||
viewName: this.displayType
|
||||
|
||||
})
|
||||
this.$vmNews('保存成功', 'success')
|
||||
this.editFlag = false
|
||||
this.getRuleForm()
|
||||
}
|
||||
|
||||
},
|
||||
//获取类型
|
||||
async getRuleForm() {
|
||||
this.ruleForm = {}
|
||||
const res = await authApi('mdmModuleService', '', 'queryMdmView', '', {
|
||||
mdmId: this.$route.query.id
|
||||
})
|
||||
console.log(res.attribute, 'res.attribute', res)
|
||||
this.ruleForm = res.attribute ? res.attribute : {}
|
||||
this.displayType = this.ruleForm.viewName ? this.ruleForm.viewName : '1'
|
||||
this.editFlag = false
|
||||
},
|
||||
//保存
|
||||
saveHandle() {
|
||||
if (this.displayType === '1') {
|
||||
this.$refs.optionForm.submitForm()
|
||||
} else {
|
||||
this.onSubmit()
|
||||
}
|
||||
},
|
||||
//点击设置
|
||||
settingHandle(key) {
|
||||
if (!this.ruleForm.id) {
|
||||
this.$vmNews('请先添加显示类型后再配置按钮')
|
||||
return
|
||||
}
|
||||
this.activeTitle = key
|
||||
this.mainTableDialogShow = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.settingChunk.getAllBtn(key)
|
||||
})
|
||||
},
|
||||
//右弹窗点击保存
|
||||
mainTableSaveHandle() {
|
||||
this.$refs.settingChunk.saveHandle()
|
||||
},
|
||||
//获取所有字段
|
||||
async getAllField() {
|
||||
//字段相关
|
||||
const res = await authApi('mdmModuleService', '', 'queryMdmViewField', '', {
|
||||
id: this.$route.query.id
|
||||
})
|
||||
console.log(res, 'res')
|
||||
this.dbQueryFiled = res.attribute.dbQueryFiled
|
||||
this.dbListFiled = res.attribute.dbListFiled
|
||||
this.dbAddFiled = res.attribute.dbAddFiled
|
||||
this.dbEditFiled = res.attribute.dbEditFiled
|
||||
this.dbShowFiled = res.attribute.dbShowFiled
|
||||
//按钮相关
|
||||
const res2 = await authApi('mdmModuleService', '', 'queryMdmViewButton', '', {
|
||||
mdmId: this.$route.query.id
|
||||
})
|
||||
res2.attribute.forEach(item => {
|
||||
item.name = this.allFiledList[item.buttonType - 1].buttonName
|
||||
})
|
||||
this.btnShowList = res2.attribute
|
||||
}
|
||||
},
|
||||
components: {
|
||||
baseRightDialog,
|
||||
baseNewForm,
|
||||
settingChunk
|
||||
},
|
||||
created() {
|
||||
//获取显示类型和显示字段
|
||||
this.getRuleForm()
|
||||
//获取下啦
|
||||
this.initSelect()
|
||||
//获取所有显示字段
|
||||
this.getAllField()
|
||||
this.$emit('flashActive', 2)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep .el-form-item__content {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-menu-item {
|
||||
padding: 0 35px;
|
||||
}
|
||||
|
||||
::v-deep .el-transfer-panel {
|
||||
width: 25vw;
|
||||
height: 60vh;
|
||||
}
|
||||
|
||||
::v-deep .el-button {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::v-deep .el-transfer-panel__list {
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
::v-deep .el-transfer-panel__body {
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
.displayInfo {
|
||||
background-color: #f5f5f5;
|
||||
position: relative;
|
||||
margin-left: 5px;
|
||||
width: 99.5%;
|
||||
|
||||
> .btn {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
> .chunk {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.typeSetting {
|
||||
background-color: #fff;
|
||||
padding: 20px 10px 0px;
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 16px;
|
||||
width: 100%;
|
||||
|
||||
> .btn {
|
||||
padding-top: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
margin-left: 20px;
|
||||
margin-bottom: 20px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
color: #333333;
|
||||
line-height: 25px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
> .title {
|
||||
font-weight: 600;
|
||||
margin-left: 20px;
|
||||
margin-bottom: 20px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
color: #333333;
|
||||
line-height: 25px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
> .radio {
|
||||
margin: 10px 20px;
|
||||
}
|
||||
|
||||
> .tabIndex {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
border-radius: 16px;
|
||||
background-color: #fff;
|
||||
padding: 15px 10px;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
|
||||
.content {
|
||||
margin-top: 1vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 2000px;
|
||||
|
||||
.showItem {
|
||||
flex: 1;
|
||||
margin-left: 15px;
|
||||
height: 55vh;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #EBEBEB;
|
||||
padding: 14px 20px;
|
||||
position: relative;
|
||||
|
||||
.itemTitle {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
line-height: 22px;
|
||||
font-style: normal;
|
||||
text-align: center;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px #ebebeb solid;
|
||||
}
|
||||
|
||||
.setting {
|
||||
width: 100%;
|
||||
height: 15vh;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-radius: 8px;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: rgba(0, 0, 0, .6);
|
||||
|
||||
.settingBox {
|
||||
cursor: pointer;
|
||||
|
||||
.img {
|
||||
width: 5vh;
|
||||
height: 5vh;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.value {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.setting {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
||||
.showCheckBoxList {
|
||||
height: 90%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.showCheckBoxItem {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 16px 0 16px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
|
||||
|
||||
.btn {
|
||||
color: grey;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,442 @@
|
|||
<template>
|
||||
<div class="displayInfo">
|
||||
<div class="btn">
|
||||
<div class="chunk">
|
||||
<el-button
|
||||
icon="el-icon-back"
|
||||
@click="
|
||||
$router.replace({ path: '/integrationOption/masterDataOptions' })
|
||||
"
|
||||
>返回
|
||||
</el-button
|
||||
>
|
||||
</div>
|
||||
<div class="chunk">
|
||||
<el-button
|
||||
icon="el-icon-first-aid-kit"
|
||||
type="primary"
|
||||
@click="saveHandle"
|
||||
:loading="saveLoading"
|
||||
>保存
|
||||
</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main" v-loading="mainLoading">
|
||||
<div class="title">显示类型</div>
|
||||
<div class="radio">
|
||||
<el-radio-group v-model="displayType">
|
||||
<el-radio label="1">树形</el-radio>
|
||||
<el-radio label="2">列表</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="form" v-if="displayType == 1">
|
||||
<baseNewForm
|
||||
ref="optionForm"
|
||||
:spanNumber="24"
|
||||
:isFunBtn="false"
|
||||
:formRow="formRow"
|
||||
:ruleForm="ruleForm"
|
||||
:labelPosition="'left'"
|
||||
labelWidth="80px"
|
||||
@onSubmit="onSubmit">
|
||||
</baseNewForm>
|
||||
</div>
|
||||
<div class="tabIndex">
|
||||
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
|
||||
<el-menu-item index="1">查询</el-menu-item>
|
||||
<el-menu-item index="2">列表</el-menu-item>
|
||||
<el-menu-item index="3">新增</el-menu-item>
|
||||
<el-menu-item index="4">修改</el-menu-item>
|
||||
<el-menu-item index="5">查看</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<div class="content">
|
||||
<el-transfer
|
||||
style="text-align: left; display: inline-block;"
|
||||
v-model="contentFormArr"
|
||||
filterable
|
||||
:titles="['全部字段', '显示字段']"
|
||||
target-order="push"
|
||||
@change="handleChange"
|
||||
@right-check-change="rightCheckChange"
|
||||
:props="propsKey"
|
||||
:data="data">
|
||||
<span slot-scope="{ option }">{{ option.name }}</span>
|
||||
</el-transfer>
|
||||
<div class="buttonList">
|
||||
<div class="upBtn">
|
||||
<el-button type="primary" icon="el-icon-top" @click="upHanlde"
|
||||
:disabled="rightActived.length !== 1"></el-button>
|
||||
</div>
|
||||
<div class="downBtn">
|
||||
<el-button type="primary" icon="el-icon-bottom" @click="downHanlde"
|
||||
:disabled="rightActived.length !==1"></el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import baseNewForm from "@/views/intergrationTask/compoments/baseNewForm";
|
||||
import {getApiModuleApi} from "@/api/apiChunks/index.js";
|
||||
|
||||
export default {
|
||||
name: "index.vue",
|
||||
data() {
|
||||
return {
|
||||
mainLoading:false,
|
||||
saveLoading:false,
|
||||
id: "",
|
||||
propsKey: {
|
||||
key: "id",
|
||||
label: "name",
|
||||
disabled: "disabled"
|
||||
},
|
||||
displayType: "1",
|
||||
formRow: [
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: "select",
|
||||
title: "显示字段",
|
||||
id: "viewFiled",
|
||||
row: 12,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: "select",
|
||||
title: "上级id字段",
|
||||
id: "upIdFiled",
|
||||
row: 12,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
options: [],
|
||||
},
|
||||
]
|
||||
}
|
||||
],
|
||||
ruleForm: {},
|
||||
activeIndex: "1",
|
||||
contentFormArr: [],
|
||||
data: [],
|
||||
rightActived: [],
|
||||
addFiled: [],
|
||||
dbAddFiled: [],
|
||||
editFiled: [],
|
||||
dbEditFiled: [],
|
||||
showFiled: [],
|
||||
dbShowFiled: [],
|
||||
queryFiled: [],
|
||||
dbQueryFiled: [],
|
||||
listFiled: [],
|
||||
dbListFiled: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async init() {
|
||||
this.mainLoading = true
|
||||
this.activeIndex = "1"
|
||||
const res = await getApiModuleApi({
|
||||
tl: "mdmService",
|
||||
as: "mdmService",
|
||||
dj: "queryMdmModuleView",
|
||||
}, {
|
||||
id: this.$route.query.id
|
||||
})
|
||||
this.mainLoading = false
|
||||
this.addFiled = res.attribute.addFiled
|
||||
this.dbAddFiled = res.attribute.dbAddFiled
|
||||
this.initDispose(this.addFiled, this.dbAddFiled)
|
||||
this.editFiled = res.attribute.editFiled
|
||||
this.dbEditFiled = res.attribute.dbEditFiled
|
||||
this.initDispose(this.editFiled, this.dbEditFiled)
|
||||
this.showFiled = res.attribute.showFiled
|
||||
this.dbShowFiled = res.attribute.dbShowFiled
|
||||
this.initDispose(this.showFiled, this.dbShowFiled)
|
||||
this.queryFiled = res.attribute.queryFiled
|
||||
this.dbQueryFiled = res.attribute.dbQueryFiled
|
||||
this.initDispose(this.queryFiled, this.dbQueryFiled)
|
||||
this.listFiled = res.attribute.listFiled
|
||||
this.dbListFiled = res.attribute.dbListFiled
|
||||
this.initDispose(this.listFiled, this.dbListFiled)
|
||||
this.data = this.queryFiled
|
||||
this.contentFormArr = []
|
||||
this.dbQueryFiled.forEach(item => {
|
||||
this.contentFormArr.push(item.id)
|
||||
})
|
||||
|
||||
this.id = res.attribute.mdmModuleViewEntity.id
|
||||
if (!res.attribute.mdmModuleViewEntity.viewName) return
|
||||
this.displayType = res.attribute.mdmModuleViewEntity.viewName
|
||||
this.ruleForm = {
|
||||
viewFiled: res.attribute.mdmModuleViewEntity.viewFiled,
|
||||
upIdFiled: res.attribute.mdmModuleViewEntity.upIdFiled,
|
||||
}
|
||||
|
||||
},
|
||||
async initSelect() {
|
||||
const res = await getApiModuleApi({
|
||||
tl: "mdmService",
|
||||
as: "mdmService",
|
||||
dj: "queryMdmModuleServerMainFiled"
|
||||
}, {
|
||||
mdmId: this.$route.query.id
|
||||
})
|
||||
console.log(res, 'select')
|
||||
if (res.status === '200') {
|
||||
this.formRow[0].elCol[1].options = []
|
||||
this.formRow[0].elCol[0].options = []
|
||||
res.attribute.forEach(item => {
|
||||
this.formRow[0].elCol[1].options.push({
|
||||
label: item.chName,
|
||||
id: item.enName,
|
||||
})
|
||||
this.formRow[0].elCol[0].options.push({
|
||||
label: item.chName,
|
||||
id: item.enName,
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
async saveHandle() {
|
||||
if (this.displayType === '1') {
|
||||
this.$refs.optionForm.submitForm()
|
||||
} else {
|
||||
this.saveLoading = true
|
||||
let params = {
|
||||
id: this.$route.query.id,
|
||||
mdmModuleViewEntity: {
|
||||
id: this.id,
|
||||
viewName: this.displayType
|
||||
},
|
||||
addFiled: this.dbAddFiled,
|
||||
editFiled: this.dbEditFiled,
|
||||
showFiled: this.dbShowFiled,
|
||||
queryFiled: this.dbQueryFiled,
|
||||
listFiled: this.dbListFiled,
|
||||
}
|
||||
const res = await getApiModuleApi({
|
||||
tl: "mdmService",
|
||||
as: "mdmService",
|
||||
dj: "doSaveMdmModuleView",
|
||||
}, params)
|
||||
if (res.status === '200') {
|
||||
this.$vmNews("保存成功！", "success")
|
||||
this.init()
|
||||
this.$store.dispatch("GenerateRoutes")
|
||||
}
|
||||
this.saveLoading = false
|
||||
}
|
||||
|
||||
},
|
||||
//验证通过
|
||||
async onSubmit() {
|
||||
if (this.ruleForm.viewFiled === this.ruleForm.upIdFiled) {
|
||||
this.$vmNews("显示字段与上级id字段不能相同", "warning")
|
||||
return
|
||||
}
|
||||
this.saveLoading = true
|
||||
let params = {
|
||||
id: this.$route.query.id,
|
||||
mdmModuleViewEntity: {
|
||||
id: this.id,
|
||||
viewName: this.displayType,
|
||||
...this.ruleForm
|
||||
},
|
||||
addFiled: this.dbAddFiled,
|
||||
editFiled: this.dbEditFiled,
|
||||
showFiled: this.dbShowFiled,
|
||||
queryFiled: this.dbQueryFiled,
|
||||
listFiled: this.dbListFiled,
|
||||
}
|
||||
const res = await getApiModuleApi({
|
||||
tl: "mdmService",
|
||||
as: "mdmService",
|
||||
dj: "doSaveMdmModuleView",
|
||||
}, params)
|
||||
if (res.status === '200') {
|
||||
this.$vmNews("保存成功！", "success")
|
||||
this.$store.dispatch("GenerateRoutes")
|
||||
this.init()
|
||||
}
|
||||
this.saveLoading = false
|
||||
},
|
||||
handleSelect(key, keyPath) {
|
||||
this.activeIndex = key
|
||||
this.rightActived = []
|
||||
let tempObj = {
|
||||
1: ['queryFiled', 'dbQueryFiled'],
|
||||
2: ['listFiled', 'dbListFiled'],
|
||||
3: ['addFiled', 'dbAddFiled'],
|
||||
4: ['editFiled', 'dbEditFiled'],
|
||||
5: ['showFiled', 'dbShowFiled']
|
||||
}
|
||||
this.data = this[tempObj[key][0]]
|
||||
this.contentFormArr = []
|
||||
this[tempObj[key][1]].forEach(item => {
|
||||
this.contentFormArr.push(item.id)
|
||||
})
|
||||
},
|
||||
handleChange(value, direction, movedKeys) {
|
||||
let tempObj = {
|
||||
1: ['queryFiled', 'dbQueryFiled'],
|
||||
2: ['listFiled', 'dbListFiled'],
|
||||
3: ['addFiled', 'dbAddFiled'],
|
||||
4: ['editFiled', 'dbEditFiled'],
|
||||
5: ['showFiled', 'dbShowFiled']
|
||||
}
|
||||
this.disposeDataArr(value)
|
||||
this.rightActived = []
|
||||
},
|
||||
initDispose(arr1, arr2) {
|
||||
arr2.forEach(item => {
|
||||
arr1.some(ele => {
|
||||
if (item.viewFiled === ele.id) {
|
||||
item.id = ele.id
|
||||
item.name = ele.name
|
||||
return true
|
||||
}
|
||||
return false
|
||||
})
|
||||
})
|
||||
},
|
||||
rightCheckChange(arr) {
|
||||
this.rightActived = arr
|
||||
},
|
||||
// 向上方法
|
||||
upHanlde() {
|
||||
const index = this.contentFormArr.findIndex(ele => {
|
||||
return this.rightActived[0] === ele
|
||||
})
|
||||
if (index === 0) {
|
||||
this.$vmNews("排序为1时无法向上")
|
||||
return
|
||||
}
|
||||
const tempDele = this.contentFormArr.splice(index, 1)
|
||||
this.contentFormArr.splice(index - 1, 0, tempDele[0])
|
||||
this.disposeDataArr(this.contentFormArr)
|
||||
},
|
||||
// 向下方法
|
||||
downHanlde() {
|
||||
const index = this.contentFormArr.findIndex(ele => {
|
||||
return this.rightActived[0] === ele
|
||||
})
|
||||
if (index === this.contentFormArr.length - 1) {
|
||||
this.$vmNews("末尾排序无法向下排序")
|
||||
return
|
||||
}
|
||||
const tempDele = this.contentFormArr.splice(index, 1)
|
||||
this.contentFormArr.splice(index + 1, 0, tempDele[0])
|
||||
this.disposeDataArr(this.contentFormArr)
|
||||
},
|
||||
disposeDataArr(arr) {
|
||||
let tempObj = {
|
||||
1: ['queryFiled', 'dbQueryFiled'],
|
||||
2: ['listFiled', 'dbListFiled'],
|
||||
3: ['addFiled', 'dbAddFiled'],
|
||||
4: ['editFiled', 'dbEditFiled'],
|
||||
5: ['showFiled', 'dbShowFiled']
|
||||
}
|
||||
this[tempObj[this.activeIndex][1]] = []
|
||||
arr.forEach((idNum, index) => {
|
||||
this.data.some(item => {
|
||||
if (item.id === idNum) {
|
||||
this[tempObj[this.activeIndex][1]].push({...item, sort: index})
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
components: {
|
||||
baseNewForm
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
this.initSelect()
|
||||
this.$emit("flashActive", 2)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep .el-menu-item {
|
||||
padding: 0 35px;
|
||||
}
|
||||
|
||||
::v-deep .el-transfer-panel {
|
||||
width: 25vw;
|
||||
height: 60vh;
|
||||
}
|
||||
|
||||
::v-deep .el-button {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::v-deep .el-transfer-panel__list {
|
||||
height: 50vh;
|
||||
}
|
||||
::v-deep .el-transfer-panel__body {
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
.displayInfo {
|
||||
background-color: #fbfbfb;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
> .btn {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
> .chunk {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
> .main {
|
||||
background-color: #fff;
|
||||
border-right: 8px;
|
||||
height: 85vh;
|
||||
overflow: auto;
|
||||
margin-top: 10px;
|
||||
padding: 0px 15px;
|
||||
|
||||
> .title {
|
||||
font-weight: 600;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
> .radio {
|
||||
margin: 15px 20px;
|
||||
}
|
||||
|
||||
> .tabIndex {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
> .content {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.buttonList {
|
||||
margin-left: 50px;
|
||||
|
||||
.downBtn {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,289 @@
|
|||
<template>
|
||||
<div class="settingChunk">
|
||||
<div class="leftAll">
|
||||
<div class="search">
|
||||
<el-input
|
||||
placeholder="搜索"
|
||||
prefix-icon="el-icon-search"
|
||||
v-model="searchValue"
|
||||
>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="checkBoxList">
|
||||
<!-- 字段-->
|
||||
<template v-if="showFiledFlag">
|
||||
<el-checkbox-group v-model="pickList" @change="checkBoxChangeHandle">
|
||||
<template v-for="(item,index) in allBtnList">
|
||||
<div class="checkBoxItem" :key="item.id" v-if="item.name.includes(searchValue)">
|
||||
<el-checkbox :label="item.id">{{ item.name }}</el-checkbox>
|
||||
</div>
|
||||
</template>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
<!-- 按钮类型-->
|
||||
<template v-else>
|
||||
<el-checkbox-group v-model="pickList" @change="changeBtnBoxHandle">
|
||||
<template v-for="(item,index) in allFiledList">
|
||||
<div class="checkBoxItem" :key="item.buttonType" v-if="item.buttonName.includes(searchValue)">
|
||||
<el-checkbox :label="item.buttonType">{{ item.buttonName }}</el-checkbox>
|
||||
</div>
|
||||
</template>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightAdd">
|
||||
<div class="pickTitle">已选择（{{ pickShowList.length }}）</div>
|
||||
<div class="showCheckBoxList">
|
||||
<draggable v-model="pickShowList">
|
||||
<template v-if="showFiledFlag">
|
||||
<div class="showCheckBoxItem" v-for="(item,index) in pickShowList" :key="item.viewFiled">
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<div class="btn" @click="deleShowList(item,index)">x</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="showCheckBoxItem" v-for="(item,index) in pickShowList" :key="item.buttonType">
|
||||
<div class="name">{{ item.buttonName }}</div>
|
||||
<div class="btn" @click="deleBtnShowList(item,index)">x</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
import { authApi } from '@/api/apis/auth'
|
||||
|
||||
export default {
|
||||
name: 'settingChunk',
|
||||
data() {
|
||||
return {
|
||||
searchValue: '',//搜索值
|
||||
allBtnList: [],//所有选项
|
||||
allFiledList: [
|
||||
{
|
||||
buttonName: '新建',
|
||||
buttonValue: 'new',
|
||||
buttonType: '1'
|
||||
}, {
|
||||
buttonName: '重置',
|
||||
buttonValue: 'resize',
|
||||
buttonType: '2'
|
||||
}, {
|
||||
buttonName: '查询',
|
||||
buttonValue: 'search',
|
||||
buttonType: '3'
|
||||
}, {
|
||||
buttonName: '修改',
|
||||
buttonValue: 'edit',
|
||||
buttonType: '4'
|
||||
}, {
|
||||
buttonName: '删除',
|
||||
buttonValue: 'dele',
|
||||
buttonType: '5'
|
||||
}, {
|
||||
buttonName: '查看',
|
||||
buttonValue: 'view',
|
||||
buttonType: '6'
|
||||
}, {
|
||||
buttonName: '下发',
|
||||
buttonValue: 'send',
|
||||
buttonType: '7'
|
||||
}
|
||||
],//所有按钮
|
||||
//key字段【'待选字段'，‘选中字段’，viewType】
|
||||
dist: {
|
||||
'查询': ['queryFiled', 'dbQueryFiled', 1],
|
||||
'列表': ['listFiled', 'dbListFiled', 2],
|
||||
'新增': ['addFiled', 'dbAddFiled', 3],
|
||||
'修改': ['editFiled', 'dbEditFiled', 4],
|
||||
'查看': ['showFiled', 'dbShowFiled', 5]
|
||||
},
|
||||
pickDist: {},//多选框字典
|
||||
pickList: [],//用于绑定选中的多选框
|
||||
pickShowList: [],//用于展示选中的多选框
|
||||
thisKey: '',//当前key
|
||||
showFiledFlag: true//判断当前是字段还是按钮
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//显示字段获取
|
||||
async getAllBtn(key) {
|
||||
this.showFiledFlag = true
|
||||
this.thisKey = key
|
||||
//重置数据
|
||||
this.pickShowList = []
|
||||
this.pickList = []
|
||||
this.searchValue = ''
|
||||
this.allBtnList = []
|
||||
this.pickDist = {}
|
||||
|
||||
//有就走字段逻辑 没有则走按钮逻辑
|
||||
if (this.dist[key]) {
|
||||
const res = await authApi('mdmModuleService', '', 'queryMdmViewField', '', {
|
||||
id: this.$route.query.id
|
||||
})
|
||||
let tempArr = this.dist[key]
|
||||
res.attribute[tempArr[0]].forEach(item => {
|
||||
this.$set(this.pickDist, item.id, item.name)
|
||||
})
|
||||
this.allBtnList = res.attribute[tempArr[0]]
|
||||
res.attribute[tempArr[1]].forEach(item => {
|
||||
this.pickList.push(item.viewFiled)
|
||||
this.checkBoxChangeHandle()
|
||||
})
|
||||
} else {
|
||||
this.showFiledFlag = false
|
||||
const res = await authApi('mdmModuleService', '', 'queryMdmViewButton', '', {
|
||||
mdmId: this.$route.query.id
|
||||
})
|
||||
res.attribute.forEach(item => {
|
||||
this.pickList.push(item.buttonType)
|
||||
})
|
||||
this.changeBtnBoxHandle()
|
||||
|
||||
}
|
||||
},
|
||||
//当多选框改变时
|
||||
checkBoxChangeHandle() {
|
||||
let tempList = []
|
||||
this.pickShowList = []
|
||||
//这边需要将选中的list通过dist变成一个可用的结构
|
||||
this.pickList.forEach(item => {
|
||||
this.pickShowList.push({
|
||||
name: this.pickDist[item],
|
||||
viewFiled: item
|
||||
})
|
||||
})
|
||||
},
|
||||
//当按钮多选改变时
|
||||
changeBtnBoxHandle() {
|
||||
this.pickShowList = []
|
||||
this.pickList.forEach(item => {
|
||||
let obj = this.allFiledList[item - 1]
|
||||
this.pickShowList.push(obj)
|
||||
})
|
||||
},
|
||||
//选择栏目删除按钮
|
||||
deleShowList(item, index) {
|
||||
this.pickShowList.splice(index, 1)
|
||||
//这里是为了让右边选中box同步修改
|
||||
let tempArr = []
|
||||
this.pickShowList.forEach((item) => {
|
||||
tempArr.push(item.viewFiled)
|
||||
})
|
||||
this.pickList = tempArr
|
||||
},
|
||||
//删除按钮
|
||||
deleBtnShowList(item, index) {
|
||||
this.pickShowList.splice(index, 1)
|
||||
let tempArr = []
|
||||
this.pickShowList.forEach((item) => {
|
||||
tempArr.push(item.buttonType)
|
||||
})
|
||||
this.pickList = tempArr
|
||||
},
|
||||
//保存方法
|
||||
async saveHandle() {
|
||||
//首先需要判断是字段设置还是按钮
|
||||
if (this.showFiledFlag) {
|
||||
//字段
|
||||
let keyArr = this.dist[this.thisKey]
|
||||
let params = {
|
||||
mdmId: this.$route.query.id,
|
||||
viewType: keyArr[2]
|
||||
}
|
||||
params[keyArr[1]] = this.pickShowList
|
||||
this.openLoading("submit")
|
||||
const res = await authApi('mdmModuleService', '', 'saveOrUpdateMdmViewField', '', params)
|
||||
this.$vmNews('保存成功！', 'success')
|
||||
this.$emit('saveSuccessEmit')
|
||||
} else {
|
||||
//按钮
|
||||
let params = {
|
||||
mdmId: this.$route.query.id,
|
||||
dbButtonFiled: this.pickShowList
|
||||
}
|
||||
this.openLoading("submit")
|
||||
const res = await authApi('mdmModuleService', '', 'saveOrUpdateMdmViewButton', '', params)
|
||||
this.$vmNews('保存成功！', 'success')
|
||||
this.$emit('saveSuccessEmit')
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
components: {
|
||||
draggable
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
.settingChunk {
|
||||
display: flex;
|
||||
height: 80vh;
|
||||
|
||||
.leftAll {
|
||||
flex: 1;
|
||||
padding: 0 20px;
|
||||
border-right: 1px solid #EBEBEB;
|
||||
|
||||
.search {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.checkBoxList {
|
||||
height: 70vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.checkBoxItem {
|
||||
margin: 20px 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.rightAdd {
|
||||
flex: 1;
|
||||
padding: 0 20px;
|
||||
|
||||
.pickTitle {
|
||||
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.showCheckBoxList {
|
||||
height: 70vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.showCheckBoxItem {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 10px 0 10px;
|
||||
padding: 15px 10px;
|
||||
background: #F8F8F8;
|
||||
border-radius: 4px;
|
||||
cursor: move; /* 将指针换成拖动样式 */
|
||||
user-select: none; /* 禁止选择文字 */
|
||||
.btn {
|
||||
color: grey;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,614 @@
|
|||
<template>
|
||||
<div class="linkk" ref="link" :style="style">
|
||||
<div class="left">
|
||||
<div class="title">
|
||||
<h1>执行动作入参数</h1>
|
||||
</div>
|
||||
<template v-for="(item, index) in leftData">
|
||||
<div
|
||||
class="treebox"
|
||||
@mouseenter="leftMouseenterHandle(item)"
|
||||
@mouseleave="leftMouseleaveHandle(item)"
|
||||
>
|
||||
<div class="tree" :key="index">
|
||||
<span>{{ item.label }}</span>
|
||||
<span style="font-size: 12px; color: gray; padding-left: 10px">{{
|
||||
item.type
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<el-checkbox
|
||||
:fill="item.stroke ? item.stroke : '#000000'"
|
||||
v-model="item.value"
|
||||
:disabled="!!lookFlag"
|
||||
@change="
|
||||
(val, $event) =>
|
||||
leftCheckBoxHandle(val, item, $event, [item.id], item.label)
|
||||
"
|
||||
></el-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="item.children">
|
||||
<template v-for="(item01, index01) in item.children">
|
||||
<div
|
||||
class="treebox"
|
||||
@mouseenter="leftMouseenterHandle(item01)"
|
||||
@mouseleave="leftMouseleaveHandle(item01)"
|
||||
>
|
||||
<div class="tree" style="margin-left: 15px">
|
||||
<span>{{ item01.label }}</span>
|
||||
<span
|
||||
style="font-size: 12px; color: gray; padding-left: 10px"
|
||||
>{{ item01.type }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<el-checkbox
|
||||
v-model="item01.value"
|
||||
:disabled="!!lookFlag"
|
||||
@change="
|
||||
(val, $event) =>
|
||||
leftCheckBoxHandle(
|
||||
val,
|
||||
item01,
|
||||
$event,
|
||||
[item.id, item01.id],
|
||||
item.label + '.' + item01.label
|
||||
)
|
||||
"
|
||||
></el-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="item01.children">
|
||||
<template v-for="(item02, index02) in item01.children">
|
||||
<div
|
||||
class="treebox"
|
||||
@mouseenter="leftMouseenterHandle(item02)"
|
||||
@mouseleave="leftMouseleaveHandle(item02)"
|
||||
>
|
||||
<div class="tree" style="margin-left: 30px">
|
||||
<span>{{ item02.label }}</span>
|
||||
<span
|
||||
style="font-size: 12px; color: gray; padding-left: 10px"
|
||||
>{{ item02.type }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<el-checkbox
|
||||
v-model="item02.value"
|
||||
:disabled="!!lookFlag"
|
||||
@change="
|
||||
(val, $event) =>
|
||||
leftCheckBoxHandle(
|
||||
val,
|
||||
item02,
|
||||
$event,
|
||||
[item.id, item01.id, item02.id],
|
||||
item.label + '.' + item01.label + '.' + item02.label
|
||||
)
|
||||
"
|
||||
></el-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="item02.children">
|
||||
<template v-for="(item03, index03) in item02.children">
|
||||
<div
|
||||
class="treebox"
|
||||
@mouseenter="leftMouseenterHandle(item03)"
|
||||
@mouseleave="leftMouseleaveHandle(item03)"
|
||||
>
|
||||
<div class="tree" style="margin-left: 45px">
|
||||
<span>{{ item03.label }}</span>
|
||||
<span
|
||||
style="
|
||||
font-size: 12px;
|
||||
color: gray;
|
||||
padding-left: 10px;
|
||||
"
|
||||
>{{ item03.type }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<el-checkbox
|
||||
v-model="item03.value"
|
||||
:disabled="!!lookFlag"
|
||||
@change="
|
||||
(val, $event) =>
|
||||
leftCheckBoxHandle(
|
||||
val,
|
||||
item03,
|
||||
$event,
|
||||
[item.id, item01.id, item02.id, item03.id],
|
||||
item.label +
|
||||
'.' +
|
||||
item01.label +
|
||||
'.' +
|
||||
item02.label +
|
||||
'.' +
|
||||
item03.label
|
||||
)
|
||||
"
|
||||
></el-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
<div class="svg">
|
||||
<svg
|
||||
ref="svg"
|
||||
class="line"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
:style="{ height: svgHeight }"
|
||||
style="position: absolute; z-index: 2"
|
||||
version="1.1"
|
||||
>
|
||||
<line
|
||||
v-for="item in line"
|
||||
:key="item.leftid"
|
||||
:x1="item.x1"
|
||||
:y1="item.y1"
|
||||
:x2="item.x2"
|
||||
:y2="item.y2"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
stroke: item.stroke,
|
||||
strokeWidth: item.width,
|
||||
zIndex: item.z,
|
||||
}"
|
||||
/>
|
||||
|
||||
<!-- <path
|
||||
v-for="item in line"
|
||||
:key="item.leftid"
|
||||
:d="`M ${item.x1},${item.y2} C${item.centerX},${item.y1} ${item.centerX},${item.y2} ${item.x2},${item.y2}`"
|
||||
style="stroke: #660000; fill: none"
|
||||
/> -->
|
||||
</svg>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="title">
|
||||
<h1>API入参</h1>
|
||||
</div>
|
||||
<template v-for="(item, index) in rightData">
|
||||
<div
|
||||
class="treebox"
|
||||
@mouseenter="rightMouseenterHandle(item)"
|
||||
@mouseleave="rightMouseleaveHandle(item)"
|
||||
>
|
||||
<div class="btn">
|
||||
<el-checkbox
|
||||
:disabled="!!lookFlag"
|
||||
size="mini"
|
||||
v-model="item.value"
|
||||
@change="
|
||||
(val, $event) =>
|
||||
rightCheckBoxHandle(val, item, $event, [item.id], item.label)
|
||||
"
|
||||
></el-checkbox>
|
||||
</div>
|
||||
<div class="tree" :key="index">
|
||||
<span>{{ item.label }}</span>
|
||||
<span style="font-size: 12px; color: gray; padding-left: 10px">{{
|
||||
item.type
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="item.children">
|
||||
<template v-for="(item01, index01) in item.children">
|
||||
<div
|
||||
class="treebox"
|
||||
@mouseenter="rightMouseenterHandle(item01)"
|
||||
@mouseleave="rightMouseleaveHandle(item01)"
|
||||
>
|
||||
<div class="btn">
|
||||
<el-checkbox
|
||||
:disabled="!!lookFlag"
|
||||
v-model="item01.value"
|
||||
@change="
|
||||
(val, $event) =>
|
||||
rightCheckBoxHandle(
|
||||
val,
|
||||
item01,
|
||||
$event,
|
||||
[item.id, item01.id],
|
||||
item.label + '.' + item01.label
|
||||
)
|
||||
"
|
||||
></el-checkbox>
|
||||
</div>
|
||||
<div class="tree" style="margin-left: 15px">
|
||||
<span>{{ item01.label }}</span>
|
||||
<span
|
||||
style="font-size: 12px; color: gray; padding-left: 10px"
|
||||
>{{ item01.type }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="item01.children">
|
||||
<template v-for="(item02, index02) in item01.children">
|
||||
<div
|
||||
class="treebox"
|
||||
@mouseenter="rightMouseenterHandle(item02)"
|
||||
@mouseleave="rightMouseleaveHandle(item02)"
|
||||
>
|
||||
<div class="btn">
|
||||
<el-checkbox
|
||||
:disabled="!!lookFlag"
|
||||
v-model="item02.value"
|
||||
@change="
|
||||
(val, $event) =>
|
||||
rightCheckBoxHandle(
|
||||
val,
|
||||
item02,
|
||||
$event,
|
||||
[item.id, item01.id, item02.id],
|
||||
item.label + '.' + item01.label + '.' + item02.label
|
||||
)
|
||||
"
|
||||
></el-checkbox>
|
||||
</div>
|
||||
<div class="tree" style="margin-left: 30px">
|
||||
<span>{{ item02.label }}</span>
|
||||
<span
|
||||
style="font-size: 12px; color: gray; padding-left: 10px"
|
||||
>{{ item02.type }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="item01.children">
|
||||
<template v-for="(item03, index03) in item02.children">
|
||||
<div
|
||||
class="treebox"
|
||||
@mouseenter="rightMouseenterHandle(item03)"
|
||||
@mouseleave="rightMouseleaveHandle(item03)"
|
||||
>
|
||||
<div class="btn">
|
||||
<el-checkbox
|
||||
:disabled="!!lookFlag"
|
||||
v-model="item03.value"
|
||||
@change="
|
||||
(val, $event) =>
|
||||
rightCheckBoxHandle(
|
||||
val,
|
||||
item03,
|
||||
$event,
|
||||
[item.id, item01.id, item02.id, item03.id],
|
||||
item.label +
|
||||
'.' +
|
||||
item01.label +
|
||||
'.' +
|
||||
item02.label +
|
||||
'.' +
|
||||
item03.label
|
||||
)
|
||||
"
|
||||
></el-checkbox>
|
||||
</div>
|
||||
<div class="tree" style="margin-left: 30px">
|
||||
<span>{{ item03.label }}</span>
|
||||
<span
|
||||
style="
|
||||
font-size: 12px;
|
||||
color: gray;
|
||||
padding-left: 10px;
|
||||
"
|
||||
>{{ item03.type }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
lookFlag: {
|
||||
type: [Boolean, String],
|
||||
default: false,
|
||||
},
|
||||
lineData: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
leftData: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
rightData: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
style: {
|
||||
"--clickBoxColor": "pink",
|
||||
},
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
leftActive: {},
|
||||
rightActive: {},
|
||||
line: [],
|
||||
leftActiveItem: {},
|
||||
rightActiveItem: {},
|
||||
svgHeight: 0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
leftMouseenterHandle(item) {
|
||||
if (item.isline) {
|
||||
let temp = this.line.find((ele) => {
|
||||
return ele.leftid == item.id;
|
||||
});
|
||||
if (temp) {
|
||||
temp.stroke = "red";
|
||||
temp.width = 2;
|
||||
temp.z = 9;
|
||||
}
|
||||
}
|
||||
},
|
||||
leftMouseleaveHandle(item) {
|
||||
if (item.isline) {
|
||||
let temp = this.line.find((ele) => {
|
||||
return ele.leftid == item.id;
|
||||
});
|
||||
if (temp) {
|
||||
temp.stroke = "#409EFF";
|
||||
temp.width = 1;
|
||||
temp.z = 4;
|
||||
}
|
||||
}
|
||||
},
|
||||
rightMouseenterHandle(item) {
|
||||
if (item.isline) {
|
||||
let temp = this.line.find((ele) => {
|
||||
return ele.rightid == item.id;
|
||||
});
|
||||
if (temp) {
|
||||
temp.stroke = "red";
|
||||
temp.width = 2;
|
||||
temp.z = 9;
|
||||
}
|
||||
}
|
||||
},
|
||||
rightMouseleaveHandle(item) {
|
||||
if (item.isline) {
|
||||
let temp = this.line.find((ele) => {
|
||||
return ele.rightid == item.id;
|
||||
});
|
||||
if (temp) {
|
||||
temp.stroke = "#409EFF";
|
||||
temp.width = 1;
|
||||
temp.z = 4;
|
||||
}
|
||||
}
|
||||
},
|
||||
leftCheckBoxHandle(val, item, e, arrId, name) {
|
||||
if (val) {
|
||||
let svginfo = this.$refs.svg.getBoundingClientRect();
|
||||
let info = e.target.getBoundingClientRect();
|
||||
this.leftActiveItem = item;
|
||||
this.leftActive["leftidarr"] = arrId;
|
||||
this.leftActive["leftid"] = item.id;
|
||||
this.leftActive["leftTitle"] = name;
|
||||
this.leftActive["x1"] = svginfo.x - info.x - 5;
|
||||
this.leftActive["y1"] = info.y - svginfo.y + 10;
|
||||
if (this.leftActive.leftid && this.rightActive.rightid) {
|
||||
let obj = {
|
||||
stroke: "#409EFF",
|
||||
width: 1,
|
||||
z: 4,
|
||||
};
|
||||
this.line.push({ ...this.leftActive, ...this.rightActive, ...obj });
|
||||
this.$set(this.leftActiveItem, "isline", true);
|
||||
this.$set(this.rightActiveItem, "leftid", this.leftActiveItem.id);
|
||||
this.$set(this.leftActiveItem, "rightid", this.rightActiveItem.id);
|
||||
this.$set(this.rightActiveItem, "isline", true);
|
||||
this.leftActive = {};
|
||||
this.rightActive = {};
|
||||
}
|
||||
this.deepSearchBox(this.leftData, item.id);
|
||||
} else {
|
||||
if (item.isline) {
|
||||
this.line = this.line.filter((ele) => {
|
||||
return ele.leftid != item.id;
|
||||
});
|
||||
this.cloaseBox(this.rightData, item.rightid);
|
||||
item.isline = false;
|
||||
} else {
|
||||
this.leftActive = {};
|
||||
this.leftActiveItem = {};
|
||||
}
|
||||
}
|
||||
},
|
||||
rightCheckBoxHandle(val, item, e, arrId, name) {
|
||||
if (val) {
|
||||
let svginfo = this.$refs.svg.getBoundingClientRect();
|
||||
let info = e.target.getBoundingClientRect();
|
||||
this.rightActiveItem = item;
|
||||
this.rightActive["rightidarr"] = arrId;
|
||||
this.rightActive["rightid"] = item.id;
|
||||
this.rightActive["rightTitle"] = name;
|
||||
this.rightActive["x2"] = info.x - svginfo.x - 30;
|
||||
this.rightActive["y2"] = info.y - svginfo.y + 10;
|
||||
if (this.leftActive.leftid && this.rightActive.rightid) {
|
||||
let obj = {
|
||||
stroke: "#409EFF",
|
||||
width: 1,
|
||||
z: 4,
|
||||
};
|
||||
this.line.push({ ...this.leftActive, ...this.rightActive, ...obj });
|
||||
this.$set(this.leftActiveItem, "isline", true);
|
||||
this.$set(this.leftActiveItem, "rightid", this.rightActiveItem.id);
|
||||
this.$set(this.rightActiveItem, "leftid", this.leftActiveItem.id);
|
||||
this.$set(this.rightActiveItem, "isline", true);
|
||||
item["isline"] = true;
|
||||
this.leftActive = {};
|
||||
this.rightActive = {};
|
||||
}
|
||||
this.deepSearchBox(this.rightData, item.id);
|
||||
} else {
|
||||
if (item.isline) {
|
||||
this.line = this.line.filter((ele) => {
|
||||
return ele.rightid != item.id;
|
||||
});
|
||||
this.cloaseBox(this.leftData, item.leftid);
|
||||
item.isline = false;
|
||||
} else {
|
||||
this.rightActive = {};
|
||||
this.rightActiveItem = {};
|
||||
}
|
||||
}
|
||||
},
|
||||
deepSearchBox(arr, id) {
|
||||
arr.forEach((item) => {
|
||||
if (item.id != id && item.value && !item.isline) {
|
||||
item.value = false;
|
||||
}
|
||||
if (item.children && item.children.length) {
|
||||
this.deepSearchBox(item.children, id);
|
||||
}
|
||||
});
|
||||
},
|
||||
cloaseBox(arr, id) {
|
||||
arr.some((item) => {
|
||||
if (item.id == id) {
|
||||
item.value = false;
|
||||
item.isline = false;
|
||||
return true;
|
||||
} else if (item.children && item.children.length) {
|
||||
this.cloaseBox(item.children, id);
|
||||
}
|
||||
});
|
||||
},
|
||||
handleNodeClick(data) {},
|
||||
resizeHeight() {
|
||||
console.log(this.$refs.link.getBoundingClientRect())
|
||||
this.svgHeight = this.$refs.link.getBoundingClientRect().height + "px";
|
||||
},
|
||||
cleanActive(str) {
|
||||
if (str == "left") {
|
||||
this.leftActive = {};
|
||||
this.leftActiveItem = {};
|
||||
} else {
|
||||
this.rightActive = {};
|
||||
this.rightActiveItem = {};
|
||||
}
|
||||
this.line = [];
|
||||
},
|
||||
acivteData(flag, obj) {
|
||||
if (flag == "left") {
|
||||
this.leftActive = obj;
|
||||
this.leftActive["leftid"] = obj.id;
|
||||
} else {
|
||||
this.rightActive = obj;
|
||||
this.leftActive["rightid"] = obj.id;
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.svgHeight = this.$refs.link.getBoundingClientRect().height + "px";
|
||||
},
|
||||
watch: {
|
||||
line: {
|
||||
deep: true,
|
||||
handler: function (newV, oldV) {
|
||||
this.$emit("linechange", newV);
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep .el-checkbox__inner {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50% !important;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
::v-deep .el-checkbox__inner::after {
|
||||
border: none !important;
|
||||
}
|
||||
.linkk {
|
||||
border-top: 1px solid #ccc;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.left {
|
||||
border-left: 1px solid #ccc;
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding: 0 0 20px 20px;
|
||||
width: 300px;
|
||||
.title {
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding: 20px;
|
||||
}
|
||||
.treebox {
|
||||
margin-top: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.btn {
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
border-right: 1px solid #ccc;
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding: 0 20px 20px 0;
|
||||
width: 300px;
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding: 20px;
|
||||
}
|
||||
.treebox {
|
||||
align-items: center;
|
||||
margin-top: 25px;
|
||||
display: flex;
|
||||
.btn {
|
||||
margin-right: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.svg {
|
||||
width: 400px;
|
||||
}
|
||||
svg {
|
||||
background-color: #f5f5f6;
|
||||
width: 400px;
|
||||
min-height: 300px;
|
||||
}
|
||||
line {
|
||||
transition: all 0.1s;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,315 @@
|
|||
<template>
|
||||
<div>
|
||||
<template v-if="!lookflag">
|
||||
<el-select
|
||||
v-loading="selLoading"
|
||||
class="w-100"
|
||||
v-model="selectValue"
|
||||
:placeholder="placeholder"
|
||||
:clearable="false"
|
||||
style="width: 240px"
|
||||
size="mini"
|
||||
refs="mySelect"
|
||||
:reserve-keyword="true"
|
||||
:disabled="disabled"
|
||||
filterable
|
||||
popper-class="sele"
|
||||
:filter-method="filter"
|
||||
@change="fun"
|
||||
@focus="funx"
|
||||
@blur="funb"
|
||||
@visible-change="hidden"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item[itemObj.value]"
|
||||
:label="item[itemObj.label]"
|
||||
remote
|
||||
:value="item[itemObj.value]"
|
||||
placeholder="请输入"
|
||||
>
|
||||
</el-option>
|
||||
|
||||
<div style="bottom: -10px">
|
||||
<el-pagination
|
||||
v-if="pageModel.total > pageModel.limit"
|
||||
small
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="pageModel.pageIndex"
|
||||
:page-size="pageModel.limit"
|
||||
layout="prev, pager,next,total"
|
||||
:total="pageModel.total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-select>
|
||||
</template>
|
||||
<template v-else
|
||||
>
|
||||
<div v-loading="selLoading">{{ showValue }}</div>
|
||||
</template
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep .el-input--mini .el-input__inner {
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.w-100 {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.drop > > > .el-input__inner {
|
||||
background: #5183ff !important;
|
||||
color: white;
|
||||
border: none;
|
||||
height: 26px;
|
||||
padding: 10px 22px 10px 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.drop {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.drop > > > .el-select .el-input .el-select__caret {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<el-select
|
||||
v-loading="selLoading"
|
||||
class="w-100"
|
||||
v-model="selectValue"
|
||||
:placeholder="placeholder"
|
||||
:clearable="false"
|
||||
style="width: 240px"
|
||||
size="mini"
|
||||
refs="mySelect"
|
||||
:reserve-keyword="true"
|
||||
:disabled="disabled"
|
||||
filterable
|
||||
popper-class="sele"
|
||||
:filter-method="filter"
|
||||
@change="fun"
|
||||
@focus="funx"
|
||||
@blur="funb"
|
||||
@visible-change="hidden"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.id"
|
||||
:label="item.label"
|
||||
remote
|
||||
:value="item.id"
|
||||
placeholder="请输入"
|
||||
>
|
||||
</el-option>
|
||||
|
||||
<div style="bottom: -10px">
|
||||
<el-pagination
|
||||
v-if="pageTotal > pageSize"
|
||||
small
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="currentpage"
|
||||
:page-size="pageSize"
|
||||
layout="prev, pager,next,total"
|
||||
:total="pageTotal"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import debounce from "lodash/debounce";
|
||||
import {getUserModuleApi} from "@/api/integrationOption/integrationOption.js";
|
||||
import panelGroup from "@/views/dashboard/PanelGroup.vue";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
// 是否禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
placeholder: String,
|
||||
value: {
|
||||
type: String,
|
||||
},
|
||||
appId: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
itemObj: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
label: "label",
|
||||
value: "value"
|
||||
};
|
||||
},
|
||||
},
|
||||
lookflag: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
flag: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: [], //当前页码的数据
|
||||
pageModel: {
|
||||
total: 0,
|
||||
pageIndex: 1,
|
||||
limit: 10,
|
||||
},
|
||||
selLoading: false,
|
||||
showValue: "",
|
||||
lookLoading: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
selectValue: {
|
||||
get() {
|
||||
return this.value;
|
||||
},
|
||||
set(val) {
|
||||
this.$emit("input", val);
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// if (Object.keys(this.ruleForm).length && this.ruleForm[this.itemObj.id]) {
|
||||
// this.getSelectdata(this.ruleForm[this.itemObj.id]);
|
||||
// }
|
||||
},
|
||||
methods: {
|
||||
// 请求select信息（分页）
|
||||
async getUserModuleHandle(obj = {}) {
|
||||
if (this.flag) {
|
||||
if (this.appId) {
|
||||
this.selLoading = true;
|
||||
const res = await getUserModuleApi({
|
||||
tl: "sysApplicationService",
|
||||
as: "application",
|
||||
dj: "queryAppApi"
|
||||
}, {
|
||||
pageNum: this.pageModel.pageIndex,
|
||||
pageSize: this.pageModel.limit,
|
||||
appId: this.appId,
|
||||
...obj
|
||||
})
|
||||
console.log(res)
|
||||
if (res.status === '200') {
|
||||
this.selLoading = false;
|
||||
this.pageModel.total = res.attribute.total;
|
||||
this.options = res.attribute.list;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.selLoading = true;
|
||||
const res = await getUserModuleApi(
|
||||
{
|
||||
tl: "sysApplicationService",
|
||||
as: "application",
|
||||
dj: "queryApp",
|
||||
},
|
||||
{
|
||||
pageNum: this.pageModel.pageIndex,
|
||||
pageSize: this.pageModel.limit,
|
||||
...obj,
|
||||
}
|
||||
);
|
||||
if (res.status == 200) {
|
||||
console.log(res)
|
||||
this.pageModel.total = res.attribute.total;
|
||||
this.selLoading = false;
|
||||
this.options = res.attribute.list;
|
||||
}
|
||||
}
|
||||
},
|
||||
// 根据selectid找到value
|
||||
async getSelectdata(id) {
|
||||
if (this.flag) {
|
||||
this.selLoading = true;
|
||||
const res = await getUserModuleApi({
|
||||
tl: "sysApplicationService",
|
||||
as: "application",
|
||||
dj: "debugAppApi",
|
||||
}, {
|
||||
id: this.value,
|
||||
appId: this.appId,
|
||||
})
|
||||
console.log(res, 'api查询')
|
||||
this.options = []
|
||||
this.options.push({...res.attribute.api})
|
||||
this.selLoading = false;
|
||||
} else {
|
||||
this.selLoading = true;
|
||||
const res = await getUserModuleApi({
|
||||
tl: "sysApplicationService",
|
||||
as: "application",
|
||||
dj: "getApp",
|
||||
}, {
|
||||
id: id
|
||||
})
|
||||
this.selLoading = false;
|
||||
console.log(res, '应用查询')
|
||||
this.options = []
|
||||
this.options.push({
|
||||
...res.attribute
|
||||
})
|
||||
}
|
||||
},
|
||||
// 页码改变事件
|
||||
handleCurrentChange(val) {
|
||||
this.pageModel.pageIndex = val;
|
||||
this.getUserModuleHandle();
|
||||
},
|
||||
// select选中更改事件
|
||||
fun(val) {
|
||||
this.$emit("seleChange", this.value);
|
||||
},
|
||||
// 获得焦点
|
||||
funx() {
|
||||
this.getUserModuleHandle();
|
||||
},
|
||||
// 失去焦点
|
||||
funb() {
|
||||
},
|
||||
hidden() {
|
||||
},
|
||||
//搜索方法,将符合的数据存入options中，并分页展示
|
||||
filter: debounce(function (val) {
|
||||
// this.pageModel.pageIndex = 1;
|
||||
// this.getUserModuleApi({ lableValue: val });
|
||||
// }, 300),
|
||||
})
|
||||
},
|
||||
//监听来自父组件的数据，当数据更新时，重置展示
|
||||
watch: {
|
||||
value: {
|
||||
immediate: true,
|
||||
handler(NewV, oldV) {
|
||||
if (this.flag) {
|
||||
if (!NewV) {
|
||||
this.options = []
|
||||
}
|
||||
}
|
||||
if (NewV && this.options.length === 0) {
|
||||
console.log(1)
|
||||
this.getSelectdata(this.value)
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
|
|
@ -0,0 +1,379 @@
|
|||
<template>
|
||||
<div class="wrap">
|
||||
<div class="main" v-loading="mainLoading">
|
||||
<baseTable :tableData="tableData" :tabLoading="tabLoading"
|
||||
|
||||
:tableColumn="tableColumn" :border="false"
|
||||
>
|
||||
<!-- 触发类型-->
|
||||
<template #enabledType="{row}">
|
||||
{{ row.enabledType == 0 ? '手动' : '自动' }}
|
||||
</template>
|
||||
<!-- 启用/停用-->
|
||||
<template #enabledState="{row}">
|
||||
<el-switch
|
||||
:disabled="true"
|
||||
v-model="row.enabledState"
|
||||
active-value="1"
|
||||
inactive-value="0"
|
||||
>
|
||||
</el-switch>
|
||||
</template>
|
||||
<!-- 操作-->
|
||||
<template #operation="{row}">
|
||||
<div class="btnList">
|
||||
<div class="settingBtn" @click="sonTableEditHandle(row)">
|
||||
<img src="./images/设置.png" alt="">
|
||||
</div>
|
||||
<div class="deleBtn" @click="activedOnFunc(row)">
|
||||
<img src="./images/删除.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</baseTable>
|
||||
<div class="receiptsAddRow">
|
||||
<el-link
|
||||
type="primary"
|
||||
@click="addRowHandle"
|
||||
:underline="false"
|
||||
>+ 添加
|
||||
</el-link
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<baseRightDialog ref="settingForm"
|
||||
:footerShow="true"
|
||||
:dialogVisible.sync="settingFormShow"
|
||||
title="分发设置"
|
||||
@handleClose="settingFormShow=false"
|
||||
:submitShow="true"
|
||||
:size="'50%'"
|
||||
@handleConfirmClick="sonTableSaveHandle"
|
||||
|
||||
>
|
||||
<settingForm ref="settingForm" v-if="settingFormShow" @saveSuccessHandle="saveSuccessHandle"></settingForm>
|
||||
</baseRightDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import settingForm from './settingForm.vue'
|
||||
import baseRightDialog from '@/components/base/baseRightDialog/index.vue'
|
||||
import baseNewSelect from '@/views/applicationList/com/baseNewSelect.vue'
|
||||
import baseDialog from '@/views/integrationOption/compoments/baseDialog'
|
||||
import BaseTable from '@/views/intergrationTask/compoments/baseTable.vue'
|
||||
import baseNewForm from '@/views/intergrationTask/compoments/baseNewForm'
|
||||
import { getApiModuleApi } from '@/api/apiChunks'
|
||||
import { deepClone } from '@/utils/index.js'
|
||||
import { getUserModuleApi } from '@/api/integrationOption/integrationOption'
|
||||
import basePage from '@/views/intergrationTask/compoments/basePage.vue'
|
||||
import { authApi } from '@/api/apis/auth'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
mainLoading: false,
|
||||
saveLoading: false,
|
||||
options: [],
|
||||
// 角色字典
|
||||
roleDist: {},
|
||||
addSwitch: false,
|
||||
tabLoading: false,
|
||||
tableColumn: [
|
||||
{
|
||||
title: '应用列表',
|
||||
id: 'appName'
|
||||
},
|
||||
{
|
||||
title: '触发类型',
|
||||
id: 'enabledType'
|
||||
},
|
||||
{
|
||||
title: '新增接口',
|
||||
id: 'addName'
|
||||
},
|
||||
{
|
||||
title: '修改接口',
|
||||
id: 'updateName'
|
||||
},
|
||||
{
|
||||
title: '删除接口',
|
||||
id: 'deleteName'
|
||||
},
|
||||
{
|
||||
title: '数据权限',
|
||||
id: 'permission',
|
||||
tooltip: true
|
||||
},
|
||||
{
|
||||
title: '启用/停用',
|
||||
id: 'enabledState'
|
||||
},
|
||||
{ title: '操作', id: 'operation' }
|
||||
],
|
||||
tableData: [],
|
||||
pageModel: {
|
||||
pageIndex: 1,
|
||||
total: 10,
|
||||
limit: 10
|
||||
},
|
||||
addRole: '',
|
||||
settingFormShow: false,
|
||||
serviceOptions: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//保存/编辑成功
|
||||
saveSuccessHandle() {
|
||||
this.settingFormShow = false
|
||||
this.getTableData()
|
||||
},
|
||||
//这里需要拿到应用下啦为后续找中文环节做准备
|
||||
async initSelect() {
|
||||
const res = await authApi('sysApplicationService', '', 'queryEntity', '', {})
|
||||
console.log(res)
|
||||
this.serviceOptions.options = []
|
||||
res.attribute.forEach(item => {
|
||||
this.serviceOptions.push({
|
||||
id: item.id,
|
||||
label: item.name
|
||||
})
|
||||
})
|
||||
return true
|
||||
},
|
||||
//获取tableData
|
||||
async getTableData() {
|
||||
const res = await authApi('mdmModuleService', '', 'queryMdmDistribute', '', {
|
||||
mdmId: this.$route.query.id
|
||||
})
|
||||
this.tableData = res.attribute
|
||||
console.log(this.tableData, 'table')
|
||||
//这边需要开始处理应用列表、新增修改删除接口找中文环节
|
||||
//需要将数据权限拼起来
|
||||
let compareTypeDist = {
|
||||
'1': '=',
|
||||
'2': '!=',
|
||||
'3': '>',
|
||||
'4': '<'
|
||||
}
|
||||
let connectionSymbolDist = {
|
||||
'1': 'and',
|
||||
'2': 'or'
|
||||
}
|
||||
this.tableData.forEach(async(item) => {
|
||||
this.$set(item, 'permission', '')
|
||||
//找中文名环节
|
||||
let obj = this.serviceOptions.find(ele => {
|
||||
console.log(ele.id, item.appId, '13')
|
||||
return ele.id === item.appId
|
||||
})
|
||||
this.$set(item, 'appName', obj.label)
|
||||
let labelDist = {}
|
||||
const res2 = await authApi('sysApplicationApiService', '', 'queryEntity', '', {
|
||||
appId: item.appId
|
||||
})
|
||||
res2.attribute.forEach((item) => {
|
||||
labelDist[item.id] = item.apiName
|
||||
})
|
||||
if (item.deleteApi) {
|
||||
this.$set(item, 'deleteName', labelDist[item.deleteApi])
|
||||
}
|
||||
if (item.updateApi) {
|
||||
this.$set(item, 'updateName', labelDist[item.updateApi])
|
||||
}
|
||||
if (item.addApi) {
|
||||
this.$set(item, 'addName', labelDist[item.addApi])
|
||||
}
|
||||
//开始拼凑权限字段
|
||||
item.mdmModuleDistributeDetailEntities.forEach(ele => {
|
||||
console.log(ele, 'ele')
|
||||
let leftBracket = ele.leftBracket ? ele.leftBracket : ''
|
||||
let rightParenthesis = ele.rightParenthesis ? ele.rightParenthesis : ''
|
||||
let compareType = compareTypeDist[ele.compareType]
|
||||
let connectionSymbol = connectionSymbolDist[ele.connectionSymbol] ? connectionSymbolDist[ele.connectionSymbol] : ''
|
||||
item.permission += leftBracket + ele.filedId + ' ' + compareType + ' ' + ele.filedVaule + rightParenthesis + ' ' + connectionSymbol + ' '
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
//保存
|
||||
sonTableSaveHandle() {
|
||||
this.$refs.settingForm.$refs.typeOptionForm.submitForm()
|
||||
},
|
||||
//设置
|
||||
sonTableEditHandle(row) {
|
||||
this.settingFormShow = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.settingForm.getrowDetails(row.id)
|
||||
})
|
||||
},
|
||||
//删除
|
||||
activedOnFunc(row) {
|
||||
this.$confirm('确定删除？')
|
||||
.then(async(_) => {
|
||||
const res = await authApi('mdmModuleService', '', 'deleteMdmDistribute', '', {
|
||||
id: row.id
|
||||
})
|
||||
this.$vmNews('删除成功', 'success')
|
||||
this.getTableData()
|
||||
})
|
||||
.catch((_) => {
|
||||
})
|
||||
},
|
||||
//添加
|
||||
addRowHandle() {
|
||||
this.settingFormShow = true
|
||||
},
|
||||
async init() {
|
||||
this.mainLoading = true
|
||||
const res = await getApiModuleApi({
|
||||
tl: 'mdmService',
|
||||
as: 'mdmService',
|
||||
dj: 'queryMdmModuleRule'
|
||||
}, { id: this.$route.query.id })
|
||||
res.attribute.forEach(item => {
|
||||
item.mdmModuleRoleButtonEntities.forEach(ele => {
|
||||
item[ele.buttonType] = true
|
||||
})
|
||||
})
|
||||
this.mainLoading = false
|
||||
this.tableData = res.attribute
|
||||
},
|
||||
//close
|
||||
dialogCloseHandle() {
|
||||
this.addRole = ''
|
||||
},
|
||||
//add
|
||||
addHandle() {
|
||||
this.addSwitch = true
|
||||
},
|
||||
// 页码
|
||||
currentChangeHandle(pageModel) {
|
||||
this.pageModel = pageModel
|
||||
this.$nextTick(() => {
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
components: {
|
||||
baseNewForm,
|
||||
BaseTable,
|
||||
baseDialog,
|
||||
baseNewSelect,
|
||||
basePage,
|
||||
baseRightDialog,
|
||||
settingForm
|
||||
},
|
||||
created() {
|
||||
this.initSelect().then(() => {
|
||||
this.getTableData()
|
||||
})
|
||||
|
||||
this.$emit('flashActive', 4)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.receiptsAddRow {
|
||||
margin-top: 15px;
|
||||
border: 1px dotted #ccc;
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
|
||||
}
|
||||
|
||||
::v-deep .el-button {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.checkChunk {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
margin-left: 5px;
|
||||
background-color: #fbfbfb;
|
||||
width: 99.5%;
|
||||
overflow: auto;
|
||||
|
||||
> .btn {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
> .chunk {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
> .main {
|
||||
margin-top: 10px;
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.addBox {
|
||||
> .chunk {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.btnList {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.settingBtn {
|
||||
cursor: pointer;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: #EBEBED;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> img {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.deleBtn {
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: #EBEBED;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> img {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,649 @@
|
|||
<template>
|
||||
<div class="settingForm">
|
||||
<baseNewForm
|
||||
ref="typeOptionForm"
|
||||
:spanNumber="18"
|
||||
:isFunBtn="false"
|
||||
:formRow="formRow"
|
||||
:ruleForm="ruleForm"
|
||||
:labelPosition="'top'"
|
||||
@onSelect="typeSelectChangeHanlde"
|
||||
@onSubmit="typeOptionOnSubmit"
|
||||
>
|
||||
</baseNewForm>
|
||||
<div class="bigTitle">数据权限设置</div>
|
||||
<div class="tableName">
|
||||
<div class="title">数据主表名称</div>
|
||||
<div class="input">
|
||||
<el-select clearable v-model="tableId" @change="serviceSeleChangHadle">
|
||||
<el-option v-for="(item,index) of serviceOptions" :key="index" :label="item.label"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main" v-loading="mainLoading">
|
||||
<!-- 此处逻辑当拥有左括号或者右括号时 连接符清除并禁用-->
|
||||
<baseTable :tableData="tableData" :tabLoading="tabLoading"
|
||||
:tableColumn="tableColumn" :border="false"
|
||||
>
|
||||
<!-- 左括号-->
|
||||
<template #leftBracket="{row}">
|
||||
<el-select clearable v-model="row.leftBracket"
|
||||
>
|
||||
<el-option v-for="(item,index) of leftBracketOptions" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
<!-- 字段名称-->
|
||||
<template #filedName="{row}">
|
||||
<el-select clearable v-model="row.filedId" @change="(val)=>{filedIdChangHandle(val,row)}">
|
||||
<el-option v-for="(item,index) of labelOptions" :key="index" :label="item.label" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
<!-- 对比类型-->
|
||||
<template #compareType="{row}">
|
||||
<el-select clearable v-model="row.compareType">
|
||||
<el-option v-for="(item,index) of compareTypeOptions" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
<!-- 运算值-->
|
||||
<template #filedVaule="{row}">
|
||||
<el-input v-model="row.filedVaule"></el-input>
|
||||
</template>
|
||||
<!-- 连接符-->
|
||||
<template #connectionSymbol="{row}">
|
||||
<el-select clearable v-model="row.connectionSymbol"
|
||||
>
|
||||
<el-option v-for="(item,index) of connectionSymbolOptions" :key="index" :label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
<!-- 右括号-->
|
||||
<template #rightParenthesis="{row}">
|
||||
<el-select clearable v-model="row.rightParenthesis">
|
||||
<el-option v-for="(item,index) of rightParenthesisOptions" :key="index" :label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
<!-- 操作-->
|
||||
<template #operation="{row}">
|
||||
<div class="btnList">
|
||||
<div class="deleBtn" @click="activedOnFunc(row)">
|
||||
<img src="./images/删除.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</baseTable>
|
||||
<div class="receiptsAddRow">
|
||||
<el-link
|
||||
type="primary"
|
||||
@click="addRowHandle"
|
||||
:underline="false"
|
||||
>+ 添加
|
||||
</el-link
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import baseNewForm from '../compoments/baseNewForm'
|
||||
import BaseTable from '@/views/intergrationTask/compoments/baseTable.vue'
|
||||
import { authApi } from '@/api/apis/auth'
|
||||
import { getApiModuleApi } from '@/api/apiChunks'
|
||||
import { retrieveRawAttr } from 'echarts/lib/data/helper/dataProvider'
|
||||
|
||||
export default {
|
||||
name: 'settingForm',
|
||||
data() {
|
||||
return {
|
||||
formRow: [
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: 'select',
|
||||
title: '应用列表',
|
||||
id: 'appId',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
options: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: 'select',
|
||||
title: '触发类型',
|
||||
id: 'enabledType',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
options: [
|
||||
{
|
||||
label: '手动',
|
||||
id: '0'
|
||||
},
|
||||
{
|
||||
label: '自动',
|
||||
id: '1'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: 'select',
|
||||
title: '新增接口',
|
||||
id: 'addApi',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
options: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: 'select',
|
||||
title: '修改接口',
|
||||
id: 'updateApi',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
options: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: 'select',
|
||||
title: '删除接口',
|
||||
id: 'deleteApi',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
options: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: 'select',
|
||||
title: '新增脚本',
|
||||
id: 'addScript',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
fontSize: 16,
|
||||
options: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: 'select',
|
||||
title: '修改脚本',
|
||||
id: 'updateScript',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
fontSize: 16,
|
||||
options: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: 'select',
|
||||
title: '删除脚本',
|
||||
id: 'deleteScript',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
fontSize: 16,
|
||||
options: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
elCol: [
|
||||
{
|
||||
type: 'switch',
|
||||
title: '启用/停用',
|
||||
id: 'enabledState',
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
activeValue: '1',
|
||||
inactiveValue: '0'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
ruleForm: {},
|
||||
tableId: '',//数据源主表名称
|
||||
mainLoading: false,
|
||||
tabLoading: false,
|
||||
tableData: [],
|
||||
tableColumn: [
|
||||
{
|
||||
title: '括号',
|
||||
id: 'leftBracket'
|
||||
},
|
||||
{
|
||||
title: '字段名称',
|
||||
id: 'filedName'
|
||||
},
|
||||
{
|
||||
title: '字段编码',
|
||||
id: 'filedId'
|
||||
},
|
||||
{
|
||||
title: '运算符',
|
||||
id: 'compareType'
|
||||
},
|
||||
{
|
||||
title: '运算值',
|
||||
id: 'filedVaule'
|
||||
},
|
||||
{
|
||||
title: '连接符',
|
||||
id: 'connectionSymbol'
|
||||
},
|
||||
{
|
||||
title: '括号',
|
||||
id: 'rightParenthesis'
|
||||
},
|
||||
{ title: '操作', id: 'operation' }
|
||||
],
|
||||
compareTypeOptions: [
|
||||
{
|
||||
label: '=',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '!=',
|
||||
value: '2'
|
||||
},
|
||||
{
|
||||
label: '>',
|
||||
value: '3'
|
||||
},
|
||||
{
|
||||
label: '<',
|
||||
value: '4'
|
||||
}
|
||||
|
||||
],//对比类型options
|
||||
connectionSymbolOptions: [
|
||||
{
|
||||
label: 'and',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: 'or',
|
||||
value: '2'
|
||||
}
|
||||
],//连接符号options
|
||||
leftBracketOptions: [
|
||||
{
|
||||
label: '(',
|
||||
value: '('
|
||||
}
|
||||
],//左括号
|
||||
rightParenthesisOptions: [
|
||||
{
|
||||
label: ')',
|
||||
value: ')'
|
||||
}
|
||||
],//右括号
|
||||
serviceOptions: [],//主表
|
||||
labelOptions: [],//字段名称下啦
|
||||
labelDist: {}//字段名称字典
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//字段名称修改事件 需要存filedName
|
||||
filedIdChangHandle(val, row) {
|
||||
row.filedName = this.labelDist[val]
|
||||
},
|
||||
//主表名称下啦改变事件 1.请求字段名称做成下啦 2.清除表单内所有字段名称和编码
|
||||
async serviceSeleChangHadle(val, flag = true) {
|
||||
if (flag) {
|
||||
this.labelOptions = []
|
||||
this.labelDist = {}
|
||||
this.tableData.forEach(item => {
|
||||
item.filedName = ''
|
||||
item.filedId = ''
|
||||
})
|
||||
}
|
||||
if (val) {
|
||||
let obj = this.serviceOptions.find(item => {
|
||||
return val === item.id
|
||||
})
|
||||
const res = await getApiModuleApi({
|
||||
tl: 'mdmModuleService',
|
||||
as: '',
|
||||
dj: 'queryMdmServiceField'
|
||||
}, { mdmId: obj.mdmId, dbId: obj.dbId })
|
||||
res.attribute.forEach(item => {
|
||||
this.$set(this.labelDist, item.enName, item.chName)
|
||||
this.labelOptions.push({
|
||||
id: item.enName,
|
||||
label: item.chName
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
//表字段字段类型下啦初始化
|
||||
async initSelect() {
|
||||
//服务名下拉
|
||||
this.serviceOptions = []
|
||||
const service = await getApiModuleApi({
|
||||
tl: 'mdmModuleService',
|
||||
as: '',
|
||||
dj: 'queryMdmService'
|
||||
}, { remark: '' })
|
||||
service.attribute.forEach(item => {
|
||||
console.log(item.dbName, 'item')
|
||||
this.serviceOptions.push({
|
||||
id: item.id,
|
||||
label: item.remark,
|
||||
dbId: item.id,
|
||||
mdmId: item.mdmId
|
||||
})
|
||||
})
|
||||
console.log(this.serviceOptions, 'this.serviceOptions')
|
||||
},
|
||||
async typeSelectChangeHanlde(val, index, indexRow, row, flag = true) {
|
||||
if (flag && row.id === 'appId') {
|
||||
this.formRow[2].elCol[0].options = []
|
||||
this.formRow[3].elCol[0].options = []
|
||||
this.formRow[4].elCol[0].options = []
|
||||
this.formRow[5].elCol[0].options = []
|
||||
this.formRow[6].elCol[0].options = []
|
||||
this.formRow[7].elCol[0].options = []
|
||||
this.$set(this.ruleForm, 'addApi', '')
|
||||
this.$set(this.ruleForm, 'updateApi', '')
|
||||
this.$set(this.ruleForm, 'deleteApi', '')
|
||||
this.$set(this.ruleForm, 'addScript', '')
|
||||
this.$set(this.ruleForm, 'updateScript', '')
|
||||
this.$set(this.ruleForm, 'deleteScript', '')
|
||||
}
|
||||
//当下啦是appid时条用接口查询该app下的所有接口用在新增、修改、删除上
|
||||
if (row.id === 'appId' && val) {
|
||||
const res = await authApi('sysApplicationApiService', '', 'queryEntity', '', {
|
||||
appId: val
|
||||
})
|
||||
res.attribute.forEach((item) => {
|
||||
this.formRow[2].elCol[0].options.push({
|
||||
id: item.id,
|
||||
label: item.apiName
|
||||
})
|
||||
this.formRow[3].elCol[0].options.push({
|
||||
id: item.id,
|
||||
label: item.apiName
|
||||
})
|
||||
this.formRow[4].elCol[0].options.push({
|
||||
id: item.id,
|
||||
label: item.apiName
|
||||
})
|
||||
})
|
||||
//插件
|
||||
const res2 = await authApi('sysApplicationService', '', 'queryAppScript', '', {
|
||||
appId: val
|
||||
})
|
||||
res2.attribute.forEach((item) => {
|
||||
this.formRow[5].elCol[0].options.push({
|
||||
id: item.id,
|
||||
label: item.scriptName
|
||||
})
|
||||
this.formRow[6].elCol[0].options.push({
|
||||
id: item.id,
|
||||
label: item.scriptName
|
||||
})
|
||||
this.formRow[7].elCol[0].options.push({
|
||||
id: item.id,
|
||||
label: item.scriptName
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
//测试通过
|
||||
async typeOptionOnSubmit() {
|
||||
let flag
|
||||
//校验规则：1.允许表单为0行 2.当表单为1行时只需要判断 字段、运算符、运算值的填写 3.当表单>1行时第一行必须要填写左括号 。最后一行表单则必填右括号，非最后一行必填连接符，一行中不能同时出现左括号和右括号
|
||||
if (this.tableData.length === 1) {
|
||||
flag = this.tableData.some(item => {
|
||||
if (item.leftBracket || item.rightParenthesis || item.connectionSymbol) {
|
||||
this.$vmNews(`当仅有一行时不允许填写左右括号及连接符`)
|
||||
return true
|
||||
}
|
||||
if (!item.filedName) {
|
||||
this.$vmNews('请选择字段名称')
|
||||
return true
|
||||
}
|
||||
if (!item.compareType) {
|
||||
this.$vmNews('请选择运算符')
|
||||
return true
|
||||
}
|
||||
if (!item.filedVaule) {
|
||||
this.$vmNews('请填写运算值')
|
||||
return true
|
||||
}
|
||||
})
|
||||
} else if (this.tableData.length > 1) {
|
||||
//这边需要开始计算左括号和右括号数量 两者括号只允许左括号-右括号=1或者左括号-右括号=0否则报错
|
||||
let leftBracketNum = 0
|
||||
let rightParenthesisNum = 0
|
||||
flag = this.tableData.some((item, index) => {
|
||||
//最后一行右括号为必填
|
||||
if (index + 1 === this.tableData.length && !item.rightParenthesis) {
|
||||
this.$vmNews(`最后一行请填写右括号`)
|
||||
return true
|
||||
}
|
||||
//第一行必须填写左括号
|
||||
if (index + 1 === 1 && !item.leftBracket) {
|
||||
this.$vmNews(`首行请填写左括号`)
|
||||
return true
|
||||
}
|
||||
//除了最后一行每一行的连接符为必填
|
||||
if (index + 1 != this.tableData.length && !item.connectionSymbol) {
|
||||
this.$vmNews(`第${index + 1}请填写连接符`)
|
||||
return true
|
||||
}
|
||||
//最后一行不允许填写连接符
|
||||
if (index + 1 == this.tableData.length && item.connectionSymbol) {
|
||||
this.$vmNews(`最后一行不允许填写连接符`)
|
||||
return true
|
||||
}
|
||||
if (!item.filedName) {
|
||||
this.$vmNews(`第${index + 1}行请填写字段名称`)
|
||||
return true
|
||||
}
|
||||
if (!item.compareType) {
|
||||
this.$vmNews(`第${index + 1}行请填写运算符`)
|
||||
return true
|
||||
}
|
||||
if (!item.filedVaule) {
|
||||
this.$vmNews(`第${index + 1}行请填写运算值`)
|
||||
return true
|
||||
}
|
||||
if (item.leftBracket && item.rightParenthesis) {
|
||||
this.$vmNews(`第${index + 1}行中不允许同时存在左括号和右括号`)
|
||||
return true
|
||||
}
|
||||
//开始判断左右括号是否一致
|
||||
if (item.leftBracket) {
|
||||
leftBracketNum++
|
||||
let num = leftBracketNum - rightParenthesisNum
|
||||
if (num !== 0 && num !== 1) {
|
||||
this.$vmNews(`第${index + 1}行中左括号填写不符合规则请重新填写`)
|
||||
return true
|
||||
}
|
||||
}
|
||||
if (item.rightParenthesis) {
|
||||
rightParenthesisNum++
|
||||
let num = leftBracketNum - rightParenthesisNum
|
||||
if (num !== 0 && num !== 1) {
|
||||
this.$vmNews(`第${index + 1}行中右括号填写不符合规则请重新填写`)
|
||||
return true
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
if (flag) return
|
||||
let params = {
|
||||
...this.ruleForm,
|
||||
dbId: this.tableId,
|
||||
mdmId: this.$route.query.id,
|
||||
mdmModuleDistributeDetailEntities: this.tableData
|
||||
}
|
||||
if (params.id) {
|
||||
this.openLoading('submit')
|
||||
const res = await authApi('mdmModuleService', '', 'updateMdmDistribute', '', params)
|
||||
this.$vmNews('保存成功', 'success')
|
||||
this.$emit('saveSuccessHandle')
|
||||
} else {
|
||||
this.openLoading('submit')
|
||||
const res = await authApi('mdmModuleService', '', 'saveMdmDistribute', '', params)
|
||||
this.$vmNews('保存成功', 'success')
|
||||
this.$emit('saveSuccessHandle')
|
||||
}
|
||||
},
|
||||
addRowHandle() {
|
||||
this.tableData.push({
|
||||
'leftBracket': '',//左括号
|
||||
'filedName': '',//字段名
|
||||
'compareType': '',//对比类型 1、等于 2、不等于 3、大于 4、小于
|
||||
'filedVaule': '',//值
|
||||
'connectionSymbol': '',// 连接符号 1\and 2\or
|
||||
'rightParenthesis': ''// 右括号
|
||||
})
|
||||
},
|
||||
//删除
|
||||
activedOnFunc(row) {
|
||||
this.tableData.splice(row.index, 1)
|
||||
},
|
||||
//获取应用下啦
|
||||
async getAppList() {
|
||||
const res = await authApi('sysApplicationService', '', 'queryEntity', '', {})
|
||||
console.log(res)
|
||||
this.formRow[0].elCol[0].options = []
|
||||
res.attribute.forEach(item => {
|
||||
this.formRow[0].elCol[0].options.push({
|
||||
id: item.id,
|
||||
label: item.name
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
//编辑获取数据
|
||||
async getrowDetails(id) {
|
||||
const res = await authApi('mdmModuleService', '', 'getMdmDistribute', '', {
|
||||
id
|
||||
})
|
||||
this.ruleForm = res.attribute
|
||||
this.tableId = this.ruleForm.dbId
|
||||
this.tableData = res.attribute.mdmModuleDistributeDetailEntities
|
||||
console.log(this.tableData, '?')
|
||||
this.typeSelectChangeHanlde(this.ruleForm.appId, 0, 0, { id: 'appId' }, false)
|
||||
this.serviceSeleChangHadle(this.ruleForm.dbId, false)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getAppList()
|
||||
this.initSelect()
|
||||
},
|
||||
components: {
|
||||
BaseTable,
|
||||
baseNewForm
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
.bigTitle {
|
||||
border-top: 1px solid #EBEBEB;
|
||||
padding-top: 20px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
line-height: 22px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.tableName {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 30px 0;
|
||||
|
||||
.title {
|
||||
margin-right: 20px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.receiptsAddRow {
|
||||
margin-top: 30px;
|
||||
border: 1px dotted #ccc;
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.btnList {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.deleBtn {
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: #EBEBED;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> img {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
|
|
@ -0,0 +1,587 @@
|
|||
<template>
|
||||
<div class="monitoring">
|
||||
<header>
|
||||
<div class="left">
|
||||
<div class="search">
|
||||
<div class="chunk">
|
||||
<el-input placeholder="主数据名称" v-model="searchForm.mdmName"
|
||||
@change="submitsearchForm"
|
||||
>
|
||||
<i slot="suffix" class="el-input__icon el-icon-search" @click="submitsearchForm"></i>
|
||||
</el-input>
|
||||
</div>
|
||||
<!-- <div class="chunk">-->
|
||||
<!-- <el-select v-model="searchForm.mdmType" placeholder="主数据类型" clearable @input="submitsearchForm">-->
|
||||
<!-- <el-option v-for="item in classOptions" :key="item.value" :label="item.label" :value="item.value">-->
|
||||
<!-- </el-option>-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="right" style="display: flex;align-items: center">
|
||||
<div style="margin-right: 5px;color: #333;font-size: 12px">共 <span>{{ tableData.length }}个主数据</span></div>
|
||||
<!-- <el-button type="primary" icon="el-icon-plus" @click="addApp">新增</el-button>-->
|
||||
<el-button type="primary" icon="el-icon-plus" @click="tableButtonHandle({},{type:'new'})">新增</el-button>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="tableData">
|
||||
<div class="tableChunk" v-for="(row,index) in tableData" :key="index">
|
||||
<div class="topInfo">
|
||||
<div class="left">
|
||||
<div class="icon">
|
||||
<template v-if="row.imgUrl">
|
||||
<img :src="row.imgUrl" alt="">
|
||||
</template>
|
||||
<template v-else>
|
||||
<img src="./images/icon.png" alt="">
|
||||
</template>
|
||||
</div>
|
||||
<div class="vision"></div>
|
||||
</div>
|
||||
<div class="tableInfo">
|
||||
<div class="tableName">
|
||||
<div class="name">{{ row.mdmName }}</div>
|
||||
</div>
|
||||
<div class="tableType">{{ row.mdmType == 1 ? '档案' : '数据' }}</div>
|
||||
<div class="tableContent">
|
||||
{{ row.remark }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 遮罩层（显示两按钮）-->
|
||||
|
||||
</div>
|
||||
<div class="shade">
|
||||
<div class="btnList">
|
||||
<div class="setting" @click="tableButtonHandle(row,{type:'setting'})">
|
||||
<div class="icon">
|
||||
<img src="./images/设置.png" alt="">
|
||||
</div>
|
||||
<div class="name">设置</div>
|
||||
</div>
|
||||
<div class="dele" @click="deleteHandle(row)">
|
||||
<div class="icon">
|
||||
<img src="./images/删除.png" alt="">
|
||||
</div>
|
||||
<div class="name">删除</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<!-- <basePage :pageModel="pageModel" @update:pageModel="currentChangeHandle"></basePage>-->
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import configData from './configData.js'
|
||||
import dayjs from 'dayjs'
|
||||
import BaseTable from '@/views/intergrationTask/compoments/baseTable.vue'
|
||||
import basePage from '@/views/intergrationTask/compoments/basePage.vue'
|
||||
import { getApiModuleApi } from '@/api/apiChunks/index.js'
|
||||
import { downloadLogo } from '@/api/apis/logo.js'
|
||||
import request from '@/utils/request'
|
||||
import { authApi } from '@/api/apis/auth'
|
||||
|
||||
export default {
|
||||
name: 'listOfApps',
|
||||
data() {
|
||||
return {
|
||||
refreshLoading: false,
|
||||
searchForm: {
|
||||
task_name: ''
|
||||
},
|
||||
imgLoading: false,
|
||||
mainTabLoading: false,
|
||||
funData: [
|
||||
{
|
||||
type: 'setting',
|
||||
text: '设置',
|
||||
color: '#5a9cf8'
|
||||
}
|
||||
],
|
||||
tableColumn: configData.tableColumn,
|
||||
tableData: [],
|
||||
imgUrl: '',
|
||||
pageModel: {
|
||||
pageIndex: 1,
|
||||
total: 10,
|
||||
limit: 10
|
||||
},
|
||||
classOptions: [],
|
||||
stateOptions: [
|
||||
{
|
||||
label: '启用',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '停用',
|
||||
value: '2'
|
||||
}
|
||||
],
|
||||
methods_dist: {
|
||||
1: '接口',
|
||||
2: 'H5',
|
||||
3: 'PC网页',
|
||||
4: 'PC应用程序'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//删除
|
||||
deleteHandle(row) {
|
||||
this.$confirm('该操作将删除所有数据。确定删除吗？', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'error'
|
||||
}).then(async() => {
|
||||
this.openLoading('del')
|
||||
const res = await authApi('mdmModuleService', '', 'deleteMdm', '', {
|
||||
id: row.id
|
||||
})
|
||||
this.$vmNews('删除成功！', 'success')
|
||||
this.initMainTableData()
|
||||
})
|
||||
|
||||
},
|
||||
// 状态改变
|
||||
async appStatusChange(val, row) {
|
||||
const res = await getApiModuleApi({
|
||||
tl: 'sysApplicationService',
|
||||
as: 'application',
|
||||
dj: 'enableOrDisableApp'
|
||||
}, { id: row.id, appStatus: val })
|
||||
this.$vmNews(res.msg, 'success')
|
||||
},
|
||||
async initSelectOptions() {
|
||||
let params = {
|
||||
tab_name: 'mdm',
|
||||
column_name: 'mdm_type'
|
||||
}
|
||||
const res = await getApiModuleApi({
|
||||
tl: 'generalServiceImpl',
|
||||
as: 'dictionaryshop',
|
||||
dj: 'selectDictionaryshop'
|
||||
}, params)
|
||||
this.classOptions = []
|
||||
res.attribute.forEach((item) => {
|
||||
this.classOptions.push({
|
||||
label: item.column_content,
|
||||
value: item.column_value
|
||||
})
|
||||
})
|
||||
},
|
||||
// 添加应用
|
||||
addApp() {
|
||||
this.$router.push({
|
||||
path: '/integrationOption/masterDataAdd',
|
||||
query: { flag: 'add' }
|
||||
})
|
||||
},
|
||||
// 时间处理
|
||||
getTimeHandler(time) {
|
||||
var days = parseInt(time / (1000 * 60 * 60 * 24))
|
||||
var hours = parseInt((time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
|
||||
var minutes = parseInt((time % (1000 * 60 * 60)) / (1000 * 60))
|
||||
var seconds = (time % (1000 * 60)) / 1000
|
||||
return days + '天' + hours + '小时' + minutes + '分钟' + seconds + '秒'
|
||||
},
|
||||
// 初始化表单
|
||||
async initMainTableData(obj = {}) {
|
||||
this.refreshLoading = true
|
||||
const res = await getApiModuleApi(
|
||||
{
|
||||
tl: 'mdmModuleService',
|
||||
as: '',
|
||||
dj: 'queryMdm'
|
||||
},
|
||||
{
|
||||
...obj,
|
||||
mdmType: 2
|
||||
}
|
||||
)
|
||||
this.refreshLoading = false
|
||||
if (res.status == 200) {
|
||||
// this.pageModel.total = res.attribute.total
|
||||
this.imgLoading = true
|
||||
res.attribute.map(el => {
|
||||
this.$set(el, 'imgLoading', true)
|
||||
return request({
|
||||
url: '/kangarooDataCenterV3/entranceController/fileDownloadNew?id=' + el.mdmLogo,
|
||||
method: 'get',
|
||||
responseType: 'arraybuffer'
|
||||
}).then((res) => {
|
||||
el.imgLoading = false
|
||||
if (!res.byteLength) return
|
||||
let tempImgUrl =
|
||||
'data:image/png/jpg;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
|
||||
this.$set(el, 'imgUrl', tempImgUrl)
|
||||
})
|
||||
})
|
||||
console.log(res, 'res')
|
||||
this.tableData = res.attribute
|
||||
}
|
||||
},
|
||||
//下载头像
|
||||
async getImageUrl(id) {
|
||||
// const res = await downloadLogo(id);
|
||||
// const blob = new Blob([res]);
|
||||
// return URL.createObjectURL(blob);
|
||||
// this.imgUrl = URL.createObjectURL(blob)
|
||||
|
||||
},
|
||||
// 点击提交
|
||||
submitsearchForm() {
|
||||
this.initMainTableData(this.searchForm)
|
||||
},
|
||||
// 表单操作
|
||||
tableButtonHandle(val, item) {
|
||||
if (item.type === 'setting') {
|
||||
this.$router.push({
|
||||
path: '/integrationOption/settingMenu/masterDataEdit',
|
||||
query: { flag: 'setting', id: val.id, name: val.name, appLogo: val.appLogo, mdmCode: val.mdmCode, type: 2 }
|
||||
})
|
||||
} else if (item.type === 'copy') {
|
||||
this.$router.push({
|
||||
path: '/applicationList/applicationAdd/masterDataEdit',
|
||||
query: { flag: 'copy', id: val.id, appLogo: val.appLogo }
|
||||
})
|
||||
} else if (item.type === 'new') {
|
||||
this.$router.push({
|
||||
path: '/integrationOption/settingMenu/masterDataEdit',
|
||||
query: { flag: 'new', type: 2 }
|
||||
})
|
||||
}
|
||||
},
|
||||
// 页码
|
||||
currentChangeHandle(pageModel) {
|
||||
this.pageModel = pageModel
|
||||
this.$nextTick(() => {
|
||||
this.initMainTableData(this.searchForm)
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 操作框的宽度
|
||||
funWidth() {
|
||||
return this.funData.length * 70
|
||||
}
|
||||
},
|
||||
components: {
|
||||
BaseTable,
|
||||
basePage
|
||||
},
|
||||
created() {
|
||||
// this.initMainTableData();
|
||||
this.initSelectOptions()
|
||||
},
|
||||
activated() {
|
||||
this.initMainTableData(this.searchForm)
|
||||
},
|
||||
beforeRouteLeave(to, from, next) {
|
||||
if (!to.path.includes('applicationList')
|
||||
) {
|
||||
next()
|
||||
this.$destroy('listOfApps')
|
||||
} else {
|
||||
next()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep .el-button {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.monitoring {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
overflow: auto;
|
||||
border-radius: 8px;
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
|
||||
.left {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
.search {
|
||||
margin-left: 30px;
|
||||
display: flex;
|
||||
|
||||
> .chunk {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
margin-top: 5px;
|
||||
padding: 5px 20px 5px;
|
||||
height: calc(100vh - 200px);
|
||||
border-radius: 20px;
|
||||
background-color: #fff;
|
||||
overflow: auto;
|
||||
|
||||
.tableData {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
.tableChunk {
|
||||
width: 30%;
|
||||
margin-bottom: 15px;
|
||||
margin-left: 2.5%;
|
||||
border-radius: 24px;
|
||||
border: 1px solid #E5E5E5;
|
||||
padding-bottom: 10px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.topInfo {
|
||||
display: flex;
|
||||
margin: 15px 0 0 15px;
|
||||
|
||||
.left {
|
||||
.icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid #F0F0F2;
|
||||
padding: 14px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
//.vision{
|
||||
// margin-top: 10px;
|
||||
// margin-left: 30px;
|
||||
// width: 29px;
|
||||
// height: 16px;
|
||||
// border-radius: 2px;
|
||||
// border: 1px solid #FF8B0F;
|
||||
//}
|
||||
}
|
||||
|
||||
.tableInfo {
|
||||
margin-left: 15px;
|
||||
|
||||
.tableName {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> .name {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #333333;
|
||||
line-height: 33px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.tableType {
|
||||
width: 38px;
|
||||
height: 24px;
|
||||
background: #1478F6;
|
||||
border-radius: 5px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.tableContent {
|
||||
margin-top: 5px;
|
||||
width: 95%;
|
||||
height: 40px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
display: -webkit-box; /*作为弹性伸缩盒子模型显示。*/
|
||||
-webkit-box-orient: vertical; /*作为弹性伸缩盒子模型显示。*/
|
||||
-webkit-line-clamp: 2; //*显示的行*/
|
||||
overflow: hidden; /*溢出隐藏*/
|
||||
/* 对于连字情况或者纯字母，可以解决 */
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shade {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
background-color: rgba(0, 0, 0, .7);
|
||||
|
||||
.btnList {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.setting {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
img {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-top: 10px;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.dele {
|
||||
cursor: pointer;
|
||||
margin-left: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
img {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-top: 10px;
|
||||
color: #FF3B30;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.shade {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.nameCard {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
|
||||
.image {
|
||||
width: 29px;
|
||||
height: 29px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.nameInfo {
|
||||
margin-left: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
|
||||
> .name {
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
> .version {
|
||||
margin-top: 1px;
|
||||
color: #ff8b0f;
|
||||
font-size: 12px;
|
||||
height: 20px;
|
||||
border: 0.5px solid #ff8b0f;
|
||||
padding: 0 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.taskClasses {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
span {
|
||||
margin-top: 5px;
|
||||
border-radius: 2px;
|
||||
padding: 2px 10px;
|
||||
margin-left: 8px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.state1 {
|
||||
background-color: #1478f6;
|
||||
}
|
||||
|
||||
.state2 {
|
||||
background-color: #f64114;
|
||||
}
|
||||
|
||||
.state3 {
|
||||
background-color: #00bd72;
|
||||
}
|
||||
|
||||
.state4 {
|
||||
background-color: #b700bd;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,371 @@
|
|||
<template>
|
||||
<div class="logsDeatil">
|
||||
<div class="tabs">
|
||||
<div class="chunk" :class="{acivted:activeName==='1'}" @click="tabsHandleClick('1')">下发日志</div>
|
||||
<div class="chunk" :class="{acivted:activeName==='2'}" @click="tabsHandleClick('2')">写入日志</div>
|
||||
</div>
|
||||
<div class="search-container">
|
||||
<el-input
|
||||
v-model="inputValue"
|
||||
placeholder="源数据"
|
||||
|
||||
@input="handleInput"
|
||||
class="search-text"
|
||||
type="text"
|
||||
></el-input>
|
||||
<el-select
|
||||
v-model="selectedValue"
|
||||
class="search-text"
|
||||
@change="handleSelectChange"
|
||||
placeholder="请选择状态">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-button
|
||||
icon="el-icon-search"
|
||||
type="primary"
|
||||
class="searchIcon"
|
||||
@click="handleSearch"
|
||||
></el-button>
|
||||
<el-button
|
||||
icon="el-icon-refresh"
|
||||
type="primary"
|
||||
class="searchIcon"
|
||||
@click="clearInput"
|
||||
></el-button>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="table" v-loading="tableLoading">
|
||||
<baseTable :tableData="tableData" :tabLoading="tabLoading"
|
||||
:tableColumn="tableColumn" :border="false" tableHeight="73vh"
|
||||
>
|
||||
<!-- 状态-->
|
||||
<template #dataType="{row}">
|
||||
{{ row.dataType == 1 ? '成功' : '失败' }}
|
||||
</template>
|
||||
<!-- 操作类型-->
|
||||
<template #optionType="{row}">
|
||||
{{ row.optionType }}
|
||||
</template>
|
||||
</baseTable>
|
||||
</div>
|
||||
|
||||
|
||||
<footer>
|
||||
<basePage :pageModel="pageModel" @update:pageModel="currentChangeHandle"></basePage>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!--<template>-->
|
||||
<!-- <div>-->
|
||||
|
||||
<!-- <base-layout-->
|
||||
|
||||
<!-- >-->
|
||||
<!-- <div slot="main" slot-scope="{ tableHeight }">-->
|
||||
<!-- <div class="logsDeatil">-->
|
||||
<!-- <div class="tabs">-->
|
||||
<!-- <div class="chunk" :class="{acivted:activeName==='1'}" @click="tabsHandleClick('1')">下发日志</div>-->
|
||||
<!-- <div class="chunk" :class="{acivted:activeName==='2'}" @click="tabsHandleClick('2')">写入日志</div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <div class="table" v-loading="tableLoading">-->
|
||||
<!-- <baseTable :tableData="tableData" :tabLoading="tabLoading"-->
|
||||
<!-- :tableColumn="tableColumn" :border="false" tableHeight="73vh"-->
|
||||
<!-- >-->
|
||||
<!-- <!– 状态–>-->
|
||||
<!-- <template #dataType="{row}">-->
|
||||
<!-- {{ row.dataType == 1 ? '成功' : '失败' }}-->
|
||||
<!-- </template>-->
|
||||
<!-- <!– 操作类型–>-->
|
||||
<!-- <template #optionType="{row}">-->
|
||||
<!-- {{ row.optionType }}-->
|
||||
<!-- </template>-->
|
||||
<!-- </baseTable>-->
|
||||
<!-- </div>-->
|
||||
|
||||
|
||||
<!-- <footer>-->
|
||||
<!-- <basePage :pageModel="pageModel" @update:pageModel="currentChangeHandle"></basePage>-->
|
||||
<!-- </footer>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </base-layout>-->
|
||||
<!-- </div>-->
|
||||
<!--</template>-->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
import BaseTable from '@/views/intergrationTask/compoments/baseTable.vue'
|
||||
import basePage from '@/views/intergrationTask/compoments/basePage.vue'
|
||||
import { authApi } from '@/api/apis/auth'
|
||||
import baseLayout from "@/components/base/baseLayout/index.vue";
|
||||
|
||||
export default {
|
||||
name: 'index',
|
||||
components: {baseLayout,basePage, BaseTable },
|
||||
data() {
|
||||
return {
|
||||
inputValue:'',
|
||||
selectedValue:'',
|
||||
options:[
|
||||
{value:'1',label:'成功'},
|
||||
{value:'2',label:'失败'},
|
||||
{value:'',label:'不筛选'},
|
||||
],
|
||||
activeName: '1',
|
||||
tableData: [],
|
||||
tableColumn: [
|
||||
{
|
||||
title: '目标应用',
|
||||
id: 'targetApp'
|
||||
},
|
||||
{
|
||||
title: '目标api',
|
||||
id: 'targetApi'
|
||||
},
|
||||
{
|
||||
title: '源数据',
|
||||
id: 'sourceData',
|
||||
tooltip: true
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
id: 'dataType'
|
||||
},
|
||||
{
|
||||
title: '返回信息',
|
||||
id: 'remark',
|
||||
tooltip: true
|
||||
},
|
||||
{
|
||||
title: '操作类型',
|
||||
id: 'optionType'
|
||||
}
|
||||
],
|
||||
requirementList: [
|
||||
{
|
||||
placeholder: "源数据",
|
||||
prop: "sourceData",
|
||||
tag: "elInput",
|
||||
}
|
||||
],
|
||||
tabLoading: false,
|
||||
tableColumnTypeOne: [
|
||||
{
|
||||
title: '目标应用',
|
||||
id: 'targetApp'
|
||||
},
|
||||
{
|
||||
title: '目标api',
|
||||
id: 'targetApi'
|
||||
},
|
||||
{
|
||||
title: '源数据',
|
||||
id: 'sourceData',
|
||||
tooltip: true
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
id: 'dataType'
|
||||
},
|
||||
{
|
||||
title: '返回信息',
|
||||
id: 'remark',
|
||||
tooltip: true
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
id: 'create_time'
|
||||
},
|
||||
{
|
||||
title: '操作类型',
|
||||
id: 'optionType'
|
||||
}
|
||||
],//下发日志用
|
||||
tableColumnTypeTwo: [
|
||||
{
|
||||
title: '来源名称',
|
||||
id: 'sourceName'
|
||||
},
|
||||
{
|
||||
title: '编码',
|
||||
id: 'code'
|
||||
},
|
||||
{
|
||||
title: '源数据',
|
||||
id: 'sourceData',
|
||||
tooltip: true
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
id: 'dataType'
|
||||
},
|
||||
{
|
||||
title: '返回信息',
|
||||
id: 'remark',
|
||||
tooltip: true
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
id: 'create_time'
|
||||
},
|
||||
{
|
||||
title: '操作类型',
|
||||
id: 'optionType'
|
||||
},
|
||||
{
|
||||
title: '操作人',
|
||||
id: 'optionName'
|
||||
}
|
||||
|
||||
],//写入日志用
|
||||
pageModel: {
|
||||
pageIndex: 1,
|
||||
total: 10,
|
||||
limit: 10
|
||||
},
|
||||
optionTypeDist: {
|
||||
'1': '新增',
|
||||
'2': '修改',
|
||||
'3': '删除'
|
||||
},
|
||||
tableLoading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//选项卡切换事件
|
||||
tabsHandleClick(num) {
|
||||
if (this.activeName === num) return
|
||||
this.activeName = num
|
||||
this.pageModel.pageIndex = 1
|
||||
this.initMainTableData()
|
||||
},
|
||||
handleSelectChange(){
|
||||
|
||||
this.initMainTableData()
|
||||
},
|
||||
clearInput() {
|
||||
this.inputValue = ''; // 将inputValue重置为空字符串
|
||||
},
|
||||
handleSearch() {
|
||||
this.initMainTableData()
|
||||
},
|
||||
|
||||
// 页码
|
||||
currentChangeHandle(pageModel) {
|
||||
this.pageModel = pageModel
|
||||
this.$nextTick(() => {
|
||||
this.initMainTableData(this.searchForm)
|
||||
})
|
||||
},
|
||||
async initMainTableData() {
|
||||
if (this.activeName === '2') {
|
||||
const res = await authApi('mdmModuleService', '', 'queryMdmOptionLogPage', '', {
|
||||
pageNum: this.pageModel.pageIndex,
|
||||
pageSize: this.pageModel.limit,
|
||||
mdmCode: this.$route.query.mdmCode,
|
||||
sourceData: this.inputValue,
|
||||
dataType:this.selectedValue,
|
||||
})
|
||||
this.tableColumn = this.tableColumnTypeTwo
|
||||
this.tableData = res.attribute.list
|
||||
this.pageModel.total = res.attribute.total
|
||||
} else {
|
||||
const res = await authApi('mdmModuleService', '', 'queryMdmDistributeLogPage', '', {
|
||||
pageNum: this.pageModel.pageIndex,
|
||||
pageSize: this.pageModel.limit,
|
||||
mdmCode: this.$route.query.mdmCode,
|
||||
sourceData: this.inputValue,
|
||||
dataType:this.selectedValue,
|
||||
})
|
||||
this.tableColumn = this.tableColumnTypeOne
|
||||
this.tableData = res.attribute.list
|
||||
this.pageModel.total = res.attribute.total
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initMainTableData()
|
||||
this.$emit('flashActive', 5)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
.search-container {
|
||||
display: flex; /* 使用Flexbox布局 */
|
||||
align-items: center; /* 垂直居中对齐 */
|
||||
justify-content: flex-start; /* 水平起始对齐 */
|
||||
margin-bottom: 15px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.searchIcon {
|
||||
font-size: 18px;
|
||||
/* padding: 0 12px; */
|
||||
height: 32px;
|
||||
/* line-height: 32px; */
|
||||
margin-left: 8px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-text {
|
||||
//flex-grow: 1; /* 让输入框占据剩余空间 */
|
||||
margin-right: 10px; /* 与按钮保持一定间距 */
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.logsDeatil {
|
||||
margin-left: 5px;
|
||||
background-color: #fff;
|
||||
padding: 10px;
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #EBEBEB;
|
||||
padding-left: 118px;
|
||||
|
||||
.chunk {
|
||||
cursor: pointer;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
line-height: 22px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
padding: 20px 12px;
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
.acivted {
|
||||
border-bottom: 2px #1478F6 solid !important;
|
||||
color: #1478F6 !important;
|
||||
font-weight: 700;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,482 @@
|
|||
<script src="configData.js"></script>
|
||||
<template>
|
||||
<div class="wrap">
|
||||
|
||||
<div class="main">
|
||||
<div class="btn">
|
||||
<div class="title" style="margin-top: 0">{{ bigTitle }}</div>
|
||||
<div class="chunkList">
|
||||
<div class="chunk">
|
||||
</div>
|
||||
<div class="chunk">
|
||||
<el-button
|
||||
v-if="showForm"
|
||||
icon="el-icon-close"
|
||||
@click="showForm=false"
|
||||
>取消
|
||||
</el-button>
|
||||
<el-button v-if="showForm" icon="el-icon-first-aid-kit" type="primary" @click="saveHandle"
|
||||
:loading="saveLoading"
|
||||
>保存
|
||||
</el-button>
|
||||
<el-button v-if="!showForm" icon="el-icon-first-aid-kit" type="primary" @click="showForm=true">编辑
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 展示页-->
|
||||
<template v-if="!showForm">
|
||||
<div class="planInfo">
|
||||
<div class="img">
|
||||
<img v-if="imgUrl" :src="imgUrl" class="avatar">
|
||||
<img v-else src="./images/icon.png" alt="">
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="name">{{ this.ruleForm.mdmName }}</div>
|
||||
<div class="remark">{{ this.ruleForm.remark }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-if="showForm">
|
||||
<!-- 编辑页-->
|
||||
<div class="upload">
|
||||
<div class="uploadMain">
|
||||
<div class="left">
|
||||
<div class="smalltitle">主数据logo</div>
|
||||
<el-upload class="avatar-uploader" ref="upload" action="https://jsonplaceholder.typicode.com/posts/"
|
||||
:on-preview="handlePreview" :before-upload="handleProgress"
|
||||
list-type="picture" :limit="1" :disabled="lookFlag"
|
||||
:show-file-list="false"
|
||||
>
|
||||
<div class="line">
|
||||
<div class="left" v-loading="imgLoading">
|
||||
<img v-if="imgUrl" :src="imgUrl" class="avatar">
|
||||
<img v-else src="./images/icon.png" alt="">
|
||||
</div>
|
||||
<div class="right" v-if="!lookFlag">
|
||||
<el-button size="small" type="primary" :loading="loading">点击上传</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="tip" class="el-upload__tip" v-if="!lookFlag">
|
||||
只能上传jpg/png文件，且不超过2MB
|
||||
</div>
|
||||
</el-upload>
|
||||
</div>
|
||||
<div class="right">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form">
|
||||
<baseNewForm ref="mainForm" :spanNumber="24" :isFunBtn="false" :lookFlag="lookFlag" :formRule="!lookFlag"
|
||||
:formRow="formRow" :ruleForm="ruleForm" @onSubmit="onSubmit"
|
||||
></baseNewForm>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="rule">
|
||||
<div class="title">数据源</div>
|
||||
<div class="line">
|
||||
<div class="name">单据规则</div>
|
||||
<template v-if="!receiptsTableData.length">
|
||||
<div class="value">尚未设置</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="value">
|
||||
<div class="receiptsItem" v-for="(item,index) in receiptsTableData">{{ item.dbValue }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getApiModuleApi } from '@/api/apiChunks/index.js'
|
||||
import configData from './configData'
|
||||
import baseNewForm from '@/views/intergrationTask/compoments/baseNewForm'
|
||||
import request from '@/utils/request'
|
||||
import { authApi } from '@/api/apis/auth'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fileList: [],
|
||||
iconBase64: '',
|
||||
imgUrl: '',
|
||||
loading: false,
|
||||
appLogo: '',
|
||||
ruleForm: {
|
||||
accessMode: []
|
||||
},
|
||||
lookFlag: false,
|
||||
formRow: configData.addForm,
|
||||
imgLoading: false,
|
||||
saveLoading: false,
|
||||
showForm: false,
|
||||
billid: '',
|
||||
receiptsTableData: [],
|
||||
bigTitle: '主数据信息',
|
||||
mdmType: 1
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 文件上传相关时间
|
||||
handleProgress(fileList, file) {
|
||||
console.log(fileList, 'file')
|
||||
if (!fileList) return
|
||||
if (
|
||||
fileList.type.split('/')[1] != 'jpeg' &&
|
||||
fileList.type.split('/')[1] != 'png'
|
||||
) {
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: '只能上传jpg/png文件'
|
||||
})
|
||||
return false
|
||||
}
|
||||
if (fileList.size >= 2000000) {
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: '文件大小不超过2MB'
|
||||
})
|
||||
return false
|
||||
}
|
||||
this.handleAvatarSuccess({}, fileList).then(res => {
|
||||
})
|
||||
},
|
||||
handlePreview(file) {
|
||||
},
|
||||
async handleAvatarSuccess(res, file) {
|
||||
this.loading = true
|
||||
this.$refs.upload.clearFiles()//清理文件上传状态
|
||||
this.imgUrl = URL.createObjectURL(file)
|
||||
let formData = new FormData()
|
||||
formData.append('file', file)
|
||||
formData.append('fileFlag', true)
|
||||
formData.append('businessType', 'application')
|
||||
return request({
|
||||
url: '/kangarooDataCenterV3/entranceController/fileUpload',
|
||||
method: 'post',
|
||||
data: formData
|
||||
}).then((res) => {
|
||||
if (res.status === '200') {
|
||||
console.log(res)
|
||||
this.$vmNews('上传成功', 'success')
|
||||
this.appLogo = res.attribute.id
|
||||
this.loading = false
|
||||
}
|
||||
})
|
||||
this.loading = false
|
||||
return true
|
||||
|
||||
},
|
||||
async beforeUpload(file) {
|
||||
},
|
||||
// 保存按钮、列表验证
|
||||
saveHandle() {
|
||||
this.$refs.mainForm.submitForm()
|
||||
|
||||
},
|
||||
//验证成功准备上传
|
||||
async onSubmit() {
|
||||
this.saveLoading = true
|
||||
if (!this.billid) {
|
||||
this.openLoading('submit')
|
||||
const res = await authApi('mdmModuleService', '', 'saveMdm', '', {
|
||||
updateType: 1, ...this.ruleForm, mdmLogo: this.appLogo, mdmType: this.mdmType
|
||||
})
|
||||
this.$vmNews('保存成功', 'success')
|
||||
this.saveLoading = false
|
||||
this.$emit('saveSuccessInit', res, this.initEditFormData)
|
||||
this.showForm = false
|
||||
} else {
|
||||
this.openLoading('submit')
|
||||
const res = await authApi('mdmModuleService', '', 'updateMdm', '', {
|
||||
...this.ruleForm,
|
||||
mdmLogo: this.appLogo,
|
||||
mdmType: this.mdmType
|
||||
})
|
||||
this.$vmNews('保存成功', 'success')
|
||||
this.saveLoading = false
|
||||
this.showForm = false
|
||||
this.$emit('saveSuccess')
|
||||
}
|
||||
},
|
||||
// 获取下拉数据(作废）
|
||||
async initSelectOptions() {
|
||||
let params = {
|
||||
tab_name: 'mdm',
|
||||
column_name: 'mdm_type'
|
||||
}
|
||||
const res = await getApiModuleApi({
|
||||
tl: 'generalServiceImpl',
|
||||
as: 'dictionaryshop',
|
||||
dj: 'selectDictionaryshop'
|
||||
}, params)
|
||||
this.formRow[1].elCol[0].options = []
|
||||
res.attribute.forEach((item) => {
|
||||
this.formRow[1].elCol[0].options.push({
|
||||
label: item.column_content,
|
||||
id: item.column_value
|
||||
})
|
||||
})
|
||||
console.log(this.formRow[1].elCol[0].options)
|
||||
},
|
||||
// 复制-获取表单数据
|
||||
async initCopyFormData() {
|
||||
const res = await getApiModuleApi({
|
||||
tl: 'sysApplicationService',
|
||||
as: 'application',
|
||||
dj: 'getCopyApp'
|
||||
}, { id: this.$route.query.id })
|
||||
this.ruleForm = res.attribute
|
||||
this.ruleForm.accessMode = JSON.parse(res.attribute.accessMode)
|
||||
},
|
||||
async initEditFormData() {
|
||||
const res = await getApiModuleApi({
|
||||
tl: 'mdmModuleService',
|
||||
as: '',
|
||||
dj: 'getMdm'
|
||||
}, { id: this.billid })
|
||||
this.ruleForm = res.attribute
|
||||
if (res.attribute.mdmLogo) {
|
||||
this.appLogo = res.attribute.mdmLogo
|
||||
this.getLogoUrl()
|
||||
} else {
|
||||
// this.imgUrl = false
|
||||
}
|
||||
},
|
||||
//下载logo
|
||||
getLogoUrl() {
|
||||
this.imgLoading = true
|
||||
let id = this.appLogo ? this.appLogo : this.$route.query.appLogo
|
||||
return request({
|
||||
url: '/kangarooDataCenterV3/entranceController/fileDownloadNew?id=' + id,
|
||||
method: 'get',
|
||||
responseType: 'arraybuffer'
|
||||
}).then((res) => {
|
||||
this.imgLoading = false
|
||||
if (!res.byteLength) {
|
||||
this.imgUrl = false
|
||||
return
|
||||
}
|
||||
this.imgUrl =
|
||||
'data:image/png/jpg;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
|
||||
})
|
||||
},
|
||||
//单据规则获取
|
||||
async getRuleHandle() {
|
||||
this.openLoading('submit')
|
||||
const res = await authApi('mdmModuleService', '', 'getMdmTableCodeRule', '', {
|
||||
mdmId: this.billid
|
||||
})
|
||||
this.receiptsTableData = res.attribute
|
||||
}
|
||||
|
||||
},
|
||||
components: {
|
||||
baseNewForm
|
||||
},
|
||||
created() {
|
||||
// 请求下拉options
|
||||
// this.initSelectOptions()
|
||||
// 判断是什么类型进来的
|
||||
if (this.$route.query.id) {
|
||||
this.billid = this.$route.query.id
|
||||
this.initEditFormData()
|
||||
this.getRuleHandle()
|
||||
}
|
||||
if (this.$route.query.type) {
|
||||
this.bigTitle = '数据中心信息'
|
||||
this.mdmType = 2
|
||||
} else {
|
||||
this.bigTitle = '主数据信息'
|
||||
this.mdmType = 1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep .el-button {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
width: 99.5%;
|
||||
overflow: auto;
|
||||
border-radius: 8px;
|
||||
margin-left: 5px;
|
||||
|
||||
.title {
|
||||
margin-bottom: 10px;
|
||||
margin-left: 32px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
color: #333333;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
> .main {
|
||||
background-color: #fff;
|
||||
border-radius: 16px;
|
||||
|
||||
> .btn {
|
||||
padding-top: 20px;
|
||||
padding-right: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.chunkList {
|
||||
display: flex;
|
||||
|
||||
> .chunk {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
> .planInfo {
|
||||
margin-top: 17px;
|
||||
padding-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> .img {
|
||||
margin-left: 24px;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-left: 11px;
|
||||
|
||||
.name {
|
||||
margin-bottom: 14px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #333333;
|
||||
line-height: 25px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.remark {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #999999;
|
||||
line-height: 25px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .upload {
|
||||
background-color: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 12px 30px 0px;
|
||||
|
||||
> .title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
> .uploadMain {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
> .left {
|
||||
> .smalltitle {
|
||||
font-size: 18px;
|
||||
color: #999999;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.left {
|
||||
border: 1px dashed #999999;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
|
||||
> img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .form {
|
||||
overflow: auto;
|
||||
margin-top: 10px;
|
||||
background-color: #fff;
|
||||
border-radius: 16px;
|
||||
width: 100%;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
> .rule {
|
||||
padding: 30px 0;
|
||||
margin-top: 10px;
|
||||
background-color: #fff;
|
||||
border-radius: 16px;
|
||||
|
||||
.line {
|
||||
margin-left: 32px;
|
||||
display: flex;
|
||||
|
||||
.name {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #999999;
|
||||
line-height: 25px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.value {
|
||||
display: flex;
|
||||
margin-left: 15px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #333333;
|
||||
line-height: 25px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,245 @@
|
|||
<template>
|
||||
<div class="settingMenu">
|
||||
<div class="menu scrollable-box">
|
||||
<div class="appInfo">
|
||||
<div class="img" v-loading="imgLoading">
|
||||
<template v-if="imgUrl">
|
||||
<img :src="imgUrl" alt="" style="width: 64px; height: 64px"/>
|
||||
</template>
|
||||
<template v-if="!imgUrl">
|
||||
<img src="./images/icon.png" alt="" style="width: 64px; height: 64px"/>
|
||||
</template>
|
||||
</div>
|
||||
<div class="appName">{{ name }}</div>
|
||||
<div class="version" v-if="code">编码：{{ code }}</div>
|
||||
</div>
|
||||
<div class="menuList">
|
||||
<div class="item" v-for="(item, index) in settingMunu" :key="index" @click="menuClick(index, item)">
|
||||
<div class="icon" :class="{ actived: index == menuActived }">
|
||||
<svg-icon class="iconfont" :icon-class="item.icon" fill="currentColor"/>
|
||||
</div>
|
||||
<div class="title">{{ item.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<router-view ref="routerChunk" :build="billid" @saveSuccess="saveSuccess" @saveSuccessInit="saveSuccessInit"
|
||||
@flashActive="flashActive"
|
||||
></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getApiModuleApi } from '@/api/apiChunks/index.js'
|
||||
import configData from './configData'
|
||||
// 应用信息
|
||||
import masterDataAdd from './masterDataAdd.vue'
|
||||
import request from '@/utils/request'
|
||||
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
menuActived: 0,
|
||||
settingMunu: configData.settingMenu,
|
||||
query: this.$route.query,
|
||||
name: '',
|
||||
code: '',
|
||||
imgUrl: '',
|
||||
versionNumber: '',
|
||||
imgLoading: false,
|
||||
billid: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//当新增完基本信息后
|
||||
saveSuccessInit(res, fun) {
|
||||
console.log(res, 'res')
|
||||
this.billid = res.attribute.id
|
||||
this.mdmCode = res.attribute.mdmCode
|
||||
this.$refs.routerChunk.billid = this.billid
|
||||
this.initEditFormData()
|
||||
fun()
|
||||
},
|
||||
flashActive(val) {
|
||||
this.menuActived = val
|
||||
},
|
||||
async initEditFormData() {
|
||||
const res = await getApiModuleApi({
|
||||
tl: 'mdmModuleService',
|
||||
as: '',
|
||||
dj: 'getMdm'
|
||||
}, { id: this.billid })
|
||||
if (res.status === '200') {
|
||||
this.name = res.attribute.mdmName
|
||||
this.code = res.attribute.mdmCode
|
||||
//下载logo
|
||||
this.imgLoading = true
|
||||
return request({
|
||||
url: '/kangarooDataCenterV3/entranceController/fileDownloadNew?id=' + res.attribute.mdmLogo,
|
||||
method: 'get',
|
||||
responseType: 'arraybuffer'
|
||||
}).then((res) => {
|
||||
this.imgLoading = false
|
||||
if (!res.byteLength) {
|
||||
this.imgUrl = false
|
||||
return
|
||||
}
|
||||
this.imgUrl =
|
||||
'data:image/png/jpg;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
|
||||
})
|
||||
}
|
||||
},
|
||||
//菜单点击事件
|
||||
saveSuccess() {
|
||||
this.initEditFormData()
|
||||
},
|
||||
menuClick(index, item) {
|
||||
console.log(index, item)
|
||||
if (index !== 0 && !this.billid) {
|
||||
this.$vmNews('当前为新增请先新增后再跳转该模块')
|
||||
return
|
||||
}
|
||||
if (item.path && !this.$route.path.includes(item.path)) {
|
||||
this.menuActived = index
|
||||
this.$set(this.query, 'id', this.billid)
|
||||
this.$set(this.query, 'mdmCode', this.mdmCode)
|
||||
this.$router.replace({
|
||||
path: item.path,
|
||||
query: this.query
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
masterDataAdd
|
||||
},
|
||||
mounted() {
|
||||
if (this.$route.query.flag !== 'new') {
|
||||
this.billid = this.$route.query.id
|
||||
this.mdmCode = this.$route.query.mdmCode
|
||||
this.initEditFormData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.settingMenu {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
background: #f5f5f5 !important;
|
||||
.menu {
|
||||
position: fixed;
|
||||
width: 162px;
|
||||
height: calc(100% - 75px);
|
||||
//margin-right: 1%;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
margin-top: 10px;
|
||||
|
||||
|
||||
.appInfo {
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #f3f3f3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> .img {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.appName {
|
||||
margin-top: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.version {
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
padding: 1px 2px;
|
||||
color: #ff8b0f;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.menuList {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.item {
|
||||
margin-bottom: 20px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> .icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> .iconfont {
|
||||
font-weight: 300;
|
||||
font-size: 35px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #1478f6 !important;
|
||||
|
||||
> .iconfont {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .title {
|
||||
margin-top: 10px;
|
||||
color: #333333;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
.actived {
|
||||
background-color: #1478f6 !important;
|
||||
|
||||
> .iconfont {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 10px;
|
||||
margin-left: 170px;
|
||||
margin-right: 10px;
|
||||
flex: 1;
|
||||
width: calc(100% - 205px);
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -10,12 +10,12 @@
|
|||
<i slot="suffix" class="el-input__icon el-icon-search" @click="submitsearchForm"></i>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="chunk">
|
||||
<el-select v-model="searchForm.mdmType" placeholder="主数据类型" clearable @input="submitsearchForm">
|
||||
<el-option v-for="item in classOptions" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<!-- <div class="chunk">-->
|
||||
<!-- <el-select v-model="searchForm.mdmType" placeholder="主数据类型" clearable @input="submitsearchForm">-->
|
||||
<!-- <el-option v-for="item in classOptions" :key="item.value" :label="item.label" :value="item.value">-->
|
||||
<!-- </el-option>-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="right" style="display: flex;align-items: center">
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
<div class="tableName">
|
||||
<div class="name">{{ row.mdmName }}</div>
|
||||
</div>
|
||||
<div class="tableType">档案</div>
|
||||
<div class="tableType">{{ row.mdmType == 1 ? '档案' : '数据' }}</div>
|
||||
<div class="tableContent">
|
||||
{{ row.remark }}
|
||||
</div>
|
||||
|
|
@ -198,7 +198,8 @@ export default {
|
|||
dj: 'queryMdm'
|
||||
},
|
||||
{
|
||||
...obj
|
||||
...obj,
|
||||
mdmType: 1
|
||||
}
|
||||
)
|
||||
this.refreshLoading = false
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
<div class="main">
|
||||
<div class="btn">
|
||||
<div class="title" style="margin-top: 0">主数据信息</div>
|
||||
<div class="title" style="margin-top: 0">{{ bigTitle }}</div>
|
||||
<div class="chunkList">
|
||||
<div class="chunk">
|
||||
</div>
|
||||
|
|
@ -116,7 +116,9 @@ export default {
|
|||
saveLoading: false,
|
||||
showForm: false,
|
||||
billid: '',
|
||||
receiptsTableData: []
|
||||
receiptsTableData: [],
|
||||
bigTitle: '主数据信息',
|
||||
mdmType: 1
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -183,7 +185,7 @@ export default {
|
|||
if (!this.billid) {
|
||||
this.openLoading('submit')
|
||||
const res = await authApi('mdmModuleService', '', 'saveMdm', '', {
|
||||
updateType: 1, ...this.ruleForm, mdmLogo: this.appLogo, mdmType: 1
|
||||
updateType: 1, ...this.ruleForm, mdmLogo: this.appLogo, mdmType: this.mdmType
|
||||
})
|
||||
this.$vmNews('保存成功', 'success')
|
||||
this.saveLoading = false
|
||||
|
|
@ -194,7 +196,7 @@ export default {
|
|||
const res = await authApi('mdmModuleService', '', 'updateMdm', '', {
|
||||
...this.ruleForm,
|
||||
mdmLogo: this.appLogo,
|
||||
mdmType: 1
|
||||
mdmType: this.mdmType
|
||||
})
|
||||
this.$vmNews('保存成功', 'success')
|
||||
this.saveLoading = false
|
||||
|
|
@ -286,6 +288,15 @@ export default {
|
|||
this.initEditFormData()
|
||||
this.getRuleHandle()
|
||||
}
|
||||
if (this.$route.query.type) {
|
||||
this.bigTitle = '数据中心信息'
|
||||
this.mdmType = 2
|
||||
this.formRow[0].elCol[0].title = '单据名称'
|
||||
} else {
|
||||
this.bigTitle = '主数据信息'
|
||||
this.formRow[0].elCol[0].title = '主数据名称'
|
||||
this.mdmType = 1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,172 @@
|
|||
/**
|
||||
desc 应用管理
|
||||
*/
|
||||
<template>
|
||||
<div class="workbench">
|
||||
<h3 class="workbench-title">全部应用</h3>
|
||||
<el-tabs>
|
||||
<el-tab-pane
|
||||
v-for="(item, index) in routeData"
|
||||
:key="index"
|
||||
:label="item.meta ? item.meta.title : ''"
|
||||
v-if="item.meta"
|
||||
>
|
||||
<div class="menuContainer">
|
||||
<div
|
||||
v-for="(list, listIndex) in item.children"
|
||||
class="menuBox"
|
||||
@click="goRoute(item, list)"
|
||||
v-if="!list.meta.hidden"
|
||||
>
|
||||
<img class="menuIcon" :src="list.meta.icon" v-if="list.meta.icon" />
|
||||
<img class="menuIcon" src="../logo1.png" v-else />
|
||||
<p class="menuContent">{{ list.meta.title }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { TagsView } from "@/layout/components";
|
||||
import request from "@/utils/request";
|
||||
|
||||
export default {
|
||||
name: "ApplicationCenter",
|
||||
components: {
|
||||
TagsView,
|
||||
},
|
||||
created() {
|
||||
this.$store.dispatch("settings/changeSetting", {
|
||||
key: "showTagsView",
|
||||
value: true,
|
||||
});
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
routeData: [], //菜单数据
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
let routeList = localStorage.getItem("routeList")
|
||||
? JSON.parse(localStorage.getItem("routeList"))
|
||||
: [];
|
||||
this.routeData = this.OrganizeMenus(routeList);
|
||||
},
|
||||
methods: {
|
||||
goRoute(val, item) {
|
||||
let routeData = this.$router.resolve({
|
||||
path: item.path,
|
||||
name: item.name,
|
||||
query: { mdmCode: item.meta.mdmCode, viewType: item.meta.viewType },
|
||||
});
|
||||
window.open(routeData.href, "_self");
|
||||
},
|
||||
// 处理icon
|
||||
handlerIcon(item) {
|
||||
let str = "";
|
||||
if (item.includes("?")) {
|
||||
str = item.split("?")[1];
|
||||
} else {
|
||||
str = item;
|
||||
}
|
||||
return str;
|
||||
},
|
||||
handlerIconColor(item) {
|
||||
let color = "";
|
||||
if (item.includes("?")) {
|
||||
color = item.split("?")[0];
|
||||
} else {
|
||||
color = "#1478F6";
|
||||
}
|
||||
return color;
|
||||
},
|
||||
// 整理菜单数据
|
||||
OrganizeMenus(data) {
|
||||
let arrData = [];
|
||||
// 应用管理
|
||||
let arrID = ["51928849267a463799cc4a336a6bee71"];
|
||||
arrID.forEach((a) => {
|
||||
data.forEach((b) => {
|
||||
if (a === b.id) {
|
||||
arrData.push(b);
|
||||
}
|
||||
});
|
||||
});
|
||||
arrData.forEach((bItem) => {
|
||||
if (bItem.children && bItem.children.length > 0) {
|
||||
bItem.children.forEach((cItem) => {
|
||||
if (cItem.meta.icon) {
|
||||
this.getLogoUrl(cItem.meta.icon).then((res) => {
|
||||
let imageUrl =
|
||||
"data:image/png/jpg;base64," +
|
||||
btoa(
|
||||
new Uint8Array(res).reduce(
|
||||
(el, byte) => el + String.fromCharCode(byte),
|
||||
""
|
||||
)
|
||||
);
|
||||
this.$set(cItem.meta, "icon", imageUrl);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
return arrData;
|
||||
},
|
||||
getLogoUrl(id) {
|
||||
return request({
|
||||
url:
|
||||
"/kangarooDataCenterV3/entranceController/fileDownloadNew?id=" + id,
|
||||
method: "get",
|
||||
responseType: "arraybuffer",
|
||||
}).then((res) => {
|
||||
return res;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.workbench {
|
||||
background: #fff;
|
||||
padding: 15px;
|
||||
//margin: 0 10px;
|
||||
}
|
||||
|
||||
.workbench-title {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.menuContainer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.menuBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #fafafa;
|
||||
padding: 10px 15px;
|
||||
border-radius: 10px;
|
||||
width: 200px;
|
||||
margin: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menuIcon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
border-radius: 12px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.menuContent {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,172 @@
|
|||
/**
|
||||
desc 集成任务
|
||||
*/
|
||||
<template>
|
||||
<div class="workbench">
|
||||
<h3 class="workbench-title">全部应用</h3>
|
||||
<el-tabs>
|
||||
<el-tab-pane
|
||||
v-for="(item, index) in routeData"
|
||||
:key="index"
|
||||
:label="item.meta ? item.meta.title : ''"
|
||||
v-if="item.meta"
|
||||
>
|
||||
<div class="menuContainer">
|
||||
<div
|
||||
v-for="(list, listIndex) in item.children"
|
||||
class="menuBox"
|
||||
@click="goRoute(item, list)"
|
||||
v-if="!list.meta.hidden"
|
||||
>
|
||||
<img class="menuIcon" :src="list.meta.icon" v-if="list.meta.icon" />
|
||||
<img class="menuIcon" src="../logo1.png" v-else />
|
||||
<p class="menuContent">{{ list.meta.title }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { TagsView } from "@/layout/components";
|
||||
import request from "@/utils/request";
|
||||
|
||||
export default {
|
||||
name: "ApplicationCenter",
|
||||
components: {
|
||||
TagsView,
|
||||
},
|
||||
created() {
|
||||
this.$store.dispatch("settings/changeSetting", {
|
||||
key: "showTagsView",
|
||||
value: true,
|
||||
});
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
routeData: [], //菜单数据
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
let routeList = localStorage.getItem("routeList")
|
||||
? JSON.parse(localStorage.getItem("routeList"))
|
||||
: [];
|
||||
this.routeData = this.OrganizeMenus(routeList);
|
||||
},
|
||||
methods: {
|
||||
goRoute(val, item) {
|
||||
let routeData = this.$router.resolve({
|
||||
path: item.path,
|
||||
name: item.name,
|
||||
query: { mdmCode: item.meta.mdmCode, viewType: item.meta.viewType },
|
||||
});
|
||||
window.open(routeData.href, "_self");
|
||||
},
|
||||
// 处理icon
|
||||
handlerIcon(item) {
|
||||
let str = "";
|
||||
if (item.includes("?")) {
|
||||
str = item.split("?")[1];
|
||||
} else {
|
||||
str = item;
|
||||
}
|
||||
return str;
|
||||
},
|
||||
handlerIconColor(item) {
|
||||
let color = "";
|
||||
if (item.includes("?")) {
|
||||
color = item.split("?")[0];
|
||||
} else {
|
||||
color = "#1478F6";
|
||||
}
|
||||
return color;
|
||||
},
|
||||
// 整理菜单数据
|
||||
OrganizeMenus(data) {
|
||||
let arrData = [];
|
||||
// 集成任务
|
||||
let arrID = ["5f1182ffd4c1451291a211c4a820fb6b"];
|
||||
arrID.forEach((a) => {
|
||||
data.forEach((b) => {
|
||||
if (a === b.id) {
|
||||
arrData.push(b);
|
||||
}
|
||||
});
|
||||
});
|
||||
arrData.forEach((bItem) => {
|
||||
if (bItem.children && bItem.children.length > 0) {
|
||||
bItem.children.forEach((cItem) => {
|
||||
if (cItem.meta.icon) {
|
||||
this.getLogoUrl(cItem.meta.icon).then((res) => {
|
||||
let imageUrl =
|
||||
"data:image/png/jpg;base64," +
|
||||
btoa(
|
||||
new Uint8Array(res).reduce(
|
||||
(el, byte) => el + String.fromCharCode(byte),
|
||||
""
|
||||
)
|
||||
);
|
||||
this.$set(cItem.meta, "icon", imageUrl);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
return arrData;
|
||||
},
|
||||
getLogoUrl(id) {
|
||||
return request({
|
||||
url:
|
||||
"/kangarooDataCenterV3/entranceController/fileDownloadNew?id=" + id,
|
||||
method: "get",
|
||||
responseType: "arraybuffer",
|
||||
}).then((res) => {
|
||||
return res;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.workbench {
|
||||
background: #fff;
|
||||
padding: 15px;
|
||||
//margin: 0 10px;
|
||||
}
|
||||
|
||||
.workbench-title {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.menuContainer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.menuBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #fafafa;
|
||||
padding: 10px 15px;
|
||||
border-radius: 10px;
|
||||
width: 200px;
|
||||
margin: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menuIcon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
border-radius: 12px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.menuContent {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,172 @@
|
|||
/**
|
||||
desc 主数据中心
|
||||
*/
|
||||
<template>
|
||||
<div class="workbench">
|
||||
<h3 class="workbench-title">全部应用</h3>
|
||||
<el-tabs>
|
||||
<el-tab-pane
|
||||
v-for="(item, index) in routeData"
|
||||
:key="index"
|
||||
:label="item.meta ? item.meta.title : ''"
|
||||
v-if="item.meta"
|
||||
>
|
||||
<div class="menuContainer">
|
||||
<div
|
||||
v-for="(list, listIndex) in item.children"
|
||||
class="menuBox"
|
||||
@click="goRoute(item, list)"
|
||||
v-if="!list.meta.hidden"
|
||||
>
|
||||
<img class="menuIcon" :src="list.meta.icon" v-if="list.meta.icon" />
|
||||
<img class="menuIcon" src="../logo1.png" v-else />
|
||||
<p class="menuContent">{{ list.meta.title }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { TagsView } from "@/layout/components";
|
||||
import request from "@/utils/request";
|
||||
|
||||
export default {
|
||||
name: "MasterDataCenter",
|
||||
components: {
|
||||
TagsView,
|
||||
},
|
||||
created() {
|
||||
this.$store.dispatch("settings/changeSetting", {
|
||||
key: "showTagsView",
|
||||
value: true,
|
||||
});
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
routeData: [], //菜单数据
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
let routeList = localStorage.getItem("routeList")
|
||||
? JSON.parse(localStorage.getItem("routeList"))
|
||||
: [];
|
||||
this.routeData = this.OrganizeMenus(routeList);
|
||||
},
|
||||
methods: {
|
||||
goRoute(val, item) {
|
||||
let routeData = this.$router.resolve({
|
||||
path: item.path,
|
||||
name: item.name,
|
||||
query: { mdmCode: item.meta.mdmCode, viewType: item.meta.viewType },
|
||||
});
|
||||
window.open(routeData.href, "_self");
|
||||
},
|
||||
// 处理icon
|
||||
handlerIcon(item) {
|
||||
let str = "";
|
||||
if (item.includes("?")) {
|
||||
str = item.split("?")[1];
|
||||
} else {
|
||||
str = item;
|
||||
}
|
||||
return str;
|
||||
},
|
||||
handlerIconColor(item) {
|
||||
let color = "";
|
||||
if (item.includes("?")) {
|
||||
color = item.split("?")[0];
|
||||
} else {
|
||||
color = "#1478F6";
|
||||
}
|
||||
return color;
|
||||
},
|
||||
// 整理菜单数据
|
||||
OrganizeMenus(data) {
|
||||
let arrData = [];
|
||||
// 主数据中心
|
||||
let arrID = ["973fa79b42e64c9e968e9a5b1295c486"];
|
||||
arrID.forEach((a) => {
|
||||
data.forEach((b) => {
|
||||
if (a === b.id) {
|
||||
arrData.push(b);
|
||||
}
|
||||
});
|
||||
});
|
||||
arrData.forEach((bItem) => {
|
||||
if (bItem.children && bItem.children.length > 0) {
|
||||
bItem.children.forEach((cItem) => {
|
||||
if (cItem.meta.icon) {
|
||||
this.getLogoUrl(cItem.meta.icon).then((res) => {
|
||||
let imageUrl =
|
||||
"data:image/png/jpg;base64," +
|
||||
btoa(
|
||||
new Uint8Array(res).reduce(
|
||||
(el, byte) => el + String.fromCharCode(byte),
|
||||
""
|
||||
)
|
||||
);
|
||||
this.$set(cItem.meta, "icon", imageUrl);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
return arrData;
|
||||
},
|
||||
getLogoUrl(id) {
|
||||
return request({
|
||||
url:
|
||||
"/kangarooDataCenterV3/entranceController/fileDownloadNew?id=" + id,
|
||||
method: "get",
|
||||
responseType: "arraybuffer",
|
||||
}).then((res) => {
|
||||
return res;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.workbench {
|
||||
background: #fff;
|
||||
padding: 15px;
|
||||
//margin: 0 10px;
|
||||
}
|
||||
|
||||
.workbench-title {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.menuContainer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.menuBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #fafafa;
|
||||
padding: 10px 15px;
|
||||
border-radius: 10px;
|
||||
width: 200px;
|
||||
margin: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menuIcon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
border-radius: 12px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.menuContent {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -101,11 +101,11 @@ export default {
|
|||
type: '7'
|
||||
},
|
||||
{
|
||||
name: '银行账户',
|
||||
name: '采购订单',//原来叫银行账户
|
||||
type: '8'
|
||||
},
|
||||
{
|
||||
name: '资产类别',
|
||||
name: '销售订单',//原来叫资产类别
|
||||
type: '9'
|
||||
}
|
||||
],
|
||||
|
|
|
|||
|
|
@ -40,13 +40,13 @@ module.exports = {
|
|||
// detail: https://cli.vuejs.org/config/#devserver-proxy
|
||||
[process.env.VUE_APP_BASE_API]: {
|
||||
// target: `http://hzya.ufyct.com:9067/`,
|
||||
// target: `http://ufidahz.com.cn:9067/`,
|
||||
target: `http://ufidahz.com.cn:9067/`,
|
||||
// target: `http://127.0.0.1:9081/`,
|
||||
// target: `http://192.168.2.78:9999`,
|
||||
// target: `http://192.168.2.85:9999`,
|
||||
// target: `http://192.168.2.78:8080`,
|
||||
// target: `http://192.168.2.78:9999`,
|
||||
target: `http://192.168.2.185:9999`,
|
||||
// target: `http://192.168.2.185:9999`,
|
||||
// target: `http://192.168.2.83:9999`,
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue