CABaggageData2.0/src/views/systemSettings/views/protocolManagement/protocolHome.vue

<!--
 * @Author: Badguy
 * @Date: 2022-04-12 17:49:47
 * @LastEditTime: 2022-04-13 16:17:37
 * @LastEditors: your name
 * @Description: 协议管理-首页
 * have a nice day!
-->

<template>
  <div class="protocol-home">
    <div class="wrap">
      <!-- <div class="protocol-header flex">
        <div class="status flex-wrap">
          <div class="manageTitle">协议管理</div>
          <div class="status1"><span class="icon"></span>内置</div>
          <div class="status2"><span class="icon"></span>扩展</div>
        </div>
        <div class="addBtn">
          <el-button class="button-white" size="small" @click="showAddDialog()">新增</el-button>
        </div>
      </div> -->
      <div class="protocol-content">
        <DataTable data-id="1" :rows="12" labelWidth="100px" :minHeight="70" width="800px" />
        <!-- <el-row :gutter="24">
          <el-col v-for="item in dataList" :key="item.protocolId" :span="4">
            <div class="grid-content">
              <div :class="item.protocolStatus=='1' ? 'success' : 'error'" class="grid-content-bg"></div>
              <div class="grid-content-hand flex">
                <div class="title flex-wrap">
                  <el-tooltip class="item" effect="dark" :content="item.protocolName" placement="bottom">
                    <div class="name">{{ item.protocolName }}</div>
                  </el-tooltip>
                  <i class="loger" @click="showEditDialog(item)" />
                </div>
                <i class="el-icon-close icon" @click="showRemoveDialog(item)" />
              </div>
            </div>
          </el-col>
        </el-row> -->
      </div>
      <!--新增/编辑-->
      <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="100px" 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="nodeType">
                <el-select v-model="ruleForm.nodeType" size="small" placeholder="请选择协议类型">
                  <el-option label="内置" value="1"></el-option>
                  <el-option label="扩展" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="类名" prop="className">
                <el-input v-model="ruleForm.className" size="medium" type="textarea" :rows="2" placeholder="请输入类名（必填）" />
              </el-form-item>
              <el-form-item label="读方法名" prop="rmethodName">
                <el-input v-model="ruleForm.rmethodName" size="medium" placeholder="请输入读方法名（必填）" />
              </el-form-item>
              <el-form-item label="写方法名" prop="smethodName">
                <el-input v-model="ruleForm.smethodName" 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>
      <!--删除弹框-->
      <Dialog :flag="removeDialogVisible">
        <div class="airportInfoDialog">
          <div class="del-title">删除协议</div>
          <div class="content er">
            <div class="log">
              是否确认删除{{ rmObj.protocolName }}？
            </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>
    </div>
  </div>
</template>

<script>
import Dialog from '@/layout/components/Dialog/index.vue'
import { GeneralDataReception, Query } from '@/api/dataIntegration'
import DataTable from '@/components/Table'
export default {
  name: 'ProtocolHome',
  components: { Dialog, DataTable },
  data () {
    return {
      dataList: [],
      editDialogVisible: false,
      removeDialogVisible: false,
      rmObj: {},
      editDialogTitle: '新增协议',
      ruleForm: {
        // 协议信息表单
        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' }]
      }
    }
  },
  created () {
    //this.getList()
  },
  methods: {
    async getList () {
      try {
        const res = await Query({
          id: 1,
          dataContent: []
        });
        if (res.code === "0") {
          this.dataList = res.returnData;
        } else {
          this.$message.error(res.message ?? "失败");
        }
      } catch (error) {
        console.log("错误", error);
      }
    },
    // 新增-弹框
    showAddDialog () {
      this.editDialogTitle = '新增协议'
      this.editDialogVisible = true
    },
    // 编辑-弹框
    showEditDialog (item) {
      this.editDialogTitle = '编辑协议'
      this.ruleForm = item
      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.ruleForm = {};
      this.$refs[formName].resetFields()
      this.editDialogVisible = false
    },
    // 删除-弹框
    showRemoveDialog (item) {
      this.rmObj = item
      this.removeDialogVisible = true
    },
    // 确认删除
    async removeSubmit () {
      this.rmObj["operate"] = "3";
      try {
        const res = await GeneralDataReception({
          serviceId: "1",
          dataContent: JSON.stringify(this.rmObj),
        });
        if (res.code === "0") {
          this.removeDialogVisible = false;
          this.$message.success("删除成功");
          this.getList()
        } else {
          this.$message.error(res.message ?? "失败");
        }
      } catch (error) {
        console.log("错误", error);
      }
    },
    async addSubmit () {
      this.ruleForm["operate"] = "1";
      try {
        const res = await GeneralDataReception({
          serviceId: '1',
          dataContent: JSON.stringify(this.ruleForm)
        })
        if (res.code === "0") {
          this.$message.success(res.message ?? '成功')
          this.getList()
        } else {
          this.$message.error(res.message ?? '失败')
        }
      } catch (error) {
        console.log('错误', error)
      }
    },
    async editSubmit () {
      this.ruleForm["operate"] = "2";
      try {
        const res = await GeneralDataReception({
          serviceId: '1',
          dataContent: JSON.stringify(this.ruleForm)
        })
        if (res.code === "0") {
          this.$message.success(res.message ?? '成功')
          this.getList()
        } else {
          this.$message.error(res.message ?? '失败')
        }
      } catch (error) {
        console.log('错误', error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.protocol-home {
  .wrap {
    padding: 16px 0;
    .protocol-header {
      line-height: 32px;
      font-size: 14px;
      .button-white {
        border: 1px solid #9ebbf7;
        background: #f5f7fa;
        -webkit-box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
        box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
        border-radius: 4px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #2d67e3;
      }
      margin-bottom: 30px;
      .status {
        & > div {
          .icon {
            width: 14px;
            height: 14px;
            background: #2d67e3;
            border-radius: 2px;
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
            position: relative;
            top: -2px;
          }
          &:last-child {
            margin-right: 0;
          }
        }
        .status1 {
          font-size: 14px;
          margin-right: 28px;
        }
        .status2 {
          font-size: 14px;
          .icon {
            background: #f4c154;
          }
        }
      }
    }
    .protocol-content {
      .grid-content {
        height: 120px;
        background: #ffffff;
        box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        padding: 25px;
        margin-bottom: 24px;
        position: relative;
        .grid-content-bg {
          position: absolute;
          width: 100%;
          height: 4px;
          background-color: #f4c154;
          top: 0;
          left: 0;
          border-radius: 4px 4px 0 0;
        }
        .title {
          font-size: 16px;
          font-family: Helvetica;
          font-weight: bold;
          color: #101116;
          white-space: nowrap;
          max-width: 80%;
          text-overflow: ellipsis;
          overflow: hidden;
          .name {
            white-space: nowrap;
            max-width: 80%;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .loger {
            width: 14px;
            height: 14px;
            margin-left: 24px;
            background: url("../../../../assets/status/ic_edit_default.png")
              no-repeat;
            background-size: 100% 100%;
            cursor: pointer;
            position: relative;
            top: 2px;
          }
          .loger:hover {
            background: url("../../../../assets/status/ic_edit_hovar.png")
              no-repeat;
            background-size: 100% 100%;
          }
        }
        .icon {
          cursor: pointer;
          font-size: 16px;
          color: #606266;
        }
        .success {
          background-color: #2d67e3;
        }
        .error {
          background-color: #f4c154;
        }
      }
    }
    .r25 {
      color: #ffffff;
    }
  }
}
</style>