Mediation-Frontend/src/views/caseManagement/components/formateCourtDialog.vue

<template>
  <div>
    <!-- 组庭界面 -->
    <el-dialog
      title="组庭建议"
      :visible="showformateCourt"
      v-if="showformateCourt"
      @close="cancel"
      destroy-on-close
      center
    >
      <el-form
        ref="formateCourtform"
        :model="formateCourtform"
        label-width="110px"
        label-position="left"
      >
        <el-form-item label="是否同意组庭：">
          <el-radio-group v-model="isAgreePendTral" @change="radioValue">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-tag type="warning" v-if="noArbitrator"
          >当前案件未指定仲裁员，请先指定仲裁员！</el-tag
        >
        <p></p>
        <!-- <el-form ref="form"> -->
        <!-- v-if="isAgreePendTral == 0 || noArbitrator" -->
        <div style="display: inline-flex; margin-bottom: 8px">
          <div v-if="isAgreePendTral !== 1">请选择仲裁员</div>
          <div v-if="isAgreePendTral == 1 && formateCourtData.arbitratorName">
            当前案件仲裁员
          </div>
        </div>
        <div
          v-if="isAgreePendTral == 1 && formateCourtData.arbitratorName"
          class="nowarbitrator"
        >
          <el-tag size="medium">
            {{ formateCourtData.arbitratorName }}
          </el-tag>
        </div>
        <el-form-item
          label="仲裁员："
          prop="Arbitor"
          v-if="noArbitrator || isAgreePendTral == 0"
          :rules="[
            {
              required: true,
              message: '仲裁员不能为空',
            },
          ]"
        >
          <el-select
            placeholder="请选择仲裁员"
            @change="changeArbitor"
            v-model="formateCourtform.Arbitor"
            clearable
          >
            <el-option
              v-for="item in dataList"
              :key="item.value"
              :label="item.nickNameAndNum"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" class="endbutton"
          ><span>确 定</span></el-button
        >
        <el-button @click="cancel" class="endbutton1"
          ><span>取 消</span></el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { arbitrAtor, pendTralCheck } from "@/api/formationCourt/formationCourt";
export default {
  props: ["showformateCourt", "formateCourtData", "queryParams"],
  data() {
    return {
      dataList: [],
      queryParams1: {
        pageNum: 1,
        pageSize: 10,
      },
      formateCourtform: {},
      arbitrators: [],
      isAgreePendTral: 1,
      paramsdata: {},
      noArbitrator: false,
      Arbitor: "",
    };
  },
  created() {
    this.getarbitrAtor();
  },
  watch: {
    showformateCourt(val){
      console.log(this.formateCourtData)
      this.Arbitor = ""
      if(val){
        this.isAgreePendTral = 1;
      }
    },
    formateCourtData: {
      handler(val) {
        if (val.arbitratorName == null) {
          this.noArbitrator = true;
        } else {
          this.noArbitrator = false;
        }
      },
    },
  },
  methods: {
    // 获取仲裁员信息
    getarbitrAtor() {
      arbitrAtor({}).then((res) => {
        this.dataList = res.rows;
        // console.log(this.dataList, "this.dataList");
      });
    },
    changeArbitor(val) {
      this.arbitrators = [];
      this.dataList.forEach((item) => {
        if (item.userId == val) {
          this.arbitrators.push({
            id: item.userId,
            arbitratorName: item.nickName,
          });
        }
      });
    },
    // 确认
    submitForm() {
      if (this.noArbitrator) {
        this.paramsdata = {
          id: this.formateCourtData.id,
          arbitrators: this.arbitrators,
        };
      } else {
        if (this.isAgreePendTral == 0) {
          this.paramsdata = {
            isAgreePendTral: 0,
            id: this.formateCourtData.id,
            arbitrators: this.arbitrators,
          };
        } else {
          this.paramsdata = {
            isAgreePendTral: 1,
            id: this.formateCourtData.id,
          };
        }
      }
      this.$refs["formateCourtform"].validate((valid) => {
        if (valid) {
          pendTralCheck(this.paramsdata).then((res) => {
            
            this.cancel();
            this.$modal.msgSuccess("组庭成功");
            this.$emit("getcaseApply", this.queryParams);
            // 初始化页面
            this.formateCourtform={}
          });
        }
      });
    },
    // 取消
    cancel() {
      this.$emit("cancelcourtDialog");
      this.arbitrators = [];
    },
    radioValue(val){
      if(val==1){
        this.formateCourtform={}
      }else if(val==0){
        this.formateCourtform={}
      }
    }
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  background: #ffffff;
  border-radius: 20px;
}
.endbutton {
  width: 124px;
  height: 37px;
  background: #0072ff;
  border-radius: 19px;
  span {
    width: 32px;
    height: 15px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
  }
}
.endbutton1 {
  width: 124px;
  height: 37px;
  background: #ffffff;
  border: 1px solid #d0d0d0;
  border-radius: 19px;
  span {
    width: 31px;
    height: 13px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #959595;
  }
}
.infoIcon {
  width: 4px;
  // height: 17px;
  background-color: #0072ff;
  margin-right: 5px;
}
.nowarbitrator {
  margin-left: 4%;
}
</style>