修改

史敦盼
Commit f2816c1f authored May 07, 2024 by 史敦盼
Showing with 246 additions and 87 deletions
src/components/Form.vue
src/views/comCenterServeListNew/components/businessMsg.vue
src/views/dataMapping/Add.vue
src/views/dataMapping/index.vue
src/views/dataMapping/mixins/businessCapabilityGraph.mixin.js
--- a/src/components/Form.vue
+++ b/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() {

--- a/src/views/comCenterServeListNew/components/businessMsg.vue
+++ b/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() { },

--- a/src/views/dataMapping/Add.vue
+++ b/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,
          })

--- a/src/views/dataMapping/index.vue
+++ b/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, {
+      this.title = '添加行'
-      //   ...row,
+    },
-      //   status: '0',
+    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('是否确认完善?', '提示', {
+      this.visible = true
-        confirmButtonText: '确认',
+      this.title = '完善'
-        cancelButtonText: '取消',
+      this.assetId = row.id
-        type: 'warning',
+      this.rowIndex = index
-      })
+      this.addRowData = row
-        .then(() => {
+      // this.$confirm('是否确认完善?', '提示', {
-          this.$set(row, 'status', '1')
+      //   confirmButtonText: '确认',
-        })
+      //   cancelButtonText: '取消',
-        .catch(() => {})
+      //   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()

--- a/src/views/dataMapping/mixins/businessCapabilityGraph.mixin.js
+++ b/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;`,