SixUnificationCDC-UI/src/views/unified-access/access-feedback/dialog/FeedbackDialog.vue

<template>
  <el-dialog :visible.sync="visible" @update:visible="handleUpdateVisible" :title="title + '接入反馈表'" :width="width"
    :before-close="beforeClose">
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="01/4 数据准备基本表" :name="1">
        <el-form :label-position="'top'" :model="formData" label-width="auto" style="width: 100%"
          class="form-detail-inline" inline>
          <el-form-item label="序号/标识符" prop="code">
            <el-input v-model="formData.code" placeholder="请输入序号/标识符" />
          </el-form-item>
          <el-form-item label="交换需求联系人" prop="persion">
            <el-input v-model="formData.persion" placeholder="请输入交换需求联系人">
            </el-input>
          </el-form-item>
          <el-form-item label="联系方式" prop="phone">
            <el-input v-model="formData.phone" placeholder="请输入联系方式">
            </el-input>
          </el-form-item>
        </el-form>
        <!-- 数据提供方所属单位部门 -->
        <el-table :data="firstStep.offers" style="width: 100%" max-height="250">
          <el-table-column prop="id" label="数据提供方所属单位部门" width="">
            <template slot-scope="scope">
              <el-select v-model="scope.row.accessId" placeholder="请选择数据提供方所属单位部门"
                @change="deptChange(scope.$index, scope.row.accessId, scope.$index)">
                <el-option v-for="item in offersOptions" :key="item.id" :label="item.dept" :value="item.id">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="system" label="数据提供方系统名称" width="">
            <template slot-scope="scope">
              <el-input disabled v-model="scope.row.system" placeholder="请输入数据提供方系统名称"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="readyIp" label="数据提供方IP" width="">
            <template slot-scope="scope">
              <el-select v-model="scope.row.readyIp" placeholder="请选择IP"
                @change="iPChange(scope.$index, scope.row.readyIp, scope.row)">
                <el-option v-for="item in scope.row.ipOptions" :key="item.ip" :label="item.ip" :value="item.ip">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="readyPort" label="数据提供方端口" width="">
            <template slot-scope="scope">
              <el-select v-model="scope.row.readyPort" placeholder="请选择端口">
                <el-option v-for="item in scope.row.portOptions" :key="item.port" :label="item.port" :value="item.port">
                </el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column fixed="right" label="操作">
            <template #default="scope">
              <el-button type="primary" size="small" @click.prevent="deleteRow(scope.$index, scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" plain class="mt-4" style="width: 100%" icon="el-icon-plus"
          @click="onAddOffersItem"></el-button>

        <!-- 数据接收方所属单位部门 -->
        <el-table :data="firstStep.access" style="width: 100%" max-height="250">
          <el-table-column prop="name" label="数据接收方所属单位部门" width="">
            <template slot-scope="scope">
              <el-select v-model="scope.row.accessId" @change="
    accessDeptChange(scope.$index, scope.row.accessId, scope.$index)
    " placeholder="请选择数据接收方所属单位部门">
                <el-option v-for="item in offersOptions" :key="item.id" :label="item.dept" :value="item.id">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="system" label="数据接收方系统名称" width="">
            <template slot-scope="scope">
              <el-input v-model="scope.row.system" disabled placeholder="请输入数据接收方系统名称"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="readyIp" label="数据接收方IP" width="">
            <template slot-scope="scope">
              <el-select v-model="scope.row.readyIp" placeholder="请选择IP" @change="
    accessIPChange(scope.$index, scope.row.readyIp, scope.row)
    ">
                <el-option v-for="item in scope.row.accessIpOptions" :key="item.ip" :label="item.ip" :value="item.ip">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="readyPort" label="数据接收方端口" width="">
            <template slot-scope="scope">
              <el-select v-model="scope.row.readyPort" placeholder="请选择端口">
                <el-option v-for="item in scope.row.accessPortOptions" :key="item.port" :label="item.port"
                  :value="item.port">
                </el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column fixed="right" label="操作">
            <template #default="scope">
              <el-button type="primary" size="small" @click.prevent="deleteAccessRow(scope.$index, scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" plain class="mt-4" style="width: 100%" icon="el-icon-plus"
          @click="onAccessAddItem"></el-button>

        <div class="titel">统一接入方式</div>
        <el-form :label-position="'left'" :model="formData" label-width="auto" style="width: 100%">
          <el-form-item label="数据提供方式" class="textarea-row" prop="dataOfferType">
            <div style="display: flex; align-items: center">
              <el-radio-group v-model="formData.dataOfferType">
                <!-- <el-radio :label="1">库表接口工具</el-radio>
                <el-radio :label="2">六统一API</el-radio>
                <el-radio :label="3">六统一KAFKA</el-radio>
                <el-radio :label="4">六统一SFTP</el-radio>
                <el-radio :label="5">其它</el-radio> -->
                <el-radio v-for="dict in dict.type.access_method" :key="dict.value" :label="dict.value">{{ dict.label
                  }}</el-radio>
              </el-radio-group>
              <el-input v-model="formData.offerOther" placeholder="请输入"
                style="width: 220px; margin-left: 30px"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="数据接收方式" prop="dataAccessType">
            <div style="display: flex; align-items: center">
              <el-radio-group v-model="formData.dataAccessType">
                <!-- <el-radio :label="1">库表接口工具</el-radio>
                <el-radio :label="2">六统一API</el-radio>
                <el-radio :label="3">六统一KAFKA</el-radio>
                <el-radio :label="4">六统一SFTP</el-radio>
                <el-radio :label="5">其它</el-radio> -->
                <el-radio v-for="dict in dict.type.access_method" :key="dict.value" :label="dict.value">{{ dict.label
                  }}</el-radio>
              </el-radio-group>
              <el-input v-model="formData.accessOther" placeholder="请输入"
                style="width: 220px; margin-left: 30px"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="审核意见" prop="auditDetail">
            <el-input type="textarea" :rows="4" v-model="formData.auditDetail" placeholder="请输入审核意见">
            </el-input>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="审核人" prop="auditName">
                <el-input v-model="formData.auditName" placeholder="请输入审核人">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="审核时间" prop="auditTime">
                <el-date-picker style="width: 100%" v-model="formData.auditTime" type="datetime" placeholder="请选择日期时间"
                  format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="02/4 数据基本表" :name="2">
        <el-table :data="secondStep" border style="width: 100%">
          <!-- 基本属性 -->
          <el-table-column label="基本属性" align="center">
            <el-table-column prop="check" label="" align="center">
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.check"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column prop="code" label="序号/标识符" align="center" width="150">
              <template slot-scope="scope">
                <el-input v-model="scope.row.code" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="dataMane" label="数据资源名称" align="center" width="150">
              <template slot-scope="scope">
                <el-input v-model="scope.row.dataMane" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="publishDate" label="发布日期" align="center" width="120">
              <template slot-scope="scope">
                <el-date-picker v-model="scope.row.publishDate" type="date" placeholder="选择日期">
                </el-date-picker>
              </template>
            </el-table-column>
            <el-table-column prop="formatType" label="格式类型" align="center" width="120">
              <template slot-scope="scope">
                <el-input v-model="scope.row.formatType" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="resourceSource" label="资源来源" align="center" width="120">
              <template slot-scope="scope">
                <el-input v-model="scope.row.resourceSource" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="resourceAbstract" label="数据资源摘要" align="center" width="120">
              <template slot-scope="scope">
                <el-input v-model="scope.row.resourceAbstract" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="updateMode" label="更新模式数据量" align="center" width="120">
              <template slot-scope="scope">
                <el-input v-model="scope.row.updateMode" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="batch" label="批次号频率" align="center" width="120">
              <template slot-scope="scope">
                <el-input v-model="scope.row.batch" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
          </el-table-column>

          <!-- 数据源 -->
          <el-table-column label="数据源(数据提供方) 属性" align="center">
            <el-table-column prop="offerDept" label="数据源上传方名称" align="center" width="200">
              <template slot-scope="scope">
                <el-input v-model="scope.row.offerDept" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="offerDept" label="上传方代码" align="center" width="120">
              <template slot-scope="scope">
                <el-input v-model="scope.row.offerDept" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="offerDept" label="上传方地址" align="center" width="150">
              <template slot-scope="scope">
                <el-input v-model="scope.row.offerDept" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="property" label="频率、统一接入时间配置" align="center" width="150">
              <template slot-scope="scope">
                <el-input v-model="scope.row.property" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="property" label="所属系统编号" align="center" width="150">
              <template slot-scope="scope">
                <el-input v-model="scope.row.property" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="property" label="所属系统名称" align="center" width="150">
              <template slot-scope="scope">
                <el-input v-model="scope.row.property" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
          </el-table-column>

          <!-- 数据接收 -->
          <el-table-column label="数据接收(输出) 属性" align="center">
            <el-table-column prop="accessDept" label="输出方名称" align="center" width="120">
              <template slot-scope="scope">
                <el-input v-model="scope.row.accessDept" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="outputFormat" label="输出方代码" align="center" width="120">
              <template slot-scope="scope">
                <el-input v-model="scope.row.outputFormat" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="outputType" label="输出精度、统一接入时间配置" align="center" width="120">
              <template slot-scope="scope">
                <el-input v-model="scope.row.outputType" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="receiverName" label="输出方式" align="center" width="200">
              <template slot-scope="scope">
                <el-input v-model="scope.row.receiverName" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="receiverName" label="其它" align="center" width="200">
              <template slot-scope="scope">
                <el-input v-model="scope.row.receiverName" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="receiverName" label="所属系统编号" align="center" width="200">
              <template slot-scope="scope">
                <el-input v-model="scope.row.receiverName" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="receiverName" label="所属系统名称" align="center" width="200">
              <template slot-scope="scope">
                <el-input v-model="scope.row.receiverName" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
          </el-table-column>

          <!-- 操作 -->
          <el-table-column label="操作" align="center" fixed="right" width="120">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="03/4 数据项信息" :name="3">
        <!-- 库表工具 ETL -->
        <ETLAndTableTools></ETLAndTableTools>

        <!-- API -->
        <ApiPage v-if="false"></ApiPage>
        <!-- KAFKA -->
        <KafkaPage v-if="false"></KafkaPage>
        <!-- SFTP  -->
        <SFTPPage v-if="false"></SFTPPage>
      </el-tab-pane>
      <el-tab-pane label="04/4 附件" :name="5">
        <el-form :model="searchFormData" ref="searchForm" label-width="auto" label-position="left" class="header-form">
          <el-form-item label="附件名称" prop="name">
            <el-input v-model="searchFormData.name" placeholder="请输入附件名称"></el-input>
          </el-form-item>
          <div class="btn-box">
            <el-button type="primary" size="mini" @click="handleSubmit">查询</el-button>
            <el-button size="mini" @click="handleReset">重置</el-button>
          </div>
        </el-form>
        <div style="width: 100%; text-align: end">
          <el-button size="mini" @click="handleUpload" type="primary">上传</el-button>
        </div>
        <MyTable :tableData="fileTableData" :formData="fileFormData" :minWidth="400">
          <!-- 自定义操作按钮，传递 row 和 index -->
          <template #operation="{ row, index }">
            <el-button size="mini" @click="handleDownload(row, index)" type="primary">下载</el-button>

            <el-button size="mini" @click="handleDelete(index)" type="primary">删除</el-button>
          </template>
        </MyTable>
      </el-tab-pane>
    </el-tabs>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleBackStep" v-if="activeName > 1">上一步</el-button>
      <el-button type="primary" @click="handleNextStep" v-if="activeName < 4">下一步</el-button>

      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">暂 存</el-button>
      <el-button type="primary" @click="handleConfirm" v-if="activeName === 4">确 定</el-button>
    </div>
  </el-dialog>

  <!-- 数据基本表弹窗 -->
  <!-- <el-dialog
      :visible.sync="visible"
      title="数据基本表"
      width="50%"
      @close="handleClose"
    >
       <el-form :label-position="'top'" :model="formData" label-width="auto" style="width: 100%"
          class="form-detail-inline" inline>
          <el-form-item label="序号/标识符" prop="code">
            <el-input v-model="formData.code" placeholder="请输入序号/标识符" />
          </el-form-item>
          <el-form-item label="交换需求联系人" prop="persion">
            <el-input v-model="formData.persion" placeholder="请输入交换需求联系人">
            </el-input>
          </el-form-item>
          <el-form-item label="联系方式" prop="contact">
            <el-input v-model="formData.contact" placeholder="请输入联系方式">
            </el-input>
          </el-form-item>
        </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </div>
    </el-dialog> -->
</template>

<script>
import {
  addFirstStepTabAccessReady,
  delFirstStepTabAccessReady,
} from "@/api/unified-access/access-feedback.js";
import { getTabAccessList } from "@/api/unified-access/access-party-maintenance.js";
import MyTable from "@/components/MyTable";
import MyForm from "@/components/MyForm";
import ETLAndTableTools from "./ETLAndTableTools.vue";
import ApiPage from "./ApiPage.vue";
import KafkaPage from "./KafkaPage.vue";
import SFTPPage from "./SFTPPage.vue";
export default {
  name: "StandardDialog",
  components: {
    MyForm,
    MyTable,
    ETLAndTableTools,
    ApiPage,
    KafkaPage,
    SFTPPage,
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "弹窗标题",
    },
    width: {
      type: String,
      default: "90%",
    },
  },
  dicts: ["access_method"],
  data () {
    return {
      accessPortOptions: [],
      accessIpOptions: [],
      firstStep: {
        code: "", //标识符
        persion: "", //交换需求联系人
        phone: "", //联系方式
        offers: [], // 数据提供方
        access: [], //数据接收方
        auditDetail: "", //审核意见
        auditName: "", //审核人
        auditTime: "", //审核时间
      },
      secondStep: [],
      thirdStep: [],
      fourthStep: [],
      offersOptions: [],
      ipOptions: [],
      portOptions: [],
      basicDataTable: [], //数据基本表
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 161,
      },
      leftTableData: [{}],
      rightTableData: [{}],
      headerFormData: {},
      activeName: 1,
      visible: this.value,
      // 这是传递给表单组件的数据
      formData: {},
      searchFormData: {},
      isDisabled: false,
      fileTableData: [],
      fileFormData: [
        {
          label: "附件名称",
          fieldName: "name",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },
        {
          label: "上传人",
          fieldName: "age",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },
        {
          label: "上传时间",
          fieldName: "address",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },
      ],
      tableData: [
        {
          identifier: false,
          name: "资源1",
          publishDate: "2023-01-01",
          formatType: "格式A",
          dataSource: "来源1",
          sourceName: "上传方1",
          sourceCode: "代码01",
          address: "地址01",
          property: true,
          outputCode: "输出01",
          outputFormat: "格式A",
          outputType: "自动",
          receiverName: "系统1",
        },
      ],
    };
  },
  watch: {
    value (newVal) {
      this.visible = newVal;
    },
    visible (newVal) {
      this.$emit("input", newVal);
    },
  },
  mounted () {
    this.getList();
  },
  methods: {
    deleteAccessRow (index, row) {
      if (row.accessId) {
        this.firstStep.access.splice(index, 1);
        delFirstStepTabAccessReady(row.accessId).then((res) => {
          if (+res.code === 200) {
            this.$message({
              message: res.msg,
              type: "success",
            });
          } else {
            this.$message.error(res.msg);
          }
        });
      } else {
        this.firstStep.access.splice(index, 1);
      }
    },
    deleteRow (index, row) {
      if (row.accessId) {
        this.firstStep.offers.splice(index, 1);
        delFirstStepTabAccessReady(row.accessId).then((res) => {
          if (+res.code === 200) {
            this.$message({
              message: res.msg,
              type: "success",
            });
          } else {
            this.$message.error(res.msg);
          }
        });
      } else {
        this.firstStep.offers.splice(index, 1);
      }
    },
    onAddOffersItem () {
      const newItem = {
        accessId: "",
        system: "",
        readyIp: "",
        readyPort: "",
        ipOptions: [],
        portOptions: []
      };
      this.firstStep.offers.push(newItem);
      // this.firstStep.offers.push({});

    },
    deptChange (index, id, row) {
      this.ipOptions = [];
      this.offersOptions.forEach((item) => {
        if (item.id === id) {
          this.ipOptions = item.ip.map((item, index) => {
            return {
              id: index,
              ip: item.ip,
            };
          });

          this.ipOptions = this.ipOptions.filter(
            (value, index, self) =>
              index === self.findIndex((t) => t.ip === value.ip)
          );

          this.firstStep.offers[index].system = item.name;
          this.firstStep.offers[index].dept = item.dept;

        }
      });
      this.firstStep.offers[index].ipOptions = [...this.ipOptions];

      this.firstStep.offers[index].readyIp = "";
      this.firstStep.offers[index].readyPort = "";
    },
    iPChange (index, ip, row) {
      this.portOptions = []
      this.offersOptions.forEach((item) => {
        if (item.id === row.accessId) {
          this.portOptions = item.ip
            .filter((item) => item.ip === row.readyIp)
            .map((item, index) => {
              return {
                id: index,
                port: item.port,
              };
            });
        }
      });
      this.firstStep.offers[index].portOptions = this.portOptions;
      this.firstStep.offers[index].readyPort = "";
    },
    onAccessAddItem () {
      const newItem = {
        accessId: "",
        system: "",
        readyIp: "",
        readyPort: "",
        ipOptions: [],
        portOptions: []
      };
      this.firstStep.access.push(newItem);
    },
    accessDeptChange (index, id, row) {
      this.ipOptions = [];
      this.offersOptions.forEach((item) => {
        if (item.id === id) {
          this.ipOptions = item.ip.map((item, index) => {
            return {
              id: index,
              ip: item.ip,
            };
          });
          this.ipOptions = this.ipOptions.filter(
            (value, index, self) =>
              index === self.findIndex((t) => t.ip === value.ip)
          );

          this.firstStep.access[index].system = item.name;
          this.firstStep.access[index].dept = item.dept;

        }
      });
      this.firstStep.access[index].accessIpOptions = [...this.ipOptions];
      this.firstStep.access[index].readyIp = "";
      this.firstStep.access[index].readyPort = "";
    },
    accessIPChange (index, ip, row) {
      this.portOptions = []
      this.offersOptions.forEach((item) => {
        if (item.id === row.accessId) {
          this.portOptions = item.ip
            .filter((item) => item.ip === row.readyIp)
            .map((item, index) => {
              return {
                id: index,
                port: item.port,
              };
            });
        }
      });
      this.firstStep.access[index].accessPortOptions = this.portOptions;
      this.firstStep.access[index].readyPort = "";
    },
    // 数据接入放管理列表
    getList () {
      getTabAccessList({}).then((res) => {
        if (+res.code === 200) {
          res.rows.forEach((item) => {
            item.ip = JSON.parse(item.ip);
          });
          this.offersOptions = res.rows;
        }
      });
    },

    onAddItem () { },
    handleClick (tab, event) {
      console.log(tab, event);
    },
    handleNextStep () {
      if (this.title==='新增') {
        if (this.activeName === 1) {
          addFirstStepTabAccessReady({ ...this.firstStep }).then((res) => {
            if (+res.code === 200) {
              this.secondStep = res.data
              this.activeName++;

            }
          });
        }
      } else if (this.title === '编辑') {
        updateTabAccessReadyById({ ...this.firstStep }).then((res) => {
          if (+res.code === 200) {
            // this.secondStep = res.data
            this.activeName++;
          }
        });
      }
    
    },
    handleBackStep () {
      this.activeName--;
    },
    handleUpdateVisible (val) {
      this.visible = val;
    },
    beforeClose (done) {
      this.visible = false;
      this.$emit("before-close", done);
    },
    // 取消按钮处理方法
    handleCancel () {
      this.visible = false;
      this.$emit("cancel"); // 可以在父组件监听 'cancel' 事件
    },

    // 确定按钮处理方法
    handleConfirm () {
      this.$refs.myFormComponent.validateForm();

      this.visible = false;
      this.$emit("confirm"); // 可以在父组件监听 'confirm' 事件
    },
  },
};
</script>

<style scoped lang="scss">
/* 你可以根据需要为弹窗添加样式 */

.titel {
  font-size: 18px;
  margin: 20px 0;
}

.btn-box {
  margin-left: 20px;
}

.table-container {
  width: 10%;
}

.pagination-container {
  margin-top: 20px;
  text-align: center;
}

.mt-4 {
  margin: 10px 0;
}
</style>