examcloud-admin-web/src/modules/basic/view/exam_site.vue

<template>
  <div>
    <LinkTitlesCustom :currentPaths="['机构管理 ', '中心列表', '考点设置']" />

    <section class="content">
      <div class="box box-info">
        <div class="box-body">
          <!-- 表单 -->
          <ecs-form-search :model="formSearch">
            <el-row>
              <el-form-item label="学习中心">
                <el-input v-model="orgName" disabled />
              </el-form-item>
              <el-form-item label="考点代码">
                <el-input
                  placeholder="请输入考点代码"
                  v-model="formSearch.code"
                />
              </el-form-item>
              <el-form-item label="考点名称">
                <el-input
                  placeholder="请输入考点名称"
                  v-model="formSearch.name"
                />
              </el-form-item>
              <el-form-item>
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-search"
                  @click="searchForm"
                >
                  查询
                </el-button>
                <el-button
                  size="small"
                  icon="el-icon-refresh"
                  @click="resetSearchForm"
                >
                  重置
                </el-button>
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-plus"
                  @click="insert"
                >
                  新增
                </el-button>
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-arrow-left"
                  @click="back"
                >
                  退回
                </el-button>
              </el-form-item>
            </el-row>
          </ecs-form-search>

          <!-- 添加考点信息弹出框 -->
          <el-dialog
            title="考点信息"
            width="450px"
            :visible.sync="examSiteDialog"
            @before-close="dialogBeforeClose"
          >
            <el-form
              :inline="true"
              inline-message
              :model="examSiteForm"
              ref="examSiteForm"
              :rules="rules"
              label-position="right"
              label-width="90px"
            >
              <el-row>
                <el-form-item label="学习中心" label-width="120px" prop="code">
                  <el-input
                    class="pull_length"
                    v-model="orgName"
                    auto-complete="off"
                    placeholder="中心代码"
                    disabled
                  />
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="考点代码" label-width="120px" prop="code">
                  <el-input
                    class="pull_length"
                    v-model="examSiteForm.code"
                    auto-complete="off"
                    placeholder="考点代码"
                    :disabled="null != examSiteForm.id"
                  />
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="考点名称" label-width="120px" prop="name">
                  <el-input
                    class="pull_length"
                    v-model="examSiteForm.name"
                    auto-complete="off"
                    placeholder="考点名称"
                  />
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="负责人" label-width="120px">
                  <el-input
                    class="pull_length"
                    v-model="examSiteForm.contacts"
                    auto-complete="off"
                    placeholder="负责人"
                  />
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="联系方式" label-width="120px">
                  <el-input
                    class="pull_length"
                    v-model="examSiteForm.telephone"
                    auto-complete="off"
                    placeholder="联系方式"
                  />
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="备注" label-width="120px">
                  <el-input
                    class="pull_length"
                    v-model="examSiteForm.remark"
                    auto-complete="off"
                    placeholder="备注"
                  />
                </el-form-item>
              </el-row>
              <el-row class="d-flex justify-content-center">
                <el-button type="primary" @click="submitForm">保 存</el-button>
                <el-button @click="examSiteDialog = false">取 消</el-button>
              </el-row>
            </el-form>
          </el-dialog>

          <span>操作：</span>
          <el-button
            size="small"
            type="danger"
            icon="el-icon-delete"
            @click="deleteByIds"
          >
            删除
          </el-button>

          <div style="width: 100%;margin-bottom: 10px;"></div>

          <!-- 页面列表 -->
          <el-table
            :data="tableData"
            border
            resizable
            stripe
            @selection-change="selectChange"
          >
            <el-table-column type="selection" width="35" />
            <el-table-column prop="id" width="70" label="ID" />
            <el-table-column prop="code" label="考点代码" />
            <el-table-column prop="name" label="考点名称" />
            <el-table-column prop="contacts" width="100" label="负责人" />
            <el-table-column prop="telephone" width="100" label="联系方式" />
            <el-table-column prop="remark" width="120" label="备注" />
            <el-table-column prop="updateTime" width="180" label="更新时间" />
            <el-table-column label="操作" width="200">
              <div slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  icon="el-icon-edit"
                  plain
                  @click="edit(scope.row)"
                >
                  编辑
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="deleteById(scope.row)"
                  icon="el-icon-delete"
                >
                  删除
                </el-button>
              </div>
            </el-table-column>
          </el-table>
          <div class="page pull-right">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="pageSize"
              :page-sizes="[10, 20, 50, 100]"
              @size-change="handleSizeChange"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            />
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { CORE_API } from "@/constants/constants.js";
import { mapState } from "vuex";
import LinkTitlesCustom from "@/components/LinkTitlesCustom.vue";

export default {
  name: "ExamSite",
  data() {
    return {
      orgId: null,
      formSearch: {
        code: "",
        name: "",
        orgId: ""
      },
      examSiteForm: {
        id: null,
        name: "",
        code: "",
        contacts: "",
        telephone: "",
        orgId: "",
        remark: ""
      },
      examSiteDialog: false,
      selectedExamSiteIds: [],
      loading: true,
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 10,
      orgName: "",
      rules: {
        code: [{ required: true, message: "请输入代码", trigger: "blur" }],
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        contacts: [
          { required: false, message: "请输入负责人", trigger: "blur" }
        ],
        telphone: [
          { required: false, message: "请输入联系方式", trigger: "blur" }
        ]
      }
    };
  },
  computed: {
    ...mapState({ user: state => state.user }),
    examSiteIds() {
      var examSiteIds = "";
      for (let examSiteId of this.selectedExamSiteIds) {
        if (!examSiteIds) {
          examSiteIds += examSiteId;
        } else {
          examSiteIds += "," + examSiteId;
        }
      }
      return examSiteIds;
    }
  },
  methods: {
    back() {
      this.$router.back();
    },
    resetSearchForm() {
      this.formSearch.code = "";
      this.formSearch.name = "";
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.searchForm();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.searchForm();
    },
    //查询
    searchForm() {
      this.loading = true;
      var param = new URLSearchParams(this.formSearch);
      var url =
        CORE_API +
        "/examSite/examSitePage/" +
        (this.currentPage - 1) +
        "/" +
        this.pageSize +
        "?" +
        param;
      this.$http.get(url).then(response => {
        this.tableData = response.data.content;
        this.total = response.data.totalElements;
        this.loading = false;
      });
    },
    selectChange(row) {
      this.selectedExamSiteIds = [];
      row.forEach(element => {
        this.selectedExamSiteIds.push(element.id);
      });
      console.log(this.selectedExamSiteIds);
    },
    //重置
    resetForm() {
      this.$refs.examSiteForm.resetFields();
    },
    //提交
    submitForm() {
      this.$refs.examSiteForm.validate(valid => {
        if (valid) {
          var url = CORE_API + "/examSite";
          if (this.examSiteForm.id) {
            this.$http.put(url, this.examSiteForm).then(
              () => {
                this.$notify({
                  type: "success",
                  message: "修改成功！"
                });
                this.searchForm();
                this.resetForm();
                this.examSiteDialog = false;
              },
              response => {
                if (response.status == 500) {
                  this.$notify({
                    showClose: true,
                    message: response.data.desc,
                    type: "error"
                  });
                }
              }
            );
          } else {
            this.$http.post(url, this.examSiteForm).then(
              () => {
                this.$notify({
                  type: "success",
                  message: "新增成功！"
                });
                this.searchForm();
                this.resetForm();
                this.examSiteDialog = false;
              },
              response => {
                if (response.status == 500) {
                  this.$notify({
                    showClose: true,
                    message: response.data.desc,
                    type: "error"
                  });
                }
              }
            );
          }
        } else {
          console.log("error submit!");
          return false;
        }
      });
    },
    dialogBeforeClose() {
      this.$refs.examSiteForm.clearValidate();
    },
    //新增
    insert() {
      this.examSiteForm.id = null;
      this.examSiteForm.code = null;
      this.examSiteForm.name = null;
      this.examSiteForm.orgId = this.orgId;
      this.examSiteForm.telephone = null;
      this.examSiteForm.contacts = null;
      this.examSiteForm.remark = null;

      this.examSiteDialog = true;
    },
    //修改
    edit(row) {
      this.examSiteForm.id = row.id;
      this.examSiteForm.code = row.code;
      this.examSiteForm.name = row.name;
      this.examSiteForm.orgId = row.orgId;
      this.examSiteForm.telephone = row.telephone;
      this.examSiteForm.contacts = row.contacts;
      this.examSiteForm.remark = row.remark;

      this.examSiteDialog = true;
    },
    //删除单个数据
    deleteById(row) {
      this.$confirm("是否删除该考点？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        var url = CORE_API + "/examSite/" + row.id;
        this.$http
          .delete(url)
          .then(() => {
            this.$notify({
              type: "success",
              message: "删除成功！"
            });
            this.searchForm();
          })
          .catch(response => {
            if (response.status == 500) {
              this.$notify({
                showClose: true,
                message: response.data.desc,
                type: "error"
              });
            }
          });
      });
    },
    //删除多条数据
    deleteByIds() {
      if (this.selectedExamSiteIds.length === 0) {
        this.$notify({
          type: "warning",
          message: "请选择要删除的考点"
        });
      } else {
        this.$confirm("是否删除这些考点？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "error"
        }).then(() => {
          var url = CORE_API + "/examSite/" + this.examSiteIds;
          this.$http
            .delete(url)
            .then(() => {
              this.$notify({
                type: "success",
                message: "删除成功！"
              });
              this.searchForm();
            })
            .catch(response => {
              if (response.status == 500) {
                this.$notify({
                  showClose: true,
                  message: response.data.desc,
                  type: "error"
                });
              }
            });
        });
      }
    },
    init() {
      var url = CORE_API + "/org/subOrg/" + this.orgId;
      this.$http
        .get(url)
        .then(response => {
          this.orgName = response.data.name;
          this.searchForm();
        })
        .catch(response => {
          if (response.status == 500) {
            this.$notify({
              showClose: true,
              message: response.data.desc,
              type: "error"
            });
          }
        });
    }
  },
  created() {
    this.orgId = this.$route.params.orgId;
    this.formSearch.orgId = this.$route.params.orgId;
    this.init();
  },
  components: {
    LinkTitlesCustom
  }
};
</script>

<style scoped>
.page {
  margin-top: 10px;
}

.el-upload {
  width: 80px;
}
.pull_length {
  width: 200px;
}
</style>