moral_edu/src/views/xshjgl/jlgl/rygl/index.vue

<template>
  <div>
    <div class="d-flex flex-between pt7">
      <div>
        <el-button type="primary" @click="addRy">添加</el-button>
        <el-button
          type="danger"
          :disabled="multipleSelection.length == 0"
          @click="delRy"
          >撤销</el-button
        >
      </div>
      <el-form :inline="true" :model="searchForm">
        <el-form-item class="mr10" label="">
          <el-select
            v-model="searchForm.jb"
            placeholder="请选择级别"
            @change="getListData"
            clearable
          >
            <el-option
              v-for="item in rankList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="mr10" label="">
          <el-select
            v-model="searchForm.dj"
            placeholder="请选择等级"
            @change="getListData"
            clearable
          >
            <el-option
              v-for="item in levelList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="mr10" label="">
          <el-input
            v-model="searchForm.hjfs"
            placeholder="请输入获奖方式"
            clearable
            @clear="getListData"
          ></el-input>
        </el-form-item>
        <el-button type="primary" @click="getListData">搜索</el-button>
      </el-form>
    </div>

    <el-table
      :data="listData"
      v-loading="loading"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" align="center" width="55">
      </el-table-column>
      <el-table-column
        label="所获荣誉名称"
        prop="xdxr_shrymc"
        width="200"
      ></el-table-column>
      <el-table-column label="姓名" prop="xdxr_xsxm" width="">
      </el-table-column>
      <el-table-column label="奖励级别" prop="xdxr_jljb" width="">
      </el-table-column>
      <el-table-column label="奖励等级" prop="xdxr_jldj" width="">
      </el-table-column>
      <el-table-column label="荣获称号时间" prop="xdxr_rychsj" width="200">
      </el-table-column>
      <el-table-column label="获奖项目" prop="xdxr_hjxm" width="">
      </el-table-column>
      <el-table-column label="获奖方式" prop="xdxr_hjfs" width="">
      </el-table-column>
      <el-table-column label="颁奖（授予）部门" prop="xdxr_bjsybm" width="200">
      </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
      title="添加荣誉"
      :visible.sync="addDialogVisible"
      width="780px"
      v-loading="loading"
    >
      <el-form
        :model="addForm"
        ref="addForm"
        :rules="rules"
        label-width="150px"
      >
        <div class="d-flex">
          <div class="flex-1">
            <el-form-item label="学生姓名：">
              <el-input v-model="xdxr_xsxm" disabled></el-input>
            </el-form-item>
          </div>
          <div class="flex-1">
            <el-form-item label="学籍号：">
              <el-input v-model="xdxr_xsxh" disabled></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="d-flex">
          <div class="flex-1">
            <el-form-item label="所获荣誉名称：" prop="xdxr_shrymc">
              <el-input v-model="addForm.xdxr_shrymc"></el-input>
            </el-form-item>
          </div>
          <div class="flex-1">
            <el-form-item label="奖励级别：" prop="xdxr_jljb">
              <el-select
                v-model="addForm.xdxr_jljb"
                placeholder="请选择级别"
                style="width: 220px"
              >
                <el-option
                  v-for="item in rankList"
                  v-if="item.value != 0"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="d-flex">
          <div class="flex-1">
            <el-form-item label="荣获称号时间：" prop="xdxr_rychsj">
              <el-date-picker
                style="width: 220px"
                clearable
                v-model="addForm.xdxr_rychsj"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="flex-1">
            <el-form-item label="颁奖（授予）部门：" prop="xdxr_bjsybm">
              <el-input v-model="addForm.xdxr_bjsybm"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="d-flex">
          <div class="flex-1">
            <el-form-item label="获奖项目：" prop="xdxr_hjxm">
              <el-input v-model="addForm.xdxr_hjxm"></el-input>
            </el-form-item>
          </div>
          <div class="flex-1">
            <el-form-item label="获奖等级：" prop="xdxr_jldj">
              <el-select
                v-model="addForm.xdxr_jldj"
                placeholder="请选择等级"
                style="width: 220px"
              >
                <el-option
                  v-for="item in levelList"
                  v-if="item.value != 0"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="d-flex">
          <div class="flex-1">
            <el-form-item label="获奖方式：" prop="xdxr_hjfs">
              <el-input
                v-model="addForm.xdxr_hjfs"
                style="width: 220px"
              ></el-input>
            </el-form-item>
          </div>
        </div>
        <el-form-item label="上传附件" prop="xdxr_scfj">
          <FileUpload
            :limit="5"
            :full.sync="addForm.xdxr_scfj"
            :key="timestamp"
            multiple
          >
            <div slot="tip" class="el-upload__tip">
              支持文件类型:doc(.docx)、.ppt(.pptx)、.xls(.xlsx)、.pps、.wps、.pdf、.txt文件格式。
            </div>
          </FileUpload>
        </el-form-item>
        <el-form-item label="获奖原因" prop="xdxr_hjyy">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            v-model="addForm.xdxr_hjyy"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="addForm = false">取 消</el-button>
        <el-button type="primary" @click="addFormSubmit('addForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ry_list, ry_add, ry_edit } from "./api";
import FileUpload from "@/components/FileUpload/index.vue";
export default {
  name: "index",
  components: {
    FileUpload,
  },
  data() {
    return {
      id: "",
      listData: [],
      limit: 10,
      total: 0,
      cur_page: 1,
      loading: false,
      multipleSelection: [],
      searchForm: {
        jb: "",
        dj: "",
        hjfs: "",
      },
      rankList: [
        {
          value: "0",
          label: "全部",
        },
        {
          value: "1",
          label: "国家级",
        },
        {
          value: "2",
          label: "省",
        },
        {
          value: "3",
          label: "市",
        },
        {
          value: "4",
          label: "县",
        },
        {
          value: "5",
          label: "单位",
        },
      ],
      levelList: [
        {
          value: "0",
          label: "全部",
        },
        {
          value: "1",
          label: "一等奖",
        },
        {
          value: "2",
          label: "二等奖",
        },
        {
          value: "3",
          label: "三等奖",
        },
        {
          value: "4",
          label: "四等奖",
        },
        {
          value: "5",
          label: "五等奖",
        },
      ],
      addDialogVisible: false,
      xdxr_xsxm: "",
      xdxr_xsxh: "",
      addForm: {
        xdxr_shrymc: "",
        xdxr_jljb: "",
        xdxr_rychsj: "",
        xdxr_bjsybm: "",
        xdxr_hjxm: "",
        xdxr_jldj: "",
        xdxr_hjfs: "",
        xdxr_scfj: "",
        xdxr_hjyy: "",
      },
      rules: {
        xdxr_shrymc: [
          { required: true, message: "请输入荣誉名称", trigger: "blur" },
        ],
        xdxr_jljb: [
          { required: true, message: "请选择奖励级别", trigger: "change" },
        ],

        xdxr_rychsj: [
          { required: true, message: "请选择时间", trigger: "blur" },
        ],
        xdxr_bjsybm: [
          { required: true, message: "请输入部门", trigger: "blur" },
        ],
        xdxr_hjxm: [
          { required: true, message: "请输入获奖项目", trigger: "blur" },
        ],
        xdxr_jldj: [
          { required: true, message: "请选择奖励等级", trigger: "change" },
        ],
        xdxr_hjfs: [
          { required: true, message: "请输入获奖方式", trigger: "blur" },
        ],
        xdxr_hjyy: [
          { required: true, message: "请输入获奖原因", trigger: "blur" },
        ],
      },
      timestamp: Date.now(),
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getListData() {
      this.loading = true;
      let data = {
        page: this.cur_page,
        limit: this.limit,
        xdxr_xsxh: this.xdxr_xsxh,
        xdxr_jldj: this.searchForm.dj,
        xdxr_jljb: this.searchForm.jb,
        xdxr_hjfs: this.searchForm.hjfs,
        isdelete: "0",
      };
      ry_list(data).then((res) => {
        if (res.code == 1) {
          this.loading = false;
          this.listData = res.data.page_data;
          this.cur_page = Number(res.data.page_now);
          this.total = Number(res.data.total_rows);
        }
      });
    },
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getListData();
    },
    addRy() {
      this.addForm = {
        xdxr_shrymc: "",
        xdxr_jljb: "",
        xdxr_rychsj: "",
        xdxr_bjsybm: "",
        xdxr_hjxm: "",
        xdxr_jldj: "",
        xdxr_hjfs: "",
        xdxr_scfj: "",
        xdxr_hjyy: "",
      };
      this.addDialogVisible = true;
    },
    addFormSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          let data = {
            xdxr_xsxm: this.xdxr_xsxm,
            xdxr_xsxh: this.xdxr_xsxh,
            xdxr_shrymc: this.addForm.xdxr_shrymc,
            xdxr_jljb: this.addForm.xdxr_jljb,
            xdxr_rychsj: this.addForm.xdxr_rychsj,
            xdxr_bjsybm: this.addForm.xdxr_bjsybm,
            xdxr_hjxm: this.addForm.xdxr_hjxm,
            xdxr_jldj: this.addForm.xdxr_jldj,
            xdxr_hjfs: this.addForm.xdxr_hjfs,
            xdxr_scfj: this.addForm.xdxr_scfj,
          };
          ry_add(data).then((res) => {
            if (res.code == 1) {
              this.$message({
                message: "荣誉增加成功！",
                type: "success",
              });
              this.addDialogVisible = false;
              this.getListData();
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
          });
        }
      });
    },
    delRy() {
      let del_arr = [];
      for (let i in this.multipleSelection) {
        del_arr.push(this.multipleSelection[i].xdxr_id);
      }
      this.$confirm("确定要撤销这些荣誉?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = {
            xdxr_id: del_arr,
          };
          ry_edit(data).then((res) => {
            if (res.code == 1) {
              this.$message({
                message: "荣誉撤销成功！",
                type: "success",
              });
              this.getListData();
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
          });
        })
        .catch(() => {});
    },
  },
  mounted() {
    this.xdxr_xsxh = this.$route.params.no;
    this.xdxr_xsxm = this.$route.params.xm;
    this.getListData();
  },
};
</script>

<style scoped>
</style>