SixUnificationCDC-UI/src/views/unified-access/access-feedback/index.vue

<template>
  <el-container>
    <el-header height="60px" class="content-header">
      <MyHeader :title="'统一接入反馈表'" :formData="headerFormData" @submit="handleHeaderFormSubmit"></MyHeader>
    </el-header>
    <el-container>
      <el-main>
        <MyTableHeader
          :title="tableHeaderTitle"
          :tabs="tabs"
          :buttons="buttons"
          @tabClick="handleTabClick"
          @buttonClick="handleButtonClick"
        ></MyTableHeader>

        <MyTable
          :tableData="tableData"
          :formData="formData"
          :minWidth="400"
          @selection-change="handleSelectionChange"
        >
          <!-- 自定义操作按钮，传递 row 和 index -->
          <template #operation="{ row ,$index}">
            <el-button size="mini" @click="handleView(row, $index)" type="primary">查看</el-button>
            <el-button size="mini" @click="handleEdit(row, $index)" type="primary">编辑</el-button>
            <el-button
              size="mini"
              @click="handleStop(row, $index)"
              type="primary"
              v-if="+row.isApply===1"
            >停用</el-button>
            <el-button
              size="mini"
              @click="handleStart(row, $index)"
              type="primary"
              v-if="+row.isApply===0"
            >启用</el-button>
            <el-button
              size="mini"
              @click="handleSubmit(row, $index)"
              type="primary"
              v-if="activeTabLable !== 2&&+row.status===2"
            >提交</el-button>
            <el-button
              size="mini"
              @click="handleRevoke(row, $index)"
              type="primary"
              v-if="activeTabLable !== 2&&+row.status===3"
            >撤回</el-button>
            <el-button size="mini" @click="handleCatalog(row, $index)" type="primary">编目</el-button>
            <el-button
              size="mini"
              @click="handleUpperChain(row, $index)"
              type="primary"
              v-if="activeTabLable !== 1"
            >上链</el-button>
            <el-button size="mini" @click="handleDelete(row)" type="primary">删除</el-button>
          </template>
        </MyTable>
        <MyPagination
          :total="tableTotal"
          :page-size="pageSize"
          :current-page="currentPage"
          @pageChange="pagi_changePage"
          @sizeChange="pagi_changeSize"
        ></MyPagination>
      </el-main>
    </el-container>
    <div v-if="showDialog">
      <FeedbackDialog v-model="showDialog" :title="title" :rowObj="rowObj" @confirm="confirmHandle"></FeedbackDialog>
    </div>
  </el-container>
</template>
<script>
import {
  getTabAccessFeedbackList,
  delTabAccessFeedbackList,
  saveStepTabAccessReadyById,
  updateIsApplyById
} from "@/api/unified-access/access-feedback.js";
import FeedbackDialog from "./dialog/FeedbackDialog.vue";
import MyHeader from "@/components/MyHeader";
import MyTable from "@/components/MyTable";
import MyPagination from "@/components/MyPagination";
import MyTableHeader from "@/components/MyTableHeader";
export default {
  name: "user-manage",
  components: {
    MyHeader,
    MyTableHeader,
    MyTable,
    MyPagination,
    FeedbackDialog
  },
  data() {
    return {
      rowObj: {},
      title: "",
      uploadUrl: process.env.VUE_APP_BASE_API + "/web/tab-file-info/upload",
      showDialog: false,
      searchForm: {},
      selectedRows: [], // 存储选中的行数据
      tableData: [],
      formData: [
        {
          label: "数据源所属单位部门",
          fieldName: "offerDept",
          type: "input",
          showInTable: true,
          value: "",
          width: ""
        },

        {
          label: "数据源联系人",
          fieldName: "persion",
          type: "input",
          showInTable: true,
          value: "",
          width: ""
        },
        {
          label: "数据源联系电话",
          fieldName: "phone",
          type: "input",
          showInTable: true,
          value: "",
          width: ""
        },
        {
          label: "数据源所属信息系统",
          fieldName: "offerSystem",
          type: "input",
          showInTable: true,
          value: "",
          width: ""
        },
        {
          label: "数据源所属信息系统IP",
          fieldName: "readyIp",
          type: "input",
          showInTable: true,
          value: "",
          width: ""
        },
        {
          label: "数据源所属信息系统端口",
          fieldName: "readyPort",
          type: "input",
          showInTable: true,
          value: "",
          width: ""
        },
        {
          label: "接收方所属单位部门",
          fieldName: "accessDept",
          type: "input",
          showInTable: true,
          value: "",
          width: ""
        },

        {
          label: "接收方所属信息系统",
          fieldName: "accessSystem",
          type: "input",
          showInTable: true,
          value: "",
          width: ""
        },
        // {
        //   label: "数据项目",
        //   fieldName: "address",
        //   type: "input",
        //   showInTable: true,
        //   value: "",
        //   width: ""
        // },
        // {
        //   label: "拟/正式运行时间",
        //   fieldName: "address",
        //   type: "input",
        //   showInTable: true,
        //   value: "",
        //   width: ""
        // },
        {
          label: "接入方式",
          fieldName: "dataAccessType",
          type: "input",
          showInTable: true,
          value: "",
          width: ""
        },
        {
          label: "状态",
          fieldName: "status",
          type: "input",
          showInTable: true,
          value: "",
          width: "80"
        }
      ],
      tableTotal: 0,
      pageSize: 10,
      currentPage: 1,
      treeSearchVal: "",
      tableHeaderTitle: "项目列表",
      activeTabLable: "",
      tabs: [
        { label: "全部", value: "", active: true },
        {
          label: "正式运行",
          value: 1,
          active: false
        },
        { label: "申请反馈", value: 2, active: false }
      ],
      buttons: [
        {
          label: "新建",
          type: "primary",
          methodName: "action1",
          icon: "el-icon-circle-plus"
        },
        {
          label: "删除",
          type: "primary",
          methodName: "action2",
          icon: "el-icon-remove"
        },
        // {
        //   label: "启用",
        //   type: "primary",
        //   methodName: "action3",
        //   icon: "el-icon-video-play"
        // },
        // {
        //   label: "停用",
        //   type: "primary",
        //   methodName: "action4",
        //   icon: "el-icon-video-pause"
        // },
        {
          label: "导入",
          type: "primary",
          methodName: "action5",
          icon: "el-icon-download"
        },
        {
          label: "导出",
          type: "primary",
          methodName: "action6",
          icon: "el-icon-upload2"
        }
      ],

      headerFormData: [
        {
          label: "数据资源名称",
          fieldName: "dataMane",
          type: "input",
          value: "",
          placeholder: "请输入用户分类"
          // isRequired: true,
        },
        {
          label: "状态",
          fieldName: "username",
          type: "input",
          value: "",
          placeholder: "请输入用户状态"
          // isRequired: true,
        }
      ]
    };
  },
  methods: {
    // 处理选中项变化
    handleSelectionChange(selectedRows) {
      this.selectedRows = selectedRows; // 获取选中的行
    },
    // 头部搜索框
    handleHeaderFormSubmit(form) {
      this.searchForm = form;
      this.getList();
    },
    // 列表头部功能按钮
    handleButtonClick(methodName) {
      console.log(methodName, "methodName");

      switch (methodName) {
        case "action1":
          // 新增
          this.rowObj = {};
          this.title = "新增";
          this.showDialog = true;
          break;
        case "action2":
          // 删除
          if (this.selectedRows.length > 0) {
            let ids = [];
            ids = this.selectedRows.map(item => item.id);
            delTabAccessFeedbackList({ ids: [...ids] }).then(res => {
              if (+res.code === 200) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
                this.getList();
              } else {
                this.$message.error(res.msg);
              }
            });
          } else {
            this.$confirm("请选择列表项?", "提示", {
              confirmButtonText: "关闭",
              cancelButtonText: "取消",
              showCancelButton: false,
              showConfirmButton: false,
              type: "warning",
              center: true
            })
              .then(() => {})
              .catch(() => {});
          }
          break;

        default:
          break;
      }
    },
    // 树结构点击
    handleNodeClick() {},
    // 列表头部
    handleTabClick(tab) {
      this.tabs.forEach(item => {
        if (item.label === tab.label) {
          item.active = true;
          this.activeTabLable = tab.value;
          if (item.label === "正式运行") {
            this.formData.forEach(item => {
              // if (item.label==='正式运行时间') {
              // }
            });
          }
        } else {
          item.active = false;
        }
      });
    },

    getList() {
      getTabAccessFeedbackList({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        status: this.activeTabLable,
        ...this.searchForm
      }).then(res => {
        if (+res.code === 200) {
          this.tableData = res.rows;
          this.tableTotal = +res.total;
        }
      });
    },
    // 列表分页
    pagi_changePage(page) {
      this.currentPage = page;
      this.getList();
    },
    pagi_changeSize(size) {
      this.pageSize = size;
      this.getList();
    },

    handleView(row) {
      this.rowObj = row;
      this.title = "查看";
      this.showDialog = true;
    },
    handleEdit(row) {
      console.log(row, "row===///");
      this.rowObj = row;
      this.title = "编辑";
      this.showDialog = true;
    },
    handleDelete(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        center: true,
        type: "warning"
      })
        .then(() => {
          delTabAccessFeedbackList({ ids: [row.id] }).then(res => {
            if (+res.code === 200) {
              this.$message({
                message: res.msg,
                type: "success"
              });
              this.getList();
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    confirmHandle() {
      this.showDialog = false;
      this.getList();
    },
    // 提交
    handleSubmit(row) {
      saveStepTabAccessReadyById({ status: 3, id: row.id }).then(res => {
        if (+res.code === 200) {
          this.$message({
            message: res.msg,
            type: "success"
          });
          this.getList();
        }
      });
    },
    // 撤回
    handleRevoke(row) {
      saveStepTabAccessReadyById({ status: 2, id: row.id }).then(res => {
        if (+res.code === 200) {
          this.$message({
            message: res.msg,
            type: "success"
          });
          this.getList();
        }
      });
    },
    // 停用
    handleStop(row) {
      updateIsApplyById({ isApply: 0, id: row.id }).then(res => {
        if (+res.code === 200) {
          this.$message({
            message: res.msg,
            type: "success"
          });
          this.getList();
        }
      });
    },
    // 启用
    handleStart(row) {
      updateIsApplyById({ isApply: 1, id: row.id }).then(res => {
        if (+res.code === 200) {
          this.$message({
            message: res.msg,
            type: "success"
          });
          this.getList();
        }
      });
    }
  },
  created() {},
  mounted() {
    this.getList();
  }
};
</script>
<style lang="scss" scoped>
.el-main {
  padding: 0 20px;
}

.el-icon-search {
  font-size: 16px;
  font-weight: 700;
  color: #1e80e0;
}
</style>