主数据修改、数据源、显示字段
This commit is contained in:
hyt
parent
a549dedf45
commit
a6a8f235d1
|
|
@ -74,7 +74,7 @@
|
|||
"vue-meta": "2.4.0",
|
||||
"vue-quill-editor": "^3.0.6",
|
||||
"vue-router": "3.4.9",
|
||||
"vuedraggable": "2.24.3",
|
||||
"vuedraggable": "^2.24.3",
|
||||
"vuex": "3.6.0",
|
||||
"xlsx": "^0.17.0"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@
|
|||
@input="(val) => limitPhoneNum(val, ruleForm, row.id)"
|
||||
:maxlength="row.maxlength ? row.maxlength * 1 : 50"
|
||||
:min="1"
|
||||
:max="row.max ? row.max : 99999"
|
||||
:max="row.max ? row.max : 255"
|
||||
:label="!row.placeholder ? '描述文字' : row.placeholder"
|
||||
>
|
||||
<template slot="append" v-if="row.message">{{ row.message }}</template>
|
||||
|
|
|
|||
|
|
@ -73,6 +73,7 @@ const optionFormRow = [
|
|||
type: "num",
|
||||
title: "长度",
|
||||
id: "filedLength",
|
||||
max:255,
|
||||
row: 24,
|
||||
disabled: false,
|
||||
required: true,
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
|
|
@ -1,271 +1,505 @@
|
|||
<script src="configData.js"></script>
|
||||
<template>
|
||||
<div class="wrap">
|
||||
<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">
|
||||
<div class="left" v-loading="mainLoading">
|
||||
<div class="title">
|
||||
数据表
|
||||
</div>
|
||||
<div class="receipts">
|
||||
<div class="label">单据规则:</div>
|
||||
<div class="receiptsList" @click="openReceiptsHandle">
|
||||
<template v-if="!receiptsShowTableData.length">点击选择单据规则</template>
|
||||
<template v-else>
|
||||
<div class="receiptsItem" v-for="(item,index) in receiptsShowTableData">{{ item.dbValue }}</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mainTable">
|
||||
<BaseTable
|
||||
ref="mainTable"
|
||||
:tableData="mainTableData"
|
||||
:tabLoading="mainTabLoading"
|
||||
:tableColumn="mainTableColumn"
|
||||
:border="false"
|
||||
:funData="mainFunData"
|
||||
tableHeight="25vh"
|
||||
:highlightCurrent="true"
|
||||
@radioChange="mainOnClick"
|
||||
@onFunc="mainOnFunc"
|
||||
>
|
||||
<template #dbType="{row}">
|
||||
{{ row.dbType === '1' ? '主表' : '子表' }}
|
||||
</template>
|
||||
</BaseTable>
|
||||
<div class="mainAddRow">
|
||||
<el-link
|
||||
type="primary"
|
||||
@click="addMainAddRow"
|
||||
:underline="false"
|
||||
>+ 添加
|
||||
</el-link
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title">
|
||||
表字段
|
||||
</div>
|
||||
<div class="activedTable">
|
||||
<BaseTable
|
||||
ref="activedTable"
|
||||
:tableData="activedTableData"
|
||||
:tabLoading="activedTabLoading"
|
||||
:tableColumn="activedTableColumn"
|
||||
:border="false"
|
||||
:funData="activedFunData"
|
||||
tableHeight="30vh"
|
||||
:highlightCurrent="true"
|
||||
@radioChange="activedOnClick"
|
||||
@onFunc="activedOnFunc"
|
||||
>
|
||||
<template #filedType="{row}">
|
||||
{{ dataTypeDist[row.filedType] }}
|
||||
</template>
|
||||
</BaseTable>
|
||||
<div class="mainAddRow" v-if="mainActivedRow">
|
||||
<el-link
|
||||
type="primary"
|
||||
@click="activedAddRow"
|
||||
:underline="false"
|
||||
>+ 添加
|
||||
</el-link
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div v-loading=>
|
||||
<div class="right">
|
||||
<template v-if="activedTableRow">
|
||||
<div class="btn">
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="activedRowSaveHandle"
|
||||
>暂存
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="title">
|
||||
表字段
|
||||
</div>
|
||||
<div class="optionForm">
|
||||
<baseNewForm
|
||||
ref="optionForm"
|
||||
:spanNumber="24"
|
||||
:isFunBtn="false"
|
||||
:formRow="optionFormRow"
|
||||
:ruleForm="optionRuleForm"
|
||||
:labelPosition="'left'"
|
||||
@onSelect="selectChangeHanlde"
|
||||
@inputBlur="optionFormInputBlur"
|
||||
@onSubmit="optionOnSubmit"
|
||||
:disabled="sonFormDisabled"
|
||||
>
|
||||
</baseNewForm>
|
||||
<baseNewForm
|
||||
ref="typeOptionForm"
|
||||
:spanNumber="24"
|
||||
:isFunBtn="false"
|
||||
:formRow="typeOptionFormRow"
|
||||
:ruleForm="typeOptionRuleForm"
|
||||
:labelPosition="'left'"
|
||||
@onSelect="typeSelectChangeHanlde"
|
||||
@onSubmit="typeOptionOnSubmit"
|
||||
:disabled="sonFormDisabled"
|
||||
>
|
||||
</baseNewForm>
|
||||
<baseNewForm
|
||||
ref="propertyForm"
|
||||
:spanNumber="24"
|
||||
:isFunBtn="false"
|
||||
:formRow="propertyFormRow"
|
||||
:ruleForm="propertyRuleForm"
|
||||
:labelPosition="'left'"
|
||||
@onSubmit="propertyOnSubmit"
|
||||
:disabled="sonFormDisabled"
|
||||
|
||||
>
|
||||
</baseNewForm>
|
||||
</div>
|
||||
<div class="smtitle">
|
||||
可选控间属性
|
||||
</div>
|
||||
<div class="checkBoxList">
|
||||
<el-checkbox-group :disabled="sonFormDisabled" 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>
|
||||
</template>
|
||||
<template v-else-if="mainActivedRow">
|
||||
<div class="btn">
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="mainActivedRowSaveHandle"
|
||||
>暂存
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="title">
|
||||
数据表
|
||||
</div>
|
||||
<div class="optionForm">
|
||||
<baseNewForm
|
||||
ref="mainOptionForm"
|
||||
:spanNumber="24"
|
||||
:isFunBtn="false"
|
||||
:formRow="mainOptionRow"
|
||||
:ruleForm="mainOptionForm"
|
||||
:labelPosition="'left'"
|
||||
@onSubmit="mainOptionOnSubmit"
|
||||
>
|
||||
</baseNewForm>
|
||||
<!--数据表-->
|
||||
<div class="mainTable">
|
||||
<div class="bigTitle">数据表</div>
|
||||
<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>
|
||||
<baseDialog v-model="receiptsShow" width="50%" @confirm="receiptsConfirm">
|
||||
<div class="receiptsTable">
|
||||
<div class="table">
|
||||
<BaseTable
|
||||
ref="receiptsTable"
|
||||
:showIndex="true"
|
||||
:tableData="receiptsTableData"
|
||||
:tableColumn="receiptsTableColumn"
|
||||
ref="mainTable"
|
||||
:tableData="mainTableData"
|
||||
:tabLoading="mainTabLoading"
|
||||
:tableColumn="mainTableColumn"
|
||||
:border="false"
|
||||
:funData="receiptsFunData"
|
||||
tableHeight="30vh"
|
||||
@onFunc="receiptsOnFunc"
|
||||
tableHeight="68vh"
|
||||
:highlightCurrent="true"
|
||||
@radioChange="mainOnClick"
|
||||
>
|
||||
<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>
|
||||
{{ row.dbType === '1' ? '主表' : '子表' }}
|
||||
</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="请选择">
|
||||
<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>
|
||||
<template #operation="{row}">
|
||||
<div class="btnList">
|
||||
<div class="settingBtn" @click="mainTableEditHandle(row)">
|
||||
<img src="./images/设置.png" alt="">
|
||||
</div>
|
||||
<div class="deleBtn" @click="mainDeleOnFunc">
|
||||
<img src="./images/删除.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</BaseTable>
|
||||
<div class="receiptsAddRow">
|
||||
<div class="mainAddRow">
|
||||
<el-link
|
||||
type="primary"
|
||||
@click="receiptsAddRow"
|
||||
@click="addMainAddRow"
|
||||
:underline="false"
|
||||
>+ 添加
|
||||
>+ 数据表添加
|
||||
</el-link
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</baseDialog>
|
||||
</div>
|
||||
<!-- 表字段-->
|
||||
<div class="sonTable">
|
||||
<div class="bigTitle">表字段</div>
|
||||
<div class="table">
|
||||
<BaseTable
|
||||
ref="activedTable"
|
||||
:tableData="activedTableData"
|
||||
:tabLoading="activedTabLoading"
|
||||
:tableColumn="activedTableColumn"
|
||||
:border="false"
|
||||
tableHeight="73vh"
|
||||
: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">
|
||||
<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="'30%'"
|
||||
@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 {}
|
||||
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 => {
|
||||
this.serviceOptions.push({
|
||||
id: item.dbName,
|
||||
label: item.remark
|
||||
})
|
||||
})
|
||||
},
|
||||
// 主表上方表格行点击
|
||||
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) {
|
||||
this.$confirm('确定删除？')
|
||||
.then(async(_) => {
|
||||
this.openLoading('submit')
|
||||
const res = await authApi('mdmModuleService', '', 'deleteMdmDb', '', {
|
||||
mdmId: this.$route.query.id,
|
||||
...row
|
||||
})
|
||||
this.$vmNews('删除成功！', 'success')
|
||||
this.getMainTableHandle()
|
||||
})
|
||||
.catch((_) => {
|
||||
})
|
||||
},
|
||||
//数据表添加按钮
|
||||
addMainAddRow() {
|
||||
if (!this.receiptsTableData.length) {
|
||||
this.$vmNews('请添加单据规则后，再添加数据表。')
|
||||
}
|
||||
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.$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.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']
|
||||
let form = this.$refs.mainTable.mainOptionForm
|
||||
//判断黑名单
|
||||
if (blacklist.includes(form.dbName)) {
|
||||
this.$vmNews('当前英文名为系统默认字段，请修改')
|
||||
return
|
||||
}
|
||||
//判断是主表还是子表 "dbType":"2",//类型 1、主表 2、明细
|
||||
if (this.mainTableData.length && !form.id) {
|
||||
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()
|
||||
}
|
||||
} 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()
|
||||
}
|
||||
}
|
||||
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
//表字段保存
|
||||
sonTableSaveHandle() {
|
||||
this.$refs.sonTable.$refs.optionForm.submitForm()
|
||||
|
||||
},
|
||||
//获取数据表
|
||||
async getMainTableHandle() {
|
||||
this.openLoading('detail')
|
||||
const res = await authApi('mdmModuleService', '', 'queryMdmDb', '', {
|
||||
mdmId: this.$route.query.id
|
||||
})
|
||||
this.mainTableData = res.attribute
|
||||
},
|
||||
//表字段校验通过正式开始保存
|
||||
async sonSaveHandle(params) {
|
||||
console.log('进来了')
|
||||
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)
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
components: {
|
||||
baseRightDialog, baseForm,
|
||||
baseNewForm,
|
||||
BaseTable,
|
||||
baseDialog
|
||||
baseDialog,
|
||||
ruleAddTable,
|
||||
mainTable,
|
||||
sonTable
|
||||
},
|
||||
created() {
|
||||
//调用单据规则
|
||||
this.getRuleHandle()
|
||||
//调用获取数据表
|
||||
this.getMainTableHandle()
|
||||
//表字段的数据类型下啦获取
|
||||
this.initSelect()
|
||||
//调用左侧选中状态
|
||||
this.$emit('flashActive', 1)
|
||||
},
|
||||
watch: {},
|
||||
computed: {}
|
||||
|
|
@ -280,4 +514,129 @@ export default {
|
|||
::v-deep .el-form-item {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
margin-left: 15px;
|
||||
border-radius: 8px;
|
||||
|
||||
.mainAddRow {
|
||||
margin-top: 30px;
|
||||
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: 25px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.mainTable {
|
||||
flex: 1;
|
||||
padding: 30px 20px 20px;
|
||||
border-right: 1px solid #EBEBEB;;
|
||||
|
||||
.rule {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
.name {
|
||||
margin-right: 20px;
|
||||
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;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-left: 15px;
|
||||
cursor: pointer;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: #EBEBED;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> img {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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: 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>
|
||||
|
|
|
|||
|
|
@ -1199,6 +1199,8 @@ export default {
|
|||
|
||||
}
|
||||
|
||||
</style>
|
||||
<style>
|
||||
.receiptsAddRow {
|
||||
margin-top: 30px;
|
||||
border: 1px dotted #ccc;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,70 @@
|
|||
<template>
|
||||
<div class="mainTable">
|
||||
<baseNewForm
|
||||
ref="mainOptionForm"
|
||||
:spanNumber="24"
|
||||
:isFunBtn="false"
|
||||
:formRow="mainOptionRow"
|
||||
:ruleForm="mainOptionForm"
|
||||
:labelPosition="'left'"
|
||||
@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: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
mainOptionOnSubmit() {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
<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="请选择">
|
||||
<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>
|
||||
</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'
|
||||
}
|
||||
],//单据规则表单
|
||||
ruleTypeOptions: [
|
||||
{
|
||||
label: '连接符号',
|
||||
value: '1'
|
||||
}, {
|
||||
label: '字符串',
|
||||
value: '2'
|
||||
}, {
|
||||
label: '日期',
|
||||
value: '3'
|
||||
}, {
|
||||
label: '流水号',
|
||||
value: '4'
|
||||
}
|
||||
],//单据规则下啦
|
||||
receiptsFunData: [
|
||||
{
|
||||
text: '删除',
|
||||
color: 'red'
|
||||
}
|
||||
]//单据规则按钮
|
||||
}
|
||||
},
|
||||
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">
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,720 @@
|
|||
<template>
|
||||
<div class="sonTable">
|
||||
<div class="optionForm">
|
||||
<baseNewForm
|
||||
ref="optionForm"
|
||||
:spanNumber="24"
|
||||
:isFunBtn="false"
|
||||
:formRow="optionFormRow"
|
||||
:ruleForm="optionRuleForm"
|
||||
:labelPosition="'left'"
|
||||
@onSelect="selectChangeHanlde"
|
||||
@inputBlur="optionFormInputBlur"
|
||||
@onSubmit="optionOnSubmit"
|
||||
>
|
||||
</baseNewForm>
|
||||
<baseNewForm
|
||||
ref="typeOptionForm"
|
||||
:spanNumber="24"
|
||||
:isFunBtn="false"
|
||||
:formRow="typeOptionFormRow"
|
||||
:ruleForm="typeOptionRuleForm"
|
||||
:labelPosition="'left'"
|
||||
@onSelect="typeSelectChangeHanlde"
|
||||
@onSubmit="typeOptionOnSubmit"
|
||||
>
|
||||
</baseNewForm>
|
||||
<baseNewForm
|
||||
ref="propertyForm"
|
||||
:spanNumber="24"
|
||||
:isFunBtn="false"
|
||||
:formRow="propertyFormRow"
|
||||
:ruleForm="propertyRuleForm"
|
||||
:labelPosition="'left'"
|
||||
@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 {
|
||||
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-zA-Z][a-zA-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' }, true)
|
||||
}
|
||||
this.selectChangeHanlde(this.optionRuleForm.type, '', '', { id: 'type' }, 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)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
//表单输入框失焦事件（为了让中文名称可以给显示名）
|
||||
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) {
|
||||
const res = await getApiModuleApi({
|
||||
tl: 'mdmModuleService',
|
||||
as: '',
|
||||
dj: 'queryMdmServiceField'
|
||||
}, { mdmId: this.$route.query.id, dbId: this.mainTempClick.id })
|
||||
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']
|
||||
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
|
||||
}
|
||||
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: #000;
|
||||
font-weight: 600;
|
||||
padding: 20px 0;
|
||||
border-top: 1px solid #EBEBEB;
|
||||
}
|
||||
|
||||
.checkBoxList {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
|
|
@ -3,8 +3,8 @@
|
|||
<div class="btn">
|
||||
<div class="chunk">
|
||||
<el-button
|
||||
icon="el-icon-back"
|
||||
@click="
|
||||
icon="el-icon-back"
|
||||
@click="
|
||||
$router.replace({ path: '/integrationOption/masterDataOptions' })
|
||||
"
|
||||
>返回
|
||||
|
|
@ -13,10 +13,10 @@
|
|||
</div>
|
||||
<div class="chunk">
|
||||
<el-button
|
||||
icon="el-icon-first-aid-kit"
|
||||
type="primary"
|
||||
@click="saveHandle"
|
||||
:loading="saveLoading"
|
||||
icon="el-icon-first-aid-kit"
|
||||
type="primary"
|
||||
@click="saveHandle"
|
||||
:loading="saveLoading"
|
||||
>保存
|
||||
</el-button
|
||||
>
|
||||
|
|
@ -32,342 +32,349 @@
|
|||
</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">
|
||||
ref="optionForm"
|
||||
:spanNumber="24"
|
||||
:isFunBtn="false"
|
||||
:formRow="formRow"
|
||||
:ruleForm="ruleForm"
|
||||
:labelPosition="'right'"
|
||||
labelWidth="100px"
|
||||
@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 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="downBtn">
|
||||
<el-button type="primary" icon="el-icon-bottom" @click="downHanlde"
|
||||
:disabled="rightActived.length !==1"></el-button>
|
||||
<div class="showCheckBoxList">
|
||||
<div class="showCheckBoxItem" v-for="(item,index) in dbQueryFiled" :key="item.viewFiled">
|
||||
<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="item.viewFiled">
|
||||
<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="item.viewFiled">
|
||||
<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="item.viewFiled">
|
||||
<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="item.viewFiled">
|
||||
<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="item.buttonType">
|
||||
<div class="name">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- -->
|
||||
<base-right-dialog
|
||||
ref="mainTableAddtDialog"
|
||||
:footerShow="true"
|
||||
:dialogVisible.sync="mainTableDialogShow"
|
||||
:title="activeTitle + '设置'"
|
||||
@handleClose="mainTableDialogShow=false"
|
||||
:submitShow="true"
|
||||
:size="'50%'"
|
||||
@handleConfirmClick="mainTableSaveHandle"
|
||||
>
|
||||
<div class="mainTable">
|
||||
<settingChunk ref="settingChunk" @saveSuccessEmit="saveSuccessEmit"></settingChunk>
|
||||
</div>
|
||||
</base-right-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import baseNewForm from "@/views/intergrationTask/compoments/baseNewForm";
|
||||
import {getApiModuleApi} from "@/api/apiChunks/index.js";
|
||||
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",
|
||||
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,
|
||||
type: 'select',
|
||||
title: '显示字段',
|
||||
id: 'viewFiled',
|
||||
row: 6,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
options: [],
|
||||
options: []
|
||||
},
|
||||
{
|
||||
type: "select",
|
||||
title: "上级id字段",
|
||||
id: "upIdFiled",
|
||||
row: 12,
|
||||
type: 'select',
|
||||
title: '上级id字段',
|
||||
id: 'upIdFiled',
|
||||
row: 6,
|
||||
disabled: false,
|
||||
required: true,
|
||||
fontSize: 16,
|
||||
options: [],
|
||||
},
|
||||
options: []
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
ruleForm: {},
|
||||
activeIndex: "1",
|
||||
contentFormArr: [],
|
||||
data: [],
|
||||
rightActived: [],
|
||||
addFiled: [],
|
||||
dbAddFiled: [],
|
||||
editFiled: [],
|
||||
dbEditFiled: [],
|
||||
showFiled: [],
|
||||
dbShowFiled: [],
|
||||
queryFiled: [],
|
||||
dbQueryFiled: [],
|
||||
listFiled: [],
|
||||
dbListFiled: [],
|
||||
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]
|
||||
}//字典
|
||||
}
|
||||
},
|
||||
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"
|
||||
tl: 'mdmModuleService',
|
||||
as: '',
|
||||
dj: 'queryMdmMainDBField'
|
||||
}, {
|
||||
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,
|
||||
id: item.enName
|
||||
})
|
||||
this.formRow[0].elCol[0].options.push({
|
||||
label: item.chName,
|
||||
id: item.enName,
|
||||
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
|
||||
}
|
||||
|
||||
//设置保存成功
|
||||
saveSuccessEmit() {
|
||||
this.mainTableDialogShow = false
|
||||
this.getAllField()
|
||||
},
|
||||
//验证通过
|
||||
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
|
||||
if (this.ruleForm.id) {
|
||||
this.openLoading('submit')
|
||||
const res = await authApi('mdmModuleService', '', 'updateMdmView', '', {
|
||||
...this.ruleForm,
|
||||
mdmId: this.$route.query.id,
|
||||
viewName: this.displayType
|
||||
})
|
||||
})
|
||||
},
|
||||
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
|
||||
}
|
||||
this.$vmNews('保存成功', 'success')
|
||||
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.getRuleForm()
|
||||
}
|
||||
|
||||
},
|
||||
//获取类型
|
||||
async getRuleForm() {
|
||||
this.openLoading('detail')
|
||||
this.ruleForm = {}
|
||||
const res = await authApi('mdmModuleService', '', 'queryMdmView', '', {
|
||||
mdmId: this.$route.query.id
|
||||
})
|
||||
this.ruleForm = res.attribute
|
||||
this.displayType = this.ruleForm.viewName
|
||||
},
|
||||
//保存
|
||||
saveHandle() {
|
||||
if (this.displayType === '1') {
|
||||
this.$refs.optionForm.submitForm()
|
||||
} else {
|
||||
this.onSubmit()
|
||||
}
|
||||
},
|
||||
//点击设置
|
||||
settingHandle(key) {
|
||||
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
|
||||
})
|
||||
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: {
|
||||
baseNewForm
|
||||
baseRightDialog,
|
||||
baseNewForm,
|
||||
settingChunk
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
//获取显示类型和显示字段
|
||||
this.getRuleForm()
|
||||
//获取下啦
|
||||
this.initSelect()
|
||||
this.$emit("flashActive", 2)
|
||||
//获取所有显示字段
|
||||
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;
|
||||
}
|
||||
|
|
@ -384,6 +391,7 @@ export default {
|
|||
::v-deep .el-transfer-panel__list {
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
::v-deep .el-transfer-panel__body {
|
||||
height: 50vh;
|
||||
}
|
||||
|
|
@ -424,15 +432,94 @@ export default {
|
|||
}
|
||||
|
||||
> .content {
|
||||
margin-top: 30px;
|
||||
margin-top: 3vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.buttonList {
|
||||
margin-left: 50px;
|
||||
.showItem {
|
||||
flex: 1;
|
||||
margin-left: 8px;
|
||||
height: 70vh;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #EBEBEB;
|
||||
padding: 14px 20px;
|
||||
position: relative;
|
||||
|
||||
.downBtn {
|
||||
margin-top: 30px;
|
||||
.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: 140px;
|
||||
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: 44px;
|
||||
height: 44px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.value {
|
||||
margin-top: 10px;
|
||||
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: 45vh;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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: 16px;
|
||||
}
|
||||
|
||||
::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,290 @@
|
|||
<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]) {
|
||||
this.openLoading('detail')
|
||||
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>
|
||||
Loading…
Reference in New Issue