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"> -->
      <!-- v-if="isAgreePendTral == 0 || noArbitrator" -->
      <div style="display: inline-flex; margin-bottom: 8px">
        <div class="infoIcon"></div>
        <div>
          <span v-if="isAgreePendTral == 1">当前案件</span>仲裁员<span
            v-if="isAgreePendTral !== 1"
            >信息列表</span
          >
        </div>
      </div>
      <div v-if="isAgreePendTral == 1" class="nowarbitrator">
        <el-tag size="medium">
          {{ formateCourtData.arbitratorName }}
        </el-tag>
      </div>
      <div v-if="isAgreePendTral !== 1">
        <el-table
          :data="dataList"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <!-- v-if="isAgreePendTral == 0 || noArbitrator" -->
          <el-table-column
            type="selection"
            width="55"
            v-if="isAgreePendTral == 0"
          >
          </el-table-column>
          <el-table-column
            label="仲裁员姓名"
            align="center"
            prop="nickName"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="介绍"
            align="center"
            prop="remark"
            :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"
        />
      </div>
      <!-- </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) {
          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.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,
          };
        }
      }

      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;
}
.nowarbitrator {
  margin-left: 4%;
}
</style>