moral_edu/src/views/bjzzpb/cggl/index.vue

<template>
  <div>
    <div class="d-flex flex-between pt7">
      <div>
        <el-button type="primary" @click="addData">添加</el-button>
        <el-button type="primary" @click="exportAll">导出</el-button>
      </div>
      <el-form :inline="true">
        <el-form-item label="">
          <el-select
            v-model="firstForm.grade"
            placeholder="请选择年级"
            clearable
            @change="handleChange"
          >
            <el-option
              v-for="item in gradeList"
              :key="item.grade_id"
              :label="item.grade_name"
              :value="item.grade_id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-select
            v-model="firstForm.class"
            placeholder="请选择班级"
            clearable
            @change="getListData"
          >
            <el-option
              v-for="item in classList"
              :key="item.class_id"
              :label="item.class_name"
              :value="item.class_num"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="mr10" label="">
          <el-date-picker
            v-model="firstForm.time"
            @change="getTime"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <!-- <el-form-item class="mr10" prop="" label="分值：">
        <el-input
          placeholder="输入分值"
          clearable
          @clear="getListData"
        ></el-input
      ></el-form-item> -->

        <el-button type="primary" class="ml5" @click="getListData"
          >搜索</el-button
        >
        <!-- <el-button type="primary" class="ml5" @click="clearData">清空</el-button> -->
      </el-form>
    </div>

    <el-table
      @selection-change="handleSelectionChange"
      :data="tableData"
      tooltip-effect="dark"
      v-loading="loading"
      style="width: 100%"
    >
      <el-table-column type="selection" align="center" width="55">
      </el-table-column>

      <el-table-column label="年级" prop="grade_name" width="">
      </el-table-column>
      <el-table-column label="班级" prop="class_name" width="">
      </el-table-column>
      <el-table-column label="时间" prop="xdbs_sj" width="200">
      </el-table-column>
      <el-table-column
        label="常规分值"
        prop="xdbs_cgxmfz"
        align="center"
        width=""
      >
      </el-table-column>
      <el-table-column
        label="实际分值"
        prop="xdbs_cgsjdf"
        align="center"
        width=""
      >
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="rate(scope.row)">评分 </el-button>
          <el-button type="text" @click="detailData(scope.row)"
            >查看分值详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <footer
      class="flex-item-none"
      style="display: flex; justify-content: flex-end; margin-top: 30px"
    >
      <el-pagination
        background
        layout="total,prev, pager, next"
        :page-size="limit"
        :total="total"
        :current-page.sync="cur_page"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </footer>
    <el-dialog :visible.sync="dialogFormVisible" width="700px">
      <h2 class="text-center mb45">常规分值详情</h2>
      <el-form ref="form" :model="dialogForm" label-width="0px">
        <table class="form-table" cellpadding="0" cellspacing="0">
          <tr>
            <td>
              <h3 class="font-size-14">年级班级</h3>
            </td>
            <td>
              <div class="font-size-14">
                {{ detailInfo.class_name }}
              </div>
            </td>
            <td>
              <h3 class="font-size-14">时间</h3>
            </td>
            <td>
              <div class="font-size-14">{{ detailInfo.xdbs_sj }}</div>
            </td>
          </tr>
          <tr>
            <td>
              <h3 class="font-size-14">常规分值</h3>
            </td>
            <td>
              <div class="font-size-14">{{ detailInfo.xdbs_cgxmfz }}</div>
            </td>
            <td>
              <h3 class="font-size-14">实际分值</h3>
            </td>
            <td>
              <div class="font-size-14">{{ detailInfo.xdbs_cgsjdf }}</div>
            </td>
          </tr>
        </table>
        <table class="form-table-two mb90" cellpadding="0" cellspacing="0">
          <!-- <tr v-for="item in tablejlData">
            <td :rowspan="item?item.length+1:1">
              <h3 class="font-size-14">加分/扣分</h3>
            </td>
            <td>
              <h3 class="font-size-14">{{ item.xdbs_jcxm }}</h3>
            </td>
            <td>
              <h3 class="font-size-14">{{item.xdbsp_fz}}</h3>
            </td>

          </tr> -->
          <tr v-for="(item, index) in totalTableData">
            <td v-if="index == 0" :rowspan="item.length + 1">
              <h3 class="font-size-14">加分/扣分</h3>
            </td>
            <td v-for="value in item">
              <h3 class="font-size-14">{{ value }}</h3>
            </td>
          </tr>
        </table>
        <h2 class="text-center mb45">扣分关联人</h2>
        <table class="form-table-three" cellpadding="0" cellspacing="0">
          <tr>
            <td>
              <h3 class="font-size-14">扣分项</h3>
            </td>
            <td>
              <h3 class="font-size-14">分值</h3>
            </td>
            <td>
              <h3 class="font-size-14">关联人</h3>
            </td>
          </tr>
          <tr
            v-for="item in tablejlData"
            v-show="item.xdbsp_lx_option_k == '2'"
          >
            <td>
              <h3 class="font-size-14">{{ item.xdbs_jcxm }}</h3>
            </td>
            <td>
              <h3 class="font-size-14">{{ item.xdbsp_fz }}</h3>
            </td>
            <td>
              <h3 class="font-size-14">{{ item.xdbb_glr }}</h3>
            </td>
          </tr>
        </table>
      </el-form>
      <div slot="footer" class="text-center">
        <el-button @click="formCancel">取 消</el-button>
        <el-button type="primary" @click="formCancel">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="title"
      :visible.sync="rateDialogFormVisible"
      append-to-body
      width="700px"
    >
      <el-form
        :inline="true"
        :model="dialogForm"
        ref="dialogForm"
        :rules="rules"
        label-width="100px"
      >
        <h4 class="mb20 ml20 font-size-12 color-2">
          每个班级总分为100分(卫生50分+常规50分)
        </h4>
        <el-form-item class="mr75" label="评分项" prop="pfx">
          <el-input v-model="dialogForm.pfx"></el-input>
        </el-form-item>

        <el-form-item class="mr75" label="类型" prop="lx">
          <el-radio-group v-model="dialogForm.lx">
            <el-radio :label="1">加分</el-radio>
            <el-radio :label="2">扣分</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item class="mr75" label="分值" prop="fz">
          <el-input v-model="dialogForm.fz"></el-input>
        </el-form-item>
        <el-form-item class="mr75" label="关联学生" prop="glxs">
          <el-select v-model="dialogForm.glxs" clearable filterable>
            <el-option
              v-for="item in studentList"
              :key="item.xdx_id"
              :label="item.xdx_xsxm"
              :value="item.xdx_xsxm"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="所属任务" prop="surw">
          <el-select
            v-model="dialogForm.surw"
            style="width: 100%"
            placeholder="请选择任务名称"
          >
            <el-option
              v-for="item in rwList"
              :key="item.ddrw_id"
              :label="item.ddrw_name"
              :value="{ value: item.ddrw_id, label: item.ddrw_name }"
            ></el-option>
          </el-select>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="text-center">
        <el-button @click="formCancel">取 消</el-button>
        <el-button type="primary" @click="formSubmit('dialogForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="添加"
      :visible.sync="addDialogFormVisible"
      append-to-body
      width="700px"
    >
      <el-form
        :inline="true"
        :model="addDialogForm"
        ref="addDialogForm"
        :rules="addRules"
        label-width="100px"
      >
        <el-form-item class="mr75" label="年级" prop="grade_id">
          <el-select v-model="addDialogForm.grade_id" @change="handleChange">
            <el-option
              v-for="item in gradeList"
              :key="item.grade_id"
              :label="item.grade_name"
              :value="item.grade_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="mr75" label="班级" prop="class_id">
          <el-select
            v-model="addDialogForm.class_id"
            @change="handleClassChange"
            clearable
            filterable
          >
            <el-option
              v-for="item in classList"
              :key="item.class_id"
              :label="item.class_name"
              :value="item.class_num"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item class="mr75" label="时间" prop="xdbs_sj">
          <el-date-picker
            v-model="addDialogForm.xdbs_sj"
            placeholder="选择日期"
            type="date"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item class="mr75" label="常规分值" prop="xdbs_cgxmfz">
          <el-input v-model="addDialogForm.xdbs_cgxmfz"></el-input>
        </el-form-item>
        <el-form-item class="mr75" label="实际分值" prop="xdbs_cgsjdf">
          <el-input v-model="addDialogForm.xdbs_cgsjdf"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="text-center">
        <el-button @click="addDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addFormSubmit('addDialogForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  cggl_list,
  cggl_export,
  cggl_detail,
  cggl_add,
  grade_search,
  class_search,
  fzxq_detail,
  fzxq_edit,
  fzxq_add,
  pf_detail,
  xjk_list,
  fzxq_list,
} from "./api";

import { useUserStore } from "@/stores/user";
const { token } = useUserStore();
export default {
  name: "index",

  data() {
    return {
      limit: 10,
      total: 12,
      cur_page: 1,
      keyword: "",
      grade_name: "",
      class_name: "",
      xdbs_sj: "",
      grade_id: "",
      class_id: "",
      tableData: [],
      gradeList: [],
      detailInfo: {},
      classList: [],
      classList: [],
      firstForm: {
        grade: "",
        class: "",
        time: [],
      },
      loading: false,
      dialogFormVisible: false,
      rateDialogFormVisible: false,
      addDialogFormVisible: false,
      rules: {
        pfx: [{ required: true, message: "请输入评分项", trigger: "blur" }],
        lx: [{ required: true, message: "请选择类型", trigger: "blur" }],
        fz: [{ required: true, message: "请输入分值", trigger: "blur" }],
      },
      title: "",
      id: "",
      dialogForm: {
        pfx: "",
        lx: "",
        fz: "",
        glxs: "",
        grade_id: "",
        class_id: "",
      },
      studentList: [],
      detailPfInfo: {},
      addDialogForm: {
        grade_id: "",
        grade_name: "",
        class_name: "",
        class_id: "",
        xdbs_sj: "",
        xdbs_cgxmfz: "",
        xdbs_cgsjdf: "",
      },
      addRules: {
        grade_id: [{ required: true, message: "请输入年级", trigger: "blur" }],
        class_id: [{ required: true, message: "请选择班级", trigger: "blur" }],
        xdbs_sj: [{ required: true, message: "请选择时间", trigger: "blur" }],
        xdbs_cgxmfz: [
          { required: true, message: "请输入常规分值", trigger: "blur" },
        ],
        xdbs_cgsjdf: [
          { required: true, message: "请输入实际分值", trigger: "blur" },
        ],
      },
      tablejlData: [],
      totalTableData: [],
      multipleSelection1: [],
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getListData();
    },
    getListData() {
      this.loading = true;
      let data = {
        page: this.cur_page,
        limit: this.limit,
        grade_id: this.firstForm.grade,
        class_id: this.firstForm.class,
        xdbs_jclx: "2",
        xdbs_sj: this.xdbs_sj,
      };
      if (this.firstForm.time.length > 0) {
        data.xdbs_sj = this.firstForm.time[0] + " - " + this.firstForm.time[1];
      } else {
        data.xdbs_sj = "";
      }
      cggl_list(data).then((res) => {
        this.loading = false;
        this.tableData = res.data.page_data;
        this.cur_page = Number(res.data.page_now);
        this.total = Number(res.data.total_rows);
      });
    },
    addData() {
      this.addDialogForm = {
        grade_id: "",
        grade_name: "",
        class_name: "",
        class_id: "",
        xdbs_sj: "",
        xdbs_cgxmfz: "",
        xdbs_cgsjdf: "",
      };
      this.isEdit = false;
      this.addDialogFormVisible = true;
    },

    getTime() {
      if (!this.firstForm.time) {
        this.firstForm.time = [];
      }
      this.cur_page = 1;
      this.getListData();
    },

    detailData(item) {
      this.title = "信息详情";
      this.dialogFormVisible = true;
      let data = {
        xdbb_id: item.xdbb_id,
      };
      cggl_detail(data).then((res) => {
        if (res.code == 1) {
          this.detailInfo = res.data.one_info;
        }
        let obj = {
          grade_id: item.grade_id,
          class_id: item.class_id,
        };
        fzxq_list(obj).then((res) => {
          this.loading = false;
          this.tablejlData = res.data.page_data;
          let arr = [];
          this.tablejlData.map((item, index) => {
            if (index % 4 == 0) {
              arr[arr.length] = [item];
            } else {
              arr[arr.length - 1].push(item);
            }
          });
          console.log(arr);

          this.totalTableData = [];
          arr.map((children) => {
            let arr = [];
            children.map((item) => {
              arr.push(item.xdbs_jcxm);
            });
            this.totalTableData.push(arr);

            let arr1 = [];
            children.map((item) => {
              arr1.push(item.xdbsp_fz);
            });
            this.totalTableData.push(arr1);
          });

          console.log(this.totalTableData);
        });
      });
    },
    rate(item) {
      this.title = "评分";
      this.rateDialogFormVisible = true;
      this.id = item.xdbb_id;
      this.dialogForm.pfx = item.xdbs_jcxm;
      this.dialogForm.lx = item.xdbsp_lx;
      this.dialogForm.fz = item.xdbsp_fz;
      this.dialogForm.glxs = item.xdbb_glr;
      this.dialogForm.grade_id = item.grade_id;
      this.dialogForm.class_id = item.class_id;
    },
    addFormSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {
            grade_id: this.addDialogForm.grade_id,
            grade_name: this.addDialogForm.grade_name,
            class_name: this.addDialogForm.class_name,
            class_id: this.addDialogForm.class_id,
            xdbs_sj: this.addDialogForm.xdbs_sj,
            xdbs_cgxmfz: this.addDialogForm.xdbs_cgxmfz,
            xdbs_cgsjdf: this.addDialogForm.xdbs_cgsjdf,
          };
          console.log(data, 333);

          if (!this.isEdit) {
            cggl_add(data).then((res) => {
              if (res.code == 1) {
                this.$message({
                  message: "添加成功！",
                  type: "success",
                });
                this.addDialogFormVisible = false;
                this.getListData();
              } else {
                this.$message({
                  message: res.msg,
                  type: "error",
                });
              }
            });
          }
        }
      });
    },
    formSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {
            xdbs_jcxm: this.dialogForm.pfx,
            xdbsp_lx: this.dialogForm.lx,
            xdbsp_fz: this.dialogForm.fz,
            xdbb_glr: this.dialogForm.glxs,
            grade_id: this.dialogForm.grade_id,
            class_id: this.dialogForm.class_id,
          };

          fzxq_add(data).then((res) => {
            if (res.code == 1) {
              this.$message({
                message: "评分成功！",
                type: "success",
              });

              this.rateDialogFormVisible = false;
              this.getListData();
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
          });
        }
      });
    },

    formCancel() {
      this.dialogFormVisible = false;
      this.rateDialogFormVisible = false;
    },
    handleSelectionChange(val) {
      this.multipleSelection1 = [];
      for (let i in val) {
        this.multipleSelection1.push(val[i].xdbb_id);
        console.log(this.multipleSelection1, 123);
      }
    },
    exportAll() {
      let time = "";
      if (this.firstForm.time.length > 0) {
        time = this.firstForm.time[0] + " - " + this.firstForm.time[1];
      } else {
        time = "";
      }
      let link =
        window.globalVariables.api +
        "/xddy/dygl_bjzzpb_bjpfgl/index?api=xls&page=1&limit=10000&xdbs_jclx=2&token=" +
        token +
        "&xdbb_id=" +
        this.multipleSelection1.join(",");
      window.open(link, "_blank");
    },
    studentData() {
      this.loading = true;
      let data = {};
      xjk_list(data).then((res) => {
        this.loading = false;
        this.studentList = res.data.page_data;
        console.log(this.studentList, 1344);
      });
    },

    gradeListData() {
      this.loading = true;
      let data = {};
      grade_search(data).then((res) => {
        this.loading = false;
        this.gradeList = res.data.page_data;
      });
    },

    handleChange(e) {
      console.log(e, 555555555);
      this.firstForm.class = "";
      this.addDialogForm.class_id = "";
      this.gradeList.map((item) => {
        if (item.grade_id == this.addDialogForm.grade_id) {
          this.addDialogForm.grade_name = item.grade_name;
        }
      });

      let data = { limit: "999", grade_id: e };
      console.log(data, 111111111111111);
      class_search(data).then((res) => {
        this.classList = res.data.page_data;
      });
      if (this.addDialogFormVisible != true) {
        this.getListData();
      }
    },

    handleClassChange() {
      this.classList.map((item) => {
        if (item.class_num == this.addDialogForm.class_id) {
          this.addDialogForm.class_name = item.class_name;
        }
      });
    },
    clearData() {
      this.firstForm.grade = "";
      this.firstForm.class = "";
      this.firstForm.time = "";
    },
  },
  mounted() {
    this.getListData();
    this.gradeListData();
    this.studentData();
  },
};
</script>

<style lang="scss" scoped>
.form-table {
  width: 100%;
  border-collapse: collapse;
  padding: auto;
  td {
    height: 30px;
    line-height: 30px;
    padding: 4px 4px 5px 5px;
    border: 1px solid #dbdbdb;
  }
  td:nth-child(odd) {
    width: 20%;
    background-color: #f5f7fe;
  }
  td:nth-child(even) {
    width: 30%;
    background-color: #fff;
  }
}
.form-table-two {
  width: 100%;
  border-collapse: collapse;
  padding: auto;
  td {
    width: 20%;
    height: 30px;
    line-height: 30px;
    padding: 4px 4px 5px 5px;
    border: 1px solid #dbdbdb;
    border-top: none;
  }
  tr:nth-child(odd) {
    background-color: #f5f7fe;
  }
}
.form-table-three {
  width: 80%;
  border-collapse: collapse;
  padding: auto;
  margin: 0 auto;
  td {
    width: 33.3%;
    height: 30px;
    line-height: 30px;
    padding: 4px 4px 5px 5px;
    border: 1px solid #dbdbdb;
  }
  tr:first-child {
    background-color: #f5f7fe;
  }
}
::v-deep .el-input {
  width: 160px;
}
::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 300px;
}
::v-deep .el-date-editor .el-range-separator {
  width: 8%;
}
</style>>