drp-ui/src/views/business/ehr/pm/psnrelation/detail.vue

<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span style="font-weight:bold">评估关系</span>
        <div style="float: right; padding: 3px 0" type="text">
          <el-button size="mini" plain @click="btnBack">返回</el-button>
          <el-button size="mini" plain @click="btnPreviou">上一个</el-button>
          <el-button size="mini" plain @click="btnNext">下一个</el-button>
        </div>
      </div>
      <div v-loading="loading">
        <el-descriptions :column="6 " v-if="pageState == 'see'">
          <el-descriptions-item label="员工编号">{{form.staff}}</el-descriptions-item>
          <el-descriptions-item label="员工姓名">{{form.staffName}}</el-descriptions-item>
          <el-descriptions-item label="是否双向评估">{{form.isTwoEvaluation == "1" ? "是" : "否"}}</el-descriptions-item>
        </el-descriptions>
        <el-form size="mini" :model="form" inline v-if="pageState != 'see'">
          <el-row>
            <el-col :span="4">
              <el-form-item label="员工编号" prop="staff">
                <el-input size="mini" style="width: 150px" v-model="form.staff" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="员工姓名" prop="staffName">
                <el-input size="mini" style="width: 150px" v-model="form.staffName" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="是否双向评估" prop="aspect">
                <el-switch v-model="form.isTwoEvaluation" :active-value="true" :inactive-value="false"></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <el-table size="mini" :data="form.psnrelationItem" v-if="pageState == 'see'" :key="refreshTable">
          <el-table-column width="50" label="序号" align="center" type="index" />
          <el-table-column width="300" label="评估人编码" align="center" prop="staff" />
          <el-table-column width="300" label="评估人名称" align="center" prop="staffName" />
          <el-table-column width="300" label="评估方面" align="center" prop="aspects" v-if="form.isTwoEvaluation">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.ehr_pm_aspecttype" :value="scope.row.aspects"/>
            </template>
          </el-table-column>
        </el-table>

        <div style="float:right" v-if="pageState != 'see'">
          <el-button type="primary" size="mini" @click="btnAddRow">新增</el-button>
        </div>
        <el-table size="mini" :data="form.psnrelationItem" v-if="pageState != 'see'" :key="refreshTable">
          <el-table-column width="50" label="序号" align="center" type="index" />
          <el-table-column width="300" label="评估人编码" align="center" prop="staff" />
          <el-table-column width="300" label="评估人名称" align="center" prop="staffName">
            <template slot-scope="scope">
              <el-popover-select-v2 
                size="mini" 
                v-model="form.psnrelationItem[scope.$index].staffName" 
                title="员工" 
                valueKey="name"
                referName="CONTACTS_PARAM" 
                :dataMapping="{staff:'code',staffName: 'name'}"
                :source.sync="form.psnrelationItem[scope.$index]" 
                @change="aa"
              >
              </el-popover-select-v2>
            </template>
          </el-table-column>
          <el-table-column width="300" label="评估方面" align="center" prop="aspects" v-if="form.isTwoEvaluation">
            <template slot-scope="scope">
              <el-select size="mini" v-model="scope.row.aspects" placeholder="">
                <el-option v-for=" dict in dict.type.ehr_pm_aspecttype" :key="dict.value" :label="dict.label" :value="dict.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-top" @click="btnMoveUp(scope.row, scope.$index)">上移</el-button>
              <el-button size="mini" type="text" icon="el-icon-bottom" @click="btnMoveDown(scope.row, scope.$index)">下移</el-button>
              <el-button size="mini" type="text" icon="el-icon-delete" @click="btnDelete(scope.$index, scope.row)">删行</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footer">
        <el-button type="primary" size="mini" @click="btnEdit" v-if="pageState == 'see'">修改</el-button>
        <el-button size="mini" plain @click="btnCancel" v-if="pageState != 'see'">取消</el-button>
        <el-button type="primary" size="mini" @click="btnSave" v-if="pageState != 'see'">保存</el-button>
      </div>
    </el-card>

  </div>
</template>

<script>
import { getPsnrelation,savePsnrelation} from "@/api/business/ehr/pm/psnrelation";
  import ElPopoverSelectV2 from "@/components/popover-select-v2"
export default {
  name: 'detail',
  dicts: ['ehr_pm_aspect','ehr_pm_role','ehr_pm_aspecttype'],
  props: ['enterState','rowId',"ids"],
  components: { ElPopoverSelectV2},
  model: {
    prop: 'isList',
    event: 'jugislist'
  },
  data() {
    return {
      //id
      id:null,
      //表单
      form:{},
      //删除的子表数据
      delItems:[],
      //表单校验规则
      formRules:{
      },
      //遮罩
      loading: false,
      //页面状态
      pageState: null,
      //刷新表格标记
      refreshTable:0,
    }
  },
  async created() {
    this.pageState = this.enterState;
    this.id = this.rowId;
    this.fetchPsnrelation(this.id);
    if(this.enterState == 'add'){
    }
    if(this.enterState == 'edit' || this.enterState == 'see') {
    }
  },
  watch: {
  },
  methods: {
    //返回
    btnBack(){
      this.$emit('jugislist', true)
      this.$emit('refresh')
    },
    //查询详情
    async fetchPsnrelation(id){
      this.loading = true;
      await getPsnrelation(id).then(res => {
        if (res.code === 200) {
          this.form = res.data;
          this.id = res.data.id;
          this.refreshTable++;
         }
         this.loading = false;
      })
    },
    //新增
    btnAddRow(){
      this.form.psnrelationItem.push({psnrelationId: this.id,delFlag: 0});
    },
    //上移
    btnMoveUp(row, index){
      if (index > 0) {
        let upData = this.form.psnrelationItem[index - 1];
        this.form.psnrelationItem.splice(index - 1, 1);
        this.form.psnrelationItem.splice(index, 0, upData);
      } else {
        this.$message({
            message: '已经是第一条，上移失败',
            type: 'warning'
        });
      }
    },
    //下移
    btnMoveDown(row, index){
      if ((index + 1) == this.form.psnrelationItem.length) {
        this.$message({
            message: '已经是最后一条，下移失败',
            type: 'warning'
        });
      } else {
        let downData = this.form.psnrelationItem[index + 1];
        this.form.psnrelationItem.splice(index + 1, 1);
        this.form.psnrelationItem.splice(index, 0, downData);
      }
    },
    //删除
    btnDelete(index){
      console.log('index',index);
      this.form.psnrelationItem[index].delFlag = '2';
      console.log('this.form.psnrelationItem',this.form.psnrelationItem);
      if(this.form.psnrelationItem[index].id){
        this.delItems.push(this.form.psnrelationItem[index]);
      }
      console.log('this.delItems',this.delItems);
      this.form.psnrelationItem.splice(index, 1);
    },
    //修改
    btnEdit(){
      this.pageState = "edit";
    },
    //取消
    btnCancel(){
      if(this.enterState == 'add'){
        this.btnBack();
      }else{
        this.fetchPsnrelation(this.id);
        this.pageState = "see";
      }
    },
    //保存
    btnSave(){
      this.loading = true;
      this.form.psnrelationItem.push(...this.delItems);
      this.form.psnrelationItem = this.form.psnrelationItem.filter(e => e.staff);
      savePsnrelation(this.form).then(response => {
        this.$modal.msgSuccess("保存成功");
        this.fetchPsnrelation(this.id);
        this.pageState = "see";
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });;
    },
    //上一个
    btnPreviou(){
      this.pageState = "see";
      let i = this.ids.indexOf(this.id) - 1;
      if(i > -1){
        let id = this.ids[i];
        this.fetchPsnrelation(id);
      }else{
        this.$modal.msgSuccess("已经是当前页第一条了！");
      }
    },
    //下一个
    btnNext(){
      this.pageState = "see";
      let i = this.ids.indexOf(this.id) + 1;
      if(i < this.ids.length){
        let id = this.ids[i];
        this.fetchPsnrelation(id);
      }else{
        this.$modal.msgSuccess("已经是当前页最后一条了！");
      }
    },
    aa(val,val1){
      console.log('val',val);
      console.log('val1',val1);
      console.log(this.form.psnrelationItem);
    }
  }
}
</script>

<style lang="scss" scoped>
.footer {
  z-index: 500;
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 100%;
  line-height: var(--footer-height);
  text-align: right;
}
.hang ::v-deep .el-form-item__content {
  margin-left: 0px !important;
}
</style>