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

<template>
  <div>
    <!-- 组庭界面 -->
    <el-dialog
      title="组庭审核"
      :visible="showformateCourt"
      @close="cancel"
      :destroy-on-close="true"
      center
    >
      <el-form label-width="150px" v-if="!noArbitrator">
        <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>
      <p></p>
      <!-- <el-form ref="form"> -->
      <div v-if="isAgreePendTral == 0 || noArbitrator" style="display:inline-flex;  margin-bottom: 8px;">
          <div class="infoIcon"></div>
          <div>仲裁员信息列表</div>
      </div>
      <el-table
        :data="dataList"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        v-if="isAgreePendTral == 0 || noArbitrator"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          label="仲裁员姓名"
          align="center"
          prop="arbitratorName"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="专业分类"
          align="center"
          prop="professiClassifi"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="当前案件数量"
          align="center"
          prop="currentCaseNum"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="已结案数量"
          align="center"
          prop="closedCaseNum"
          :show-overflow-tooltip="true"
        />
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams1.pageNum"
        :limit.sync="queryParams1.pageSize"
        @pagination="getarbitrAtor"
        v-if="isAgreePendTral == 0"
      />
      <!-- </el-form> -->
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="submitForm"
          :disabled="!this.arbitrators.length > 0 && isAgreePendTral == 0"
          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: [],
      total: 0,
      queryParams1: {
        pageNum: 1,
        pageSize: 10,
      },
      arbitrators: [],
      isAgreePendTral: 1,
      paramsdata: {},
      noArbitrator: false,
    };
  },
  created() {
    this.getarbitrAtor();
  },
  watch: {
    formateCourtData: {
      handler(val) {
        if (val.arbitratorName == null) {
          console.log('无仲裁员',val);
          this.noArbitrator = true
        } else {
          this.noArbitrator = false
        }
      },
    },
  },
  methods: {
    // 获取仲裁员信息
    getarbitrAtor() {
      arbitrAtor({}).then((res) => {
        this.dataList = res.rows;
        this.total = res.total;
      });
    },
    // 勾选仲裁员
    handleSelectionChange(val) {
      this.arbitrators = [];
      val.forEach((item) => {
        this.arbitrators.push({
          id: item.id,
          arbitratorName: item.arbitratorName,
        });
      });
    },
    // 确认
    submitForm() {
      // if (this.arbitrators.length > 0) {
      if (this.isAgreePendTral == 0) {
        this.paramsdata = {
          isAgreePendTral: 0,
          id: this.formateCourtData.id,
          arbitrators: this.arbitrators,
        };
      } else {
        this.paramsdata = {
          isAgreePendTral: 1,
          id: this.formateCourtData.id,
        };
      }
      pendTralCheck(this.paramsdata).then((res) => {
        this.cancel();
        this.$modal.msgSuccess("组庭成功");
        this.$emit("getcaseApply", this.queryParams);
      });
      // }
    },
    // 取消
    cancel() {
      this.$emit("cancelcourtDialog");
      this.arbitrators = [];
    },
  },
};
</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;
}
</style>