newcpms/ui/src/views/training/trainingbcc/trainingNon.vue

<template>
  <el-dialog  :close-on-click-modal="false" v-dialogDrag
    :title="$t('未参会人员名单')"

    :visible.sync="visible"
    @close="closeDialog">
    <el-form :inline="true" :model="queryParams" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-button v-hasPermi="['training:training:trainingNon']" type="primary" @click="add()">{{ $t('新增') }}</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="trainingNonList" border>
      <el-table-column :label="$t('未参会人员姓名')" align="center" header-align="center" prop="staffId" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-select v-model="scope.row.staffId" v-if="scope.row.isEdit" filterable :placeholder="$t('请选择') + $t('未参会人员名单')">
            <el-option
              v-for="dict in stffmgrOptions"
              :key="dict.staffid"
              :label="dict.name"
              :value="dict.staffid">
              <span style="float: left">{{ dict.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ dict.staffid }}</span>
            </el-option>
          </el-select>
          <span v-else>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('培训日期')" align="center" header-align="center" prop="trainingDate">
        <template slot-scope="scope">
          <el-date-picker
            v-if="scope.row.isEdit"
            v-model="scope.row.trainingDate"
            type="date"
            value-format="yyyy-MM-dd"
            :placeholder="$t('日期')">
          </el-date-picker>
          <span v-else>{{ parseTime(scope.row.trainingDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('补培讲师')" align="center" header-align="center" prop="trainingStaff" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-select v-model="scope.row.trainingStaff" v-if="scope.row.isEdit" filterable :placeholder="$t('请选择') + $t('补培讲师')">
            <el-option
              v-for="dict in trainingstaffOptions"
              :key="dict.staffid"
              :label="dict.name"
              :value="dict.staffid">
              <span style="float: left">{{ dict.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ dict.staffid }}</span>
            </el-option>
          </el-select>
          <span v-else>{{scope.row.staffName}}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('备注')" align="center" header-align="center" prop="remarks" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-input v-if="scope.row.isEdit" v-model="scope.row.remarks"></el-input>
          <span v-else>{{scope.row.remarks}}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('操作')" align="center" fixed="right" width="120" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-hasPermi="['training:training:trainingNon']" type="text" size="small" v-if="scope.row.isEdit" @click="save(scope.row)">{{ $t('保存') }}</el-button>
          <el-button type="text" size="small" v-if="scope.row.isEdit" @click="cancel(scope.row, scope.$index)">{{ $t('取消') }}</el-button>
          <el-button v-hasPermi="['training:training:trainingNon']" v-if="!scope.row.isEdit" @click="edit(scope.row)" type="text" size="mini">{{ $t('编辑') }}</el-button>
          <el-button v-hasPermi="['training:training:trainingNon']" v-if="!scope.row.isEdit" type="text" size="small" @click="deleteHandle(scope.row)">{{ $t('删除') }}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
import { listTrainingNon, getTrainingNon, delTrainingNon, addTrainingNon, updateTrainingNon, exportTrainingNon, importTemplate} from "@/api/training/trainingNon";
import { listStaffmgr,listAllStaffmgr, selectByStaffId } from "@/api/plant/staffmgr";

export default {
  name: "TrainingNon",
  props: {
    // 接受父级组件的显示标记，用于被watch
    showFlag: {
      type: Boolean
    }
  },
  data() {
    return {
      visible: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        trainingId: '',
        isNew: 0
      },
      //人员表查询参数
      staffmgrQueryParams: {
        staffid: null,
        unit: null,
        actualposts: null,
        leftYear: null
      },
      trainingStaffQueryParams: {
        leftYear: null
      },
      // 培训计划未参加人员表格数据
      trainingNonList: [],
      //人员表联查
      stffmgrOptions: undefined,
      trainingstaffOptions: undefined,
      //指定人员名单
      designatedStaffs: [],
      // 总条数
      total: 0,
      // 表单参数
      form: {},
    }
  },
  watch: {
    // 观察父级组件的showFlag，并将showFlag的最新值设置给dialogVisible
    showFlag (newVal, oldVal) {
      this.visible = newVal
    }
  },
  methods: {
    init (row) {
      this.queryParams.trainingId = row.id || 0
      this.staffmgrQueryParams.leftYear = row.year
      this.trainingStaffQueryParams.leftYear = row.year
      this.staffmgrQueryParams.units = row.unitid
      this.staffmgrQueryParams.actualposts = row.positionid
      if (row.designatedStaff != null) {
        this.designatedStaffs = row.designatedStaff.split(',')
      }else {
        this.designatedStaffs = []
      }
      this.getStaffmar()
      this.visible = true
    },
    //获取人员表
    getStaffmar() {
      listAllStaffmgr(this.staffmgrQueryParams).then(response => {
        this.stffmgrOptions = response.rows;
        if (this.designatedStaffs.length > 0) {
          selectByStaffId(this.designatedStaffs).then(response => {
            this.stffmgrOptions = this.stffmgrOptions.concat(response.data)
          })
        }
      });
      listAllStaffmgr(this.trainingStaffQueryParams).then(response => {
        this.trainingstaffOptions = response.rows;
      });
      this.$nextTick(() => {
        this.getList();
      })
    },
    /** 查询培训计划未参加人员列表 */
    getList() {
      this.loading = true;
      listTrainingNon(this.queryParams).then(response => {
        this.total = response.total;
          response.rows.forEach(element => {
            element["isEdit"] = false
          });
          response.rows.forEach(element => {
            element["isAdd"] = false
          });
          this.trainingNonList = response.rows;

        this.loading = false;
      });
    },
    /**
     * 关闭弹出框事件，触发父级组件的getList方法
     */
    closeDialog () {
      this.$emit('closeChildDialog')
    },
      // 取消
    cancel(row, index) {
      // 如果是新增的数据
      if (row.isAdd) {
        this.trainingNonList.splice(index, 1)
      } else {
        // 不是新增的数据  还原数据
        for (const i in row.oldRow) {
          row[i] = row.oldRow[i]
        }
        row.isEdit = false
      }
    },
    edit(row) {
      // 备份原始数据
      row['oldRow'] = JSON.parse(JSON.stringify(row));
      this.$nextTick(() => {
        row.isEdit = true;
      })
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        delFlag: null,
        createrCode: null,
        createdate: null,
        updaterCode: null,
        updatedate: null,
        remarks: null,
        trainingDate: null,
        staffId: null,
        trainingId: null,
        trainingStaff: null,
        isNew: 0
      };
      this.resetForm("form");
    },
    add() {
      this.trainingNonList.push({
        trainingId: this.queryParams.trainingId,
        staffId: '',
        trainingDate: '',
        isNew: 0,
        isEdit: true,
        isAdd: true
      });
    },
    save(row) {
      row.isEdit = false;
      var that = this;
      that.loading = true;
      this.form = row;
      this.form.trainingId = this.queryParams.trainingId;
      this.form.isNew = 0;
      if (row.isAdd == true) {
        addTrainingNon(this.form).then(response => {
          this.msgSuccess(this.$t('新增成功'));
          this.open = false;
          this.getList();
        });
      }else {
        updateTrainingNon(this.form).then(response => {
          this.msgSuccess(this.$t('修改成功'));
          this.open = false;
          this.getList();
        });
      }
    },
    /** 删除按钮操作 */
    deleteHandle(row) {
      const ids = row.id || this.ids;
      this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: "warning"
        }).then(function() {
          return delTrainingNon(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess(this.$t('删除成功'));
        })
    },
  }
};
</script>