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

<template>
  <div>
    <!-- 组庭确认页面 -->
    <el-dialog
      title="组庭确认"
      :visible="showcourtReview"
      @close="cancel"
      :destroy-on-close="true"
      center
    >
      <el-form ref="courtReviewform" :model="courtReviewform">
        <el-form-item label="是否同意组庭：">
          <el-radio-group v-model="isAgreePendTral">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- </el-form> -->
        <el-tag type="warning" v-if="noArbitrator"
          >当前案件未指定仲裁员，请先指定仲裁员！</el-tag
        >
        <div style="display: inline-flex; margin: 1% 9%">
          <div v-if="isAgreePendTral == 0">请选择仲裁员</div>
          <div v-if="isAgreePendTral == 1 && form.arbitratorName">
            当前案件仲裁员
          </div>
        </div>
        <div v-if="isAgreePendTral == 1" class="nowarbitrator">
          <el-tag size="medium">
            {{ form.arbitratorName }}
          </el-tag>
        </div>
        <!-- <div v-if="noArbitrator || isAgreePendTral == 0"> -->
        <el-form-item
          label="仲裁员："
          prop="Arbitor"
          v-if="noArbitrator || isAgreePendTral == 0"
          :rules="[
            {
              required: true,
              message: '仲裁员不能为空',
              trigger: 'blur',
            },
          ]"
        >
          <el-select
            placeholder="请选择仲裁员"
            @change="changeArbitor"
            v-model="courtReviewform.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>
        <!-- </div> -->
      </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 { pendTralSure } from "@/api/caseManagement/caseManagement.js";
import { arbitrAtor, pendTralCheck } from "@/api/formationCourt/formationCourt";
import moment from "moment";
export default {
  name: "courtReviewDialog",
  props: ["showcourtReview", "form", "queryParams"],
  data() {
    return {
      dataList: [],
      hearDate: "",
      courtReviewform: {
        hearDate: null,
      },
      noArbitrator: false,
      isAgreePendTral: 1,
      total: 0,
      queryParams1: {
        pageNum: 1,
        pageSize: 10,
      },
      paramsdata: {},
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      Arbitor: "",
    };
  },
  created() {
    this.getarbitrAtor();
  },
  watch: {
    showcourtReview(val) {
      if (val) {
        this.isAgreePendTral = 1;
        this.courtReviewform.hearDate = null;
      }
    },
    form: {
      handler(val) {
        if (val.arbitratorName == null) {
          this.noArbitrator = true;
        } else {
          this.noArbitrator = false;
        }
      },
    },
  },
  methods: {
    // 获取仲裁员信息
    getarbitrAtor() {
      arbitrAtor({}).then((res) => {
        this.dataList = res.rows;
        this.total = res.total;
      });
    },
    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.form.id,
          arbitrators: this.arbitrators,
        };
      } else {
        if (this.isAgreePendTral == 0) {
          this.paramsdata = {
            isAgreePendTral: 0,
            id: this.form.id,
            arbitrators: this.arbitrators,
          };
        } else {
          this.paramsdata = {
            isAgreePendTral: 1,
            id: this.form.id,
          };
        }
      }
      this.$refs["courtReviewform"].validate((valid) => {
        if (valid) {
          pendTralSure(this.paramsdata)
            .then((res) => {
              this.$modal.msgSuccess("确认成功");
              this.cancel();
              this.$emit("getcaseApply", this.queryParams);
            })
            .catch((err) => {});
        }
      });
    },
    cancel() {
      this.$emit("cancelcourtReview");
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  background: #ffffff;
  border-radius: 20px;
}

.el-form-item {
  margin-left: 10%;
}

.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;
    // line-height: 48px;
  }
}

.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;
    // line-height: 48px;
  }
}
.nowarbitrator {
  margin-left: 10%;
}

::v-deep .el-form-item__error {
  left: 90px;
}
</style>