qllxDailog.vue 2.54 KB
<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-09-21 09:39:21
-->
<template>
  <el-dialog
    :close-on-click-modal="false"
    title="选择权利类型"
    class="qllxdialog"
    :visible.sync="dialogVisible"
    custom-class="insetDialog"
    append-to-body
    width="31%">
    <el-button class="gettypebutton" v-for="(value, key) in qllxlistdata"
      :key="key"
      :label="value" @click="clicksss(key)" plain>{{value}}</el-button>
    <div class="btn">
      <el-button type="primary" @click="handleSubmit">确定</el-button>
      <el-button type="primary" @click="closeDialog">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        dialogVisible: false,
        qllxlistdata: {},
        radio: "",
        qllx: ""
      };
    },

    methods: {
      /**
       * @description: closeDialog
       * @author: renchao
       */
      closeDialog () {
        this.dialogVisible = false;
      },

      /**
       * @description: clicksss
       * @param {*} el
       * @author: renchao
       */
      clicksss (el) {
        this.qllx = el
      },
      /**
       * @description: handleSubmit
       * @author: renchao
       */
      handleSubmit () {

        if (this.qllx) {
          let qllxobj = {
            qllx: this.qllx,
            bsmQlxx: ""
          };
          this.$parent.addRepairRecord(qllxobj)
        } else {
          this.$message({
            type: "warning",
            message: "请选择权利类型!",
          });
        }
        this.qllx = ""
      },
    },
  };
</script>
<style scoped lang="scss">
  @import "~@/styles/public.scss";
  .qllxdialog {
    margin-top: 160px;
    /deep/.el-dialog__body {
      margin-top: 10px;
      // height: 100px;
      padding: 20px;
    }
    .gettypebutton {
      cursor: pointer;
      margin-left: 20px;
      width: 45%;
      line-height: 20px;
      background-color: #ebebeb;
      margin-top: 20px;
      padding-left: 20px;
      border-radius: 2px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      border: 1px solid #ebebeb;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      color: #000;
    }
    .gettypebutton:hover {
      border: 1px solid #0f93f6;
      color: #0f93f6;
    }
    .gettypebutton:focus {
      background-color: #0f93f6;
      border: 1px solid #0f93f6;
      color: #ebebeb;
    }
    .btn {
      margin-top: 30px;
      text-align: center;
      .el-button {
        margin-top: 10px;
        margin-left: 20px;
      }
    }
  }
</style>