Skip to content

liangzhen / framework-tools-web

Go to a project
Commit f2816c1f by 史敦盼
Options

修改

1 parent 5787cddc
Inline Side-by-side
Showing with 246 additions and 87 deletions
src/components/Form.vue
......@@ -4,7 +4,7 @@
* @Autor: pan
* @Date: 2024-03-12 14:55:59
* @LastEditors: pan
* @LastEditTime: 2024-04-30 09:52:55
* @LastEditTime: 2024-05-07 15:00:21
-->
<template>
<div class="form-box">
......@@ -109,11 +109,11 @@ export default {
changeFormItemData(prop, value) {
this.$nextTick(() => {
this.$set(
this.$refs['addForm'].formData,
this.formData,
prop,
value,
)
this.$refs['addForm'].$refs['formRef'].clearValidate(prop)
this.$refs['formRef'].clearValidate(prop)
})
},
createUniqueString() {
......
src/views/comCenterServeListNew/components/businessMsg.vue
......@@ -30,13 +30,13 @@ export default {
formOptions: [
{
label: "中台服务名称",
prop: "name",
prop: "abilityName",
element: "el-input",
placeholder: "服务名称",
},
{
label: "统计日期",
prop: "buildType",
prop: "statTime",
element: "el-date-picker",
type: 'date',
valueFormat: 'yyyy-MM-dd',
......@@ -46,7 +46,7 @@ export default {
},
{
label: "业务活动名称",
prop: "buildType",
prop: "businessActName",
element: "el-select",
dictType: "build_type",
placeholder: "业务活动名称",
......@@ -93,7 +93,7 @@ export default {
columns: [
{
label: "中台服务编码",
prop: "buildType",
prop: "abilityCode",
showOverflowTooltip: true,
align: "center",
fixed: "left",
......@@ -101,21 +101,21 @@ export default {
},
{
label: "中台服务名称",
prop: "buildType2",
prop: "abilityName",
minWidth: 140,
showOverflowTooltip: true,
align: "center",
},
{
label: "业务活动名称",
prop: "buildType2",
prop: "businessActName",
minWidth: 120,
showOverflowTooltip: true,
align: "center",
},
{
label: "业务活动编码",
prop: "buildType2",
prop: "businessActName",
minWidth: 120,
showOverflowTooltip: true,
align: "center",
......@@ -175,7 +175,7 @@ export default {
},
},
],
data: [{ buildType2: 11 }],
data: [],
};
},
mounted() { },
......
src/views/dataMapping/Add.vue
......@@ -31,9 +31,48 @@
</div>
</template>
</Form>
<el-form labelPosition="right" label-width="120px">
<el-col :span="24">
<el-form-item
v-for="(item, index) in dynamicForm_"
:key="index"
:label="item.cnName + ':'"
>
<template v-if="item.controlType == 0">
<el-input
placeholder="请输入内容"
v-no-backslash
v-model="item.value_"
maxlength="100"
></el-input>
</template>
<template v-else-if="item.controlType == 1">
<el-input
placeholder="请输入内容"
v-no-backslash
v-model="item.value_"
type="textarea"
:rows="3"
maxlength="200"
show-word-limit
></el-input>
</template>
<template v-else>
<el-select class="w-100" v-model="item.value_" clearable>
<el-option
v-for="item2 in item.dictArray_"
:key="item2.id"
:label="item2.label"
:value="item2.id"
></el-option>
</el-select>
</template>
</el-form-item>
</el-col>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" v-preventReClick @click="fnAdd()"
<el-button type="primary" v-preventReClick @click="fnSubmit()"
>确定</el-button
>
<el-button @click="handleClose()">取消</el-button>
......@@ -54,6 +93,7 @@ import {
getDianXingAnLiSelectData,
getQryByTree,
queryRepeatAssetByNumber,
getAssetDetail,
} from '@/api/index'
import { archiEleColor } from '@/config'
export default {
......@@ -61,15 +101,25 @@ export default {
visible: {
type: Boolean,
default: false,
required: true,
},
title: {
type: String,
default: '',
required: true,
},
archiBelongId: {
type: String,
default: '',
},
id: {
type: String,
default: '',
},
addRowData: {
type: Object,
default: () => {},
},
},
data() {
return {
......@@ -189,53 +239,6 @@ export default {
rules: [{ required: true, trigger: 'change', message: '不能为空' }],
},
]
this.dynamicForm_.forEach((v, i) => {
if (v.controlType == 0) {
arr = [
...arr,
{
label: v.cnName, // label文字
prop: `value_${i}`, // 字段名
element: 'el-input', // 指定elementui组件
placeholder: '请输入内容', // elementui组件属性
span: 24,
},
]
} else if (v.controlType == 1) {
arr = [
...arr,
{
label: v.cnName, // label文字
prop: `value_${i}`, // 字段名
element: 'el-input', // 指定elementui组件
placeholder: '请输入内容', // elementui组件属性
type: 'textarea',
rows: 3,
maxlength: '200',
showWordLimit: true,
span: 24,
},
]
} else {
arr = [
...arr,
{
label: v.cnName, // label文字
prop: `value_${i}`, // 字段名
element: 'el-select', // 指定elementui组件
placeholder: '请选择', // elementui组件属性
options: v.dictArray_,
filterable: true,
keyOption: {
label: 'label',
value: 'id',
},
span: 24,
},
]
}
})
return arr
},
showDialog: {
......@@ -316,7 +319,7 @@ export default {
this.chooseSvgVisible = true
},
// 所属元素change事件
archiEleIdChange(data) {
archiEleIdChange(data, addRowData) {
this.parentElementOptions = []
this.treeSelectData = []
console.log('所属change', data)
......@@ -324,6 +327,36 @@ export default {
(item) => item.elementId == data,
)
this.getParentElementOptions(currentItem)
if (addRowData) {
console.log('addRowData.fieldsValue', addRowData.fieldsValue)
if (addRowData.assetId || addRowData.id) {
let fieldsValue = addRowData.fieldsValue
if (fieldsValue == '[{}]') {
// this.dynamicForm_ = []
this.getDicArray(data)
} else {
if (!fieldsValue) return
let fieldsValue_ = JSON.parse(fieldsValue)
fieldsValue_.map((item) => {
if (item.dictKey) {
this.get_key(item.dictKey).then((res2) => {
this.$set(item, 'dictArray_', res2)
})
}
})
this.dynamicForm_ = fieldsValue_
return
}
} else {
return (this.dynamicForm_ = addRowData.fieldsValue)
}
} else {
this.getDicArray(data)
}
},
getDicArray(data) {
const params = {
type: '1',
typeId: data,
......@@ -414,7 +447,7 @@ export default {
}
return null
},
getArchiEleOptions() {
getArchiEleOptions(callback) {
//所属元素下拉框值
const params = {
state: '1',
......@@ -426,17 +459,79 @@ export default {
queryZiChanJiaGouZuJianLeiXing(params).then((res) => {
if (res.code == 200) {
this.archiEleOptions = res.data
callback && callback()
} else {
this.$message.error(res.msg)
}
})
},
handleOpen() {
if (this.title === '完善') {
this.getArchiEleOptions(() => {
if (this.id) {
this.fnSetFormData()
} else {
this.handleAssign(this.addRowData)
}
})
} else {
this.getArchiEleOptions()
this.$nextTick(() => {
this.$refs['addForm'].addInitValue()
this.$refs['addForm'].onReset()
})
this.getArchiEleOptions()
}
},
fnSetFormData() {
getAssetDetail({ assetId: this.id }).then((res) => {
if (res.code === 200) {
const item = res.data
this.handleAssign(item)
} else {
this.$message.warning(res.msg)
}
})
},
handleAssign(item) {
this.handleOtherProp(item)
this.$nextTick(() => {
this.formOptions.forEach((v) => {
if (v.prop == 'parentElement') {
if (this.id) {
v.initValue = item[v.prop]
?.replace(/\]|\[|\/?]/g, '')
.replace('null', '')
} else {
v.initValue = item.parentElement[0]
}
} else if (v.prop === 'superiorNode') {
v.initValue = item.parentAsset ? item.parentAsset.split(', ') : []
} else {
v.initValue = item[v.prop]
}
})
this.$refs['addForm'].addInitValue()
this.$refs['addForm'].changeFormItemData('color', item.color)
this.$refs['addForm'].changeFormItemData('iconSetting', item.graphId)
// console.log('this.$refs', this.$refs['addForm'].formData, this.formOptions)
})
},
// 处理完善时，带入一些其他的不在页面展示的参数
handleOtherProp(item) {
this.selectGraphSrc = item.icon || ''
this.selectGraphShape = item.iconName
this.graphId = item.graphId
let parentElement = null
if (this.id) {
parentElement = item.parentElement?.replace(/\]|\[|\/?]/g, '')
} else {
parentElement = item.parentElement[0]
}
this.parentElementChange(parentElement)
if (item.archiEleId) {
this.archiEleIdChange(item.archiEleId, item)
}
},
handleClose() {
this.showDialog = false
......@@ -459,8 +554,16 @@ export default {
this.$refs['addForm'].addInitValue()
this.$refs['addForm'].onReset()
},
fnAdd() {
fnSubmit() {
this.$refs['addForm'].onValidate(() => {
if (this.title === '完善') {
this.fnAdd(2)
} else {
this.fnAdd(3)
}
})
},
fnAdd(archiAssetType) {
const params = this.handleAddParams()
const parentId = params.superiorNode?.length
? params.superiorNode[0]
......@@ -474,13 +577,13 @@ export default {
parentId: this.selectedObject.parentAssetId,
id: this.selectedObject.assetId,
name: this.selectedObject.assetName,
archiAssetType: 3,
archiAssetType,
children: [
{
...params,
name: params.assetName,
parentId: params.parentAssetId,
archiAssetType: 3,
archiAssetType,
},
],
}
......@@ -495,16 +598,18 @@ export default {
} else {
emitParams = {
...params,
archiAssetType: 3,
archiAssetType,
parentId,
children: [],
name: params.assetName,
}
}
if(archiAssetType === 3) {
this.$emit('add', emitParams)
} else {
this.$emit('perfect', emitParams)
}
this.handleClose()
})
},
handleAddParams() {
const formInfo = this.$refs['addForm'].getData()
......@@ -517,7 +622,7 @@ export default {
fieldsValue.push({
id: item.propertyId,
cnName: item.cnName,
value_: formInfo[`value_${i}`],
value_: item.value_,
controlType: item.controlType,
dictKey: item.dictKey ? item.dictKey : null,
})
......
src/views/dataMapping/index.vue
......@@ -4,7 +4,7 @@
* @Autor: pan
* @Date: 2024-04-23 11:30:05
* @LastEditors: pan
* @LastEditTime: 2024-05-07 08:55:57
* @LastEditTime: 2024-05-07 17:58:40
-->
<template>
<div class="dataMapping w-100">
......@@ -105,18 +105,28 @@
<el-table-column
align="center"
prop="archiAssetType"
:formatter="formatterStatus"
label="状态"
>
</el-table-column>
<el-table-column align="center" label="操作">
<template #default="{ row, $index }">
<el-button
v-if="row.archiAssetType!=2"
type="primary"
size="mini"
plain
@click="fnPerfect(row, $index)"
>完善</el-button
>
<el-button
type="danger"
size="mini"
icon="el-icon-delete"
plain
@click="fnDel(row, $index)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
......@@ -133,10 +143,13 @@
</div>
</div>
<Add
title="添加行"
:title="title"
:archi-belong-id="activeName"
@add="handleAdd"
@perfect="handlePerfect"
:visible.sync="visible"
:id="assetId"
:add-row-data="addRowData"
/>
</div>
</template>
......@@ -172,7 +185,11 @@ export default {
collapse: false,
dataSubGraphData: [],
treeLoading: false,
checkedNodes: []
checkedNodes: [],
title: '',
assetId: '',
addRowData: {},
rowIndex: 0
}
},
components: { MxGraph, Add, SvgIcon },
......@@ -218,6 +235,15 @@ export default {
}
})
},
handlePerfect(data) {
// this.tableData[this.rowIndex] = data
const repData = {
...this.tableData[this.rowIndex],
archiAssetType: 2
}
this.tableData.splice(this.rowIndex, 1, repData);
this.handleBusGraph('init')
},
handleAdd(data) {
this.addData = []
const includeAddData = this.tableData.findIndex(v => v.id === data.id)
......@@ -234,21 +260,39 @@ export default {
},
fnPushData(row, index) {
this.visible = true
// this.tableData.splice(index + 1, 0, {
// ...row,
// status: '0',
// })
this.title = '添加行'
},
fnDel(row, index) {
if(row.id) {
this.$refs.tree.setChecked(row.id, false)
if(row.checkChildren) {
row.checkChildren.forEach(v => {
this.$refs.tree.setChecked(v.id, false)
})
}
}
this.tableData.splice(index, 1)
// 有子级，对应删除子级
if(row.checkChildren) {
this.tableData = this.tableData.filter(v => v.parentId != row.id)
}
this.handleBusGraph('init')
},
fnPerfect(row, index) {
this.$confirm('是否确认完善?', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
this.$set(row, 'status', '1')
})
.catch(() => {})
this.visible = true
this.title = '完善'
this.assetId = row.id
this.rowIndex = index
this.addRowData = row
// this.$confirm('是否确认完善?', '提示', {
// confirmButtonText: '确认',
// cancelButtonText: '取消',
// type: 'warning',
// })
// .then(() => {
// this.$set(row, 'status', '1')
// })
// .catch(() => {})
},
formatter(row, column, cellValue, index) {
if (row.parentId === '0') {
......@@ -276,6 +320,15 @@ export default {
return cellValue
}
},
formatterStatus(row, column, cellValue, index) {
if(cellValue == '3') {
return '新增'
} else if(cellValue == '2') {
return '完善'
} else {
return '遵从'
}
},
handleTabChange() {
if (this.activeName != '0') {
this.fnGetAutomaticGraphing()
......
src/views/dataMapping/mixins/businessCapabilityGraph.mixin.js
......@@ -4,7 +4,7 @@
* @Autor: pan
* @Date: 2024-04-28 11:05:28
* @LastEditors: pan
* @LastEditTime: 2024-05-06 20:35:36
* @LastEditTime: 2024-05-07 09:53:27
*/
const businessCapabilityGraphMixin = {
data() {
......@@ -29,6 +29,7 @@ const businessCapabilityGraphMixin = {
// mxgraph 被暴露在window下，所以可以直接调用
const parent = this.graph.getDefaultParent()
this.graph.removeCells(this.graph.getChildVertices(parent)) //清空画布
if(!this.mockData.length) return
const model = this.graph.getModel()
// mxGraphHandler.prototype.guidesEnabled = true
var style = this.graph.getStylesheet().getDefaultVertexStyle()
......@@ -161,7 +162,7 @@ const businessCapabilityGraphMixin = {
v.checkChildren ? null : 100,
v.checkChildren ? null : 40,
`html=1;fontColor=#000000;fillColor=${
v.checkChildren ? '#dcf8e5' : '#f2fcf5'
v.checkChildren ? '#dcf8e5' : this.handleColor(v)// '#f2fcf5'
};labelPosition=center;verticalAlign=${
v.checkChildren ? 'top' : 'middle'
};align=center;strokeColor=#7fc2a0;`,
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!