qllxDailog.vue 2.59 KB
<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-05-09 09:20:10
-->
<template>
  <el-dialog
    :close-on-click-modal="false"
    title="选择权利类型"
    class="qllxdialog"
    :visible.sync="dialogVisible"
    custom-class="insetDialog"
    append-to-body
    width="31%"
  >
    <!-- <el-radio-group v-model="radio">
      <el-radio-button
        v-for="(value, key) in qllxlistdata"
        :key="key"
        :label="value"
      ></el-radio-button>

    </el-radio-group> -->
     <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){
      console.log("elllllllllllllllllllll",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>