zc_saas_admin/src/views/education/examManagement/qianpeiArrange/allAssociatedExamPlans.vue

<template>
  <div id="allAssociatedExamPlans">
    <el-dialog
      @closed="loadingClose"
      :visible.sync="dialogVisible"
      width="1200px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">所有关联的考试计划</div>
        <div class="rightBoxs">
          <img
            src="@/assets/images/Close@2x.png"
            alt=""
            @click="dialogVisible = false"
          />
        </div>
      </div>
      <div>
        <el-table
          v-loading="loading"
          border
          :data="tableData"
          style="width: 100%; margin-top: 16px"
          ref="elTable"
          max-height="680px"
        >
          <el-table-column
            align="center"
            v-for="(item, index) in tableSet"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
          >
            <template slot-scope="scope">
              <div v-if="item.scope === 'morePeople'">
                <span
                  v-for="(itm, idm) in scope.row[item.prop]
                    .split(',')
                    .map(Number)"
                  :key="idm"
                >
                  {{ itm === 1 ? "非补考学员" : itm === 2 ? "补考学员" : "" }}
                </span>
              </div>
              <el-button
                type="text"
                v-else-if="item.scope === 'btn'"
                @click="del(scope.row)"
                >删除</el-button
              >
              <span v-else-if="item.scope === 'TimeLists'"
                >{{
                  $methodsTools.onlyForma(scope.row[item.prop1], item.Diszing)
                }}
                至
                {{
                  $methodsTools.onlyForma(scope.row[item.prop2], item.Diszing)
                }}</span
              >
              <span v-else>{{ scope.row[item.prop] }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm" :loading="disabledBtn"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      size: "small",
      dialogVisible: false,
      disabledBtn: false,
      total: 0,
      tableSet: [
        {
          label: "考试编码",
          prop: "code",
          width: "160px",
        },
        {
          label: "考试标题",
          prop: "applyName",
        },
        {
          label: "可报学员",
          prop: "applyStatus",
          scope: "morePeople",
          width: "170px",
        },
        {
          label: "学员端报名开放时间",
          prop1: "applyStartTime",
          prop2: "applyEndTime",
          scope: "TimeLists",
          Diszing: false,
          width: "240px",
        },
        {
          label: "操作",
          scope: "btn",
          width: "120px",
        },
      ],
      tableData: [],
      formData: {},
      beforeId: "",
    };
  },
  methods: {
    loadingClose() {
      this.disabledBtn = false;
    },
    openBoxs(arr) {
      this.beforeId = arr.beforeId;
      this.search();
      this.dialogVisible = true;
    },
    search(v) {
      this.loading = true;
      this.$api
        .inquireexamapplyList({ beforeId: this.beforeId })
        .then((res) => {
          this.tableData = res.rows;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    submitForm() {
      this.disabledBtn = true;
      let lists = this.tableData.map((item) => {
        return item.applyId;
      });
      this.$api
        .addexamapply({ beforeId: this.beforeId, applyIds: lists })
        .then((res) => {
          this.$message.success("修改成功");
          this.$emit("backData");
          this.dialogVisible = false;
        })
        .finally(() => {
          this.disabledBtn = false;
        });
    },
    del(row) {
      this.tableData = this.tableData.filter((item) => {
        return item.applyId !== row.applyId;
      });
      this.$message.success("删除成功");
    },
  },
};
</script>

<style lang="less" scoped>
.dis_box {
  background-color: #eee;
  padding: 10px 10px 0px;
  display: flex;
  margin-bottom: 16px;
  .left_box {
    flex: 1;
  }
  .clear_style {
    flex-shrink: 0;
    width: 80px;
    vertical-align: top;
    text-align: center;
  }
}
.elform_style {
  max-height: 620px;
  overflow: auto;
}
.p_style {
  font-size: 12px;
  color: #a4a4a4;
  margin: 0;
}
</style>