CABaggageData2.0/src/views/BasicsData/views/deployNode/deployNodeHome.vue

<template>
  <div class="nodeLnformation">
    <div class="nodeLnformation_head">
      <div class="manageTitle">节点信息维护</div>
    </div>
    <div class="nodeLnformation_content">
      <org-tree :dataList="dataList" :renderContent="renderContent" />
    </div>
    <!--删除弹框-->
    <Dialog :flag="removeDialogVisible">
      <div class="airportInfoDialog">
        <div class="Deltitle">删除源数据</div>
        <div class="content er">
          <div class="log">
            是否确认删除{{ rmObj.AuthName }}？
          </div>
        </div>
        <div class="DelFoot right t30">
          <el-button size="medium" class="r25 r26" type="danger" @click="removeSubmit()">删除</el-button>
          <el-button size="medium" class="r26" @click="removeDialogVisible = false">取消</el-button>
        </div>
      </div>
    </Dialog>
    <!--新增/编辑-->
    <Dialog :flag="editDialogVisible" width="508px" :show-flag="true">
      <div class="airportInfoDialog dialog-public-background">
        <div class="title">{{ editDialogTitle }}</div>
        <div class="content">
          <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="130px" class="demo-ruleForm">
            <el-form-item label="节点名称" prop="protocolName">
              <el-input v-model="ruleForm.protocolName" size="medium" placeholder="请输入节点名称（必填）" />
            </el-form-item>
            <el-form-item label="跟踪节点标识符" prop="className">
              <el-input v-model="ruleForm.className" size="medium" placeholder="请输入跟踪节点标识符（必填）" />
            </el-form-item>
            <el-form-item label="跟踪节点描述" prop="filePath">
              <el-input v-model="ruleForm.filePath" size="medium" type="textarea" :rows="3" placeholder="请输入跟踪节点描述" />
            </el-form-item>
          </el-form>
        </div>
        <div class="foot center t30">
          <el-button size="medium" type="primary" class="r25 r26" @click="submitClickHandler()">提交</el-button>
          <el-button size="medium" class="r26" @click="resetForm('ruleForm')">取消</el-button>
        </div>
      </div>
    </Dialog>
  </div>
</template>

<script>
import orgTree from '@/layout/components/OrgTree';
import Dialog from '@/layout/components/Dialog/index.vue';
export default {
  name: "NodeLnformation",
  components: { orgTree, Dialog },
  data () {
    return {
      dataList: {
        id: 0,
        AuthName: 'BSM',
        Type: 0,
        Desc: '行李源报文',
        children: [
          {
            AuthName: 'BSM',
            Type: 1,
            id: 1,
            Desc: '行李源报文',
            children: [
              {
                AuthName: 'BSM',
                Type: 2,
                id: 3,
                Desc: '行李源报文',
              },
              {
                AuthName: 'BSM',
                Type: 2,
                id: 4,
                Desc: '行李源报文',
              }
            ]
          },
          {
            AuthName: 'BSM',
            Type: 1,
            id: 2,
            Desc: '行李源报文',
          }
        ]
      },
      removeDialogVisible: false,
      editDialogVisible: false,
      rmObj: {
        protocolName: ''
      },
      editDialogTitle: '新增节点信息',
      ruleForm: {
        // 协议信息表单
        protocolId: null,
        protocolName: '',
        className: '',
        rmethodName: '',
        smethodName: '',
        filePath: ''
      },
      rules: {
        // 协议信息表单验证
        protocolName: [{ required: true, message: '请输入节点名称', trigger: 'blur' }],
        className: [{ required: true, message: '请输入跟踪节点标识符', trigger: 'blur' }],
        rmethodName: [{ required: true, message: '请输入读方法名', trigger: 'blur' }],
        smethodName: [{ required: true, message: '请输入写方法名', trigger: 'blur' }]
      }
    }
  },
  methods: {
    //渲染节点
    renderContent (h, data) {
      return (
        <div onClick={() => this.renderSub(data)} class="account-left-content-teams">
          <div class="team">
            <div class="list">
              <div class="flex info">
                <div class="name">
                  <span>{data.AuthName}</span>
                  <span onClick={(e) => this.onNodeEdit(data, e)} class="cap cap-edit icon"></span>
                </div>
                <div class="icon">
                  <span
                    v-show={data.Type === 0 || data.Type === 1}
                    onClick={(e) => this.onNodeSub(data, e)}
                    class="cap cap-sub"
                  ></span>
                </div>
              </div>
              <div class="details">
                <div class="details-msg">
                  {data.Desc}
                </div>
              </div>
            </div>
          </div>
          <div
            v-show={data.Type == 1 || data.Type >= 2}
            onClick={(e) => this.onNodeClick(data, e)}
            class="info-close"
          >
            <i
              class={[
                data.Type === 1 ? "close1" : data.Type > 2 ? "close2" : "",
                "icon",
                "el-icon-close",
              ]}
            ></i>
          </div>
        </div>
      );
    },
    onNodeClick (data, e) {
      e.stopPropagation();
      this.rmObj = data;
      this.removeDialogVisible = true;
    },
    renderSub (data) {
      console.log(data, 'click');
    },
    onNodeSub (data, e) {
      e.stopPropagation();
      this.editDialogTitle = '新增节点信息'
      this.editDialogVisible = true
      // const { Type } = data;
      // const obj = {
      //   AuthName: "BSM",
      //   Desc: "行李源报文",
      //   Type: Type + 1,
      //   children: []
      // }
      // if (data.children) {
      //   data.children.push(obj);
      // } else {
      //   data.children = [];
      //   data.children.push(obj);
      // }
    },
    onNodeEdit (data, e) {
      e.stopPropagation();
      this.editDialogTitle = '编辑节点信息'
      this.editDialogVisible = true
    },
    // 新增/编辑-确认
    submitClickHandler () {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          if (this.ruleForm.protocolId) {
            this.addSubmit()
          } else {
            this.editSubmit()
          }
          this.resetForm('ruleForm')
        }
      })
    },
    // 重置
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.editDialogVisible = false
    },
    // 删除-弹框
    showRemoveDialog (item) {
      this.rmObj = item
      this.removeDialogVisible = true
    },
    // 确认删除
    removeSubmit () {
      this.removeDialogVisible = false
      this.$message.success('删除成功')
    },
    async addSubmit () {
      try {
        const res = await GeneralDataReception({
          serviceId: '1',
          dataContent: JSON.stringify(this.ruleForm)
        })
        if (res.code === 0) {
          this.$message.success(res.message ?? '成功')
        } else {
          this.$message.error(res.message ?? '失败')
        }
      } catch (error) {
        console.log('错误', error)
      }
    },
    async editSubmit () {
      try {
        const res = await GeneralDataReception({
          serviceId: '1',
          dataContent: JSON.stringify(this.ruleForm)
        })
        if (res.code === 0) {
          this.$message.success(res.message ?? '成功')
        } else {
          this.$message.error(res.message ?? '失败')
        }
      } catch (error) {
        console.log('错误', error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.nodeLnformation {
  margin: 40px 0;
}
</style>